fixed name of announcement toggle

fixed toggle and shuffle

moved data transformation to custom hook

Author: SAUMILDHANKAR

client/src/components/Admin/Announcements.jsx

@@ -47,15 +47,7 @@ const Announcements = () => {
   } = useAnnouncements();
 
   useEffect(() => {
-    if (announcementsData) {
-      const newRows = announcementsData.map((announcement) => ({
-        announcementId: announcement.id,
-        title: announcement.title,
-        description: announcement.description,
-        is_enabled: announcement.is_enabled,
-      }));
-      setRows(newRows);
-    }
+    setRows(announcementsData || []);
   }, [announcementsData]);
 
   const handleModalClose = () => {
@@ -73,12 +65,17 @@ const Announcements = () => {
 
   const handleIsEnabled = async (announcementId, isEnabled) => {
     try {
-      await announcementService.update(announcementId, { is_enabled: isEnabled });
-      setRows((prevRows) =>
-        prevRows.map((row) =>
-          row.announcementId === announcementId ? { ...row, is_enabled: isEnabled } : row
-        )
+      const announcement = rows.find(
+        (row) => row.announcementId === announcementId
       );
+      if (!announcement) throw new Error("Announcement not found");
+
+      await announcementService.update(announcementId, {
+        title: announcement.title,
+        description: announcement.description,
+        is_enabled: isEnabled,
+      });
+      await announcementRefetch();
     } catch (error) {
       console.error("Error updating announcement:", error);
     }
@@ -174,7 +171,7 @@ const Announcements = () => {
               <TableCell align="left"> Announcement ID </TableCell>
               <TableCell align="left">Announcement Title</TableCell>
               <TableCell align="left">Announcement Description</TableCell>
-              <TableCell align="left">Is Enabled?</TableCell>
+              <TableCell align="left">Enabled</TableCell>
               <TableCell />
             </TableRow>
           </TableHead>
@@ -311,7 +308,7 @@ const Announcements = () => {
                     onChange={announcementFormik.handleChange}
                   />
                 }
-                label="Globally Enable"
+                label="Enabled"
               />
             </Box>
             <Box mt={3} display="flex" justifyContent="space-between">
@@ -381,7 +378,7 @@ const Announcements = () => {
                     onChange={editFormik.handleChange}
                   />
                 }
-                label="Globally Enable"
+                label="Enabled"
               />
             </Box>
             <Box mt={3} display="flex" justifyContent="space-between">

client/src/hooks/useAnnouncements.js

@@ -11,7 +11,17 @@ export const useAnnouncements = () => {
       setLoading(true);
       try {
         const announcements = await announcementService.getAllAnnouncements();
-        setData(announcements);
+        // Transform and sort here
+        const processed = announcements
+          .slice()
+          .sort((a, b) => a.id - b.id)
+          .map((announcement) => ({
+            announcementId: announcement.id,
+            title: announcement.title,
+            description: announcement.description,
+            is_enabled: announcement.is_enabled,
+          }));
+        setData(processed);
         setLoading(false);
       } catch (err) {
         setError(err);