modification contenu libre

parlemonde · Dec 11, 2024 · 1f05d06 · 1f05d06
1 parent 42eae5e
commit 1f05d06
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 28 deletions.
diff --git a/src/components/activities/ActivityCard/activity-admin/ActivityCardAdmin.tsx b/src/components/activities/ActivityCard/activity-admin/ActivityCardAdmin.tsx
@@ -113,7 +113,7 @@ export default function ActivityCard({
               }}
             >
               <MenuItem onClick={handleModified} disabled={modifiedDisabled}>
-                Modifier
+                Configurer
               </MenuItem>
               <MenuItem onClick={handleDelete}>Supprimer</MenuItem>
             </Menu>

diff --git a/src/contexts/activityContext.tsx b/src/contexts/activityContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { useRouter } from 'next/router';
 import React from 'react';
 import { useQueryClient } from 'react-query';
@@ -351,6 +352,8 @@ export const ActivityContextProvider = ({ children }: React.PropsWithChildren<Re
           success: false,
         };
       }
+
+      const queryKey = ['activityById', activityRef.current.id];
       if (activityRef.current.status !== ActivityStatus.DRAFT && !publish) {
         return {
           success: false,
@@ -368,6 +371,10 @@ export const ActivityContextProvider = ({ children }: React.PropsWithChildren<Re
         result = await editActivity(publish);
       }
 
+      if (result.success) {
+        queryClient.setQueryData(queryKey, result.activity);
+      }
+
       if (!publish) {
         setDraftStep(2);
         draftStepTimeout.current = window.setTimeout(() => {

diff --git a/src/pages/admin/newportal/contenulibre/edit/1/[id]/index.tsx b/src/pages/admin/newportal/contenulibre/edit/1/[id]/index.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Layout from '../../../layout';
 import { useGetOneActivityById } from 'src/api/activities/activities.getOneById';
@@ -11,13 +11,17 @@ import { ActivityContext } from 'src/contexts/activityContext';
 import type { ActivityContent } from 'types/activity.type';
 
 const ContenuLibreStep1: React.FC = () => {
-  const { updateActivity, addContent, deleteContent, save } = React.useContext(ActivityContext);
+  const { activity, updateActivity, addContent, deleteContent, save } = React.useContext(ActivityContext);
   const router = useRouter();
   const { id } = router.query;
 
-  const { data: activity } = useGetOneActivityById({ id: Number(id) });
+  const { data: fetchedActivity } = useGetOneActivityById({ id: Number(id) });
 
-  // useEffect(() => {}, [activity, router]);
+  useEffect(() => {
+    if (fetchedActivity && (!activity || activity.id !== fetchedActivity.id)) {
+      updateActivity(fetchedActivity);
+    }
+  }, [fetchedActivity, activity, updateActivity]);
 
   const updateContent = (content: ActivityContent[]): void => {
     if (!activity) return;

diff --git a/src/pages/admin/newportal/contenulibre/edit/2/[id]/index.tsx b/src/pages/admin/newportal/contenulibre/edit/2/[id]/index.tsx
@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { TextField, Switch, Button } from '@mui/material';
 
@@ -22,32 +22,28 @@ import { primaryColor } from 'src/styles/variables.const';
 const ContenuLibre = () => {
   const router = useRouter();
   const { id } = router.query;
-  const { updateActivity, save } = useActivity();
-  const { data: activity } = useGetOneActivityById({ id: Number(id) });
+  const { activity, updateActivity, save } = useActivity();
+  const { data: fetchedActivity } = useGetOneActivityById({ id: Number(id) });
   const { user } = React.useContext(UserContext);
   const [selectedImageUrl, setSelectedImageUrl] = React.useState<string | undefined>(undefined);
   const [isAllImagesModalOpen, setIsAllImagesModalOpen] = React.useState(false);
   const [isImageModalOpen, setIsImageModalOpen] = React.useState(false);
 
+  useEffect(() => {
+    if (fetchedActivity && (!activity || activity.id !== fetchedActivity.id)) {
+      updateActivity(fetchedActivity);
+    }
+  }, [fetchedActivity, activity, updateActivity]);
+
   const data = (activity?.data as FreeContentData) || null;
 
   const hasContentImages = React.useMemo(() => activity !== null && activity.content.some((c: { type: string }) => c.type === 'image'), [activity]);
   const imageUrl = React.useMemo(() => getImage(activity?.content ?? [], data), [activity, data]);
-  const [localData, setLocalData] = React.useState<FreeContentData | null>(null);
-
-  React.useEffect(() => {
-    if (activity && activity.data) {
-      setLocalData(activity.data as FreeContentData);
-    }
-  }, [activity]);
 
   const dataChange = (key: keyof FreeContentData) => (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value.slice(0, 400);
-
-    setLocalData((prevData) => {
-      const newData = { ...prevData, [key]: value } as FreeContentData;
-      return newData;
-    });
+    const newData = { ...data, [key]: value };
+    updateActivity({ data: newData });
   };
 
   if (!activity || !user) {
@@ -63,8 +59,10 @@ const ContenuLibre = () => {
   };
 
   const onNext = async () => {
-    save().catch(console.error);
-    router.push(`/admin/newportal/contenulibre/edit/3/${id}`);
+    const success = await save();
+    if (success) {
+      router.push(`/admin/newportal/contenulibre/edit/3/${id}`);
+    }
   };
 
   return (
@@ -78,7 +76,7 @@ const ContenuLibre = () => {
             Vous pouvez également décider de mettre votre publication à l&apos;avant, tout en haut du fil d&apos;actualité.
           </p>
           <TextField
-            value={localData?.title || ''}
+            value={data.title}
             onChange={dataChange('title')}
             label="Titre de votre publication"
             variant="outlined"
@@ -89,7 +87,7 @@ const ContenuLibre = () => {
           />
 
           <TextField
-            value={localData?.resume || ''}
+            value={data.resume}
             onChange={dataChange('resume')}
             label="Extrait votre publication"
             variant="outlined"

diff --git a/src/pages/admin/newportal/contenulibre/edit/3/[id]/index.tsx b/src/pages/admin/newportal/contenulibre/edit/3/[id]/index.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
@@ -20,12 +20,18 @@ import { useActivity } from 'src/hooks/useActivity';
 const ContenuLibre = () => {
   const router = useRouter();
   const { id } = router.query;
-  const { data: activity } = useGetOneActivityById({ id: Number(id) });
+  const { data: fetchedActivity } = useGetOneActivityById({ id: Number(id) });
 
-  const { save, setDraft } = useActivity();
+  const { activity, updateActivity, save, setDraft } = useActivity();
   const { user } = React.useContext(UserContext);
   const [isLoading, setIsLoading] = React.useState(false);
 
+  useEffect(() => {
+    if (fetchedActivity && (!activity || activity.id !== fetchedActivity.id)) {
+      updateActivity(fetchedActivity);
+    }
+  }, [fetchedActivity, activity, updateActivity]);
+
   const onModified = async () => {
     setIsLoading(true);
     const { success } = await save(false);

diff --git a/src/pages/admin/newportal/publier/index.tsx b/src/pages/admin/newportal/publier/index.tsx
@@ -49,7 +49,7 @@ const Publier = () => {
           noDataText="Il n'y a aucune activitées non publiée"
           svgNoData={<PelicoStar style={{ height: '6rem', width: '6rem' }} />}
           buttonAction={() => router.push('/admin/newportal/publier/draft')}
-          modifiedDisabled={true}
+          modifiedDisabled={false}
         />
       </div>
       <div style={{ margin: 10 }}>