AdminJO Front - Documentation API - v0.1.0
    Preparing search index...

    Function useOffreManagement

    • Hook useOffreManagement - Gestion complète des offres

      Ce hook fournit une interface unifiée pour la gestion des offres de l'application AdminJO. Il combine les opérations CRUD, la gestion des états de chargement et un système de notifications pour offrir un feedback utilisateur immédiat sur toutes les opérations effectuées.

      Returns {
          offres: Offre[];
          loading: boolean;
          error: string | null;
          formLoading: boolean;
          formNotification: Notification | null;
          createOffre: (offreData: Offre) => Promise<Offre>;
          updateOffre: (id: number, offreData: Offre) => Promise<Offre>;
          deleteOffre: (id: number) => Promise<void>;
          setFormLoading: Dispatch<SetStateAction<boolean>>;
          setFormNotification: Dispatch<SetStateAction<Notification | null>>;
          loadOffres: () => Promise<void>;
      }

      Interface complète de gestion des offres

      useOffreManagement

      • Chargement automatique : Récupération de toutes les offres au montage du composant
      • Gestion d'état : États de chargement et d'erreur pour les opérations principales
      • Mise à jour synchrone : Actualisation immédiate de l'état local après modifications
      • Synchronisation : Maintien de la cohérence avec les données backend
      • Création d'offres : Ajout de nouvelles offres avec validation et feedback
      • Lecture des données : Récupération et affichage de toutes les offres
      • Mise à jour : Modification des offres existantes avec confirmation
      • Suppression : Suppression sécurisée des offres avec notification
      • Feedback immédiat : Notifications de succès/erreur pour chaque opération
      • Types de notifications : Messages différenciés selon le type d'opération
      • Gestion centralisée : Interface unifiée pour toutes les notifications
      • Réinitialisation automatique : Nettoyage des notifications lors de nouvelles opérations
      • offres : Liste complète des offres disponibles
      • loading : État de chargement pour les opérations de lecture principales
      • error : Messages d'erreur pour les opérations de chargement
      • formLoading : État de chargement spécifique aux opérations CRUD
      • formNotification : Notifications de feedback pour les opérations utilisateur
      • loadOffres() : Récupération de toutes les offres depuis l'API
      • Gestion d'erreurs : Capture et affichage des erreurs de chargement
      • États de chargement : Indicateurs visuels pendant les opérations
      • createOffre() : Création de nouvelles offres avec validation
      • Mise à jour locale : Ajout immédiat à la liste sans rechargement
      • Notification succès : Confirmation de création réussie
      • updateOffre() : Modification des offres existantes
      • Mise à jour optimiste : Changement immédiat dans l'état local
      • Synchronisation : Maintien de la cohérence avec les données serveur
      • deleteOffre() : Suppression des offres avec confirmation
      • Nettoyage local : Retrait immédiat de la liste affichée
      • Gestion d'erreurs : Rollback en cas d'échec de suppression
      1. Initialisation : Chargement automatique de toutes les offres au montage
      2. Opérations CRUD : Exécution avec mise à jour immédiate de l'état local
      3. Notifications : Affichage du feedback utilisateur pour chaque action
      4. Gestion d'erreurs : Capture et affichage des erreurs avec rollback si nécessaire
      5. Synchronisation : Maintien de la cohérence entre l'état local et le serveur
      • OffreService : Service API principal pour les opérations sur les offres
      • Offre type : Interface TypeScript pour la structure des données
      • Notification type : Interface pour le système de feedback utilisateur
      function OffresManagementPage() {
      const {
      offres,
      loading,
      error,
      formLoading,
      formNotification,
      createOffre,
      updateOffre,
      deleteOffre,
      setFormNotification
      } = useOffreManagement();

      if (loading) return <Spinner />;
      if (error) return <ErrorMessage message={error} />;

      const handleCreateOffre = async (offreData) => {
      try {
      await createOffre(offreData);
      // Notification automatique de succès
      } catch (error) {
      // Notification automatique d'erreur
      }
      };

      return (
      <div>
      {formNotification && (
      <NotificationComponent
      message={formNotification.message}
      type={formNotification.type}
      onClose={() => setFormNotification(null)}
      />
      )}
      <OffreForm
      onSubmit={handleCreateOffre}
      loading={formLoading}
      />
      <OffresList
      offres={offres}
      onUpdate={updateOffre}
      onDelete={deleteOffre}
      loading={formLoading}
      />
      </div>
      );
      }