Hook personalizado que gestiona la lógica de aprobación o rechazo de campañas publicitarias. Proporciona funciones para filtrar, listar y procesar las solicitudes de campañas pendientes o rechazadas.
Sección activa actual ('solicitadas' | 'rechazadas')
Función para cambiar la sección activa
Array de campañas filtradas por el estado activo
Estado de carga de los datos
Función para aprobar una campaña
Función para rechazar una campaña
import { useCampaignApproval } from '@/hooks/useCampaignApproval';
const CampaignApprovalComponent = () => {
const {
activeSection,
setActiveSection,
campaigns,
isLoading,
handleApprove,
handleReject
} = useCampaignApproval();
return (
<div>
<div className="mb-4">
<button onClick={() => setActiveSection('solicitadas')}>Solicitadas</button>
<button onClick={() => setActiveSection('rechazadas')}>Rechazadas</button>
</div>
{isLoading ? (
<p>Cargando...</p>
) : (
<table>
<thead>
<tr>
<th>Campaña</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{campaigns?.map((campaign) => (
<tr key={campaign.campaign_id}>
<td>{campaign.title}</td>
<td>
{activeSection === 'solicitadas' && (
<>
<button onClick={() => handleApprove(campaign)}>
Aprobar
</button>
<button onClick={() => handleReject(campaign.campaign_id)}>
Rechazar
</button>
</>
)}
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
};
Diagrama de flujo de datos
Diagrama representativo del flujo de aprobación de campañas
Utiliza React Query para obtener campañas filtradas por estado.
Dos mutaciones principales: approveCampaignMutation y rejectCampaignMutation.
Tras aprobar/rechazar, se invalida la caché de React Query para refrescar los datos.
Utiliza el hook useToast para mostrar mensajes de éxito o error.