Skip to content

Commit 2a5873f

Browse files
SAUMILDHANKARSAUMILDHANKAR
committed
fixed name of announcement toggle
fixed toggle and shuffle moved data transformation to custom hook removed comment removed states and useeffect
1 parent ad0796d commit 2a5873f

2 files changed

Lines changed: 98 additions & 107 deletions

File tree

‎client/src/components/Admin/Announcements.jsx‎

Lines changed: 87 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import {
44
CircularProgress,
55
Container,
66
Dialog,
7+
FormControlLabel,
78
IconButton,
89
Paper,
910
Stack,
11+
Switch,
1012
Table,
1113
TableBody,
1214
TableCell,
@@ -16,24 +18,18 @@ import {
1618
TableRow,
1719
TextField,
1820
Typography,
19-
FormControlLabel,
20-
Switch,
2121
} from "@mui/material";
2222
import {
2323
Delete as DeleteIcon,
24-
KeyboardArrowDown as KeyboardArrowDownIcon,
25-
KeyboardArrowUp as KeyboardArrowUpIcon,
2624
} from "@mui/icons-material";
2725
import { useFormik } from "formik";
28-
import React, { useEffect, useState } from "react";
26+
import React, { useState } from "react";
2927
import * as Yup from "yup";
3028
import { useAnnouncements } from "../../hooks/useAnnouncements";
3129
import * as announcementService from "../../services/announcements-service";
3230
import EditIcon from "@mui/icons-material/Edit";
3331

3432
const Announcements = () => {
35-
const [selectedRowId, setSelectedRowId] = useState(null);
36-
const [rows, setRows] = useState([]);
3733
const [announcementModalOpen, setAnnouncementModalOpen] = useState(false);
3834
const [editModalOpen, setEditModalOpen] = useState(false);
3935
const [editAnnouncement, setEditAnnouncement] = useState(null);
@@ -46,39 +42,24 @@ const Announcements = () => {
4642
refetch: announcementRefetch,
4743
} = useAnnouncements();
4844

49-
useEffect(() => {
50-
if (announcementsData) {
51-
const newRows = announcementsData.map((announcement) => ({
52-
announcementId: announcement.id,
53-
title: announcement.title,
54-
description: announcement.description,
55-
is_enabled: announcement.is_enabled,
56-
}));
57-
setRows(newRows);
58-
}
59-
}, [announcementsData]);
60-
6145
const handleModalClose = () => {
6246
setAnnouncementModalOpen(false);
6347
announcementFormik.resetForm();
6448
};
6549

66-
const handleRowClick = (rowTitle) => {
67-
if (selectedRowId === rowTitle) {
68-
setSelectedRowId(null);
69-
} else {
70-
setSelectedRowId(rowTitle);
71-
}
72-
};
73-
7450
const handleIsEnabled = async (announcementId, isEnabled) => {
7551
try {
76-
await announcementService.update(announcementId, { is_enabled: isEnabled });
77-
setRows((prevRows) =>
78-
prevRows.map((row) =>
79-
row.announcementId === announcementId ? { ...row, is_enabled: isEnabled } : row
80-
)
52+
const announcement = (announcementsData || []).find(
53+
(row) => row.announcementId === announcementId
8154
);
55+
if (!announcement) throw new Error("Announcement not found");
56+
57+
await announcementService.update(announcementId, {
58+
title: announcement.title,
59+
description: announcement.description,
60+
is_enabled: isEnabled,
61+
});
62+
await announcementRefetch();
8263
} catch (error) {
8364
console.error("Error updating announcement:", error);
8465
}
@@ -145,6 +126,7 @@ const Announcements = () => {
145126
</Stack>
146127
);
147128
}
129+
148130
return (
149131
<Container maxWidth="md">
150132
<Box
@@ -174,81 +156,80 @@ const Announcements = () => {
174156
<TableCell align="left"> Announcement ID </TableCell>
175157
<TableCell align="left">Announcement Title</TableCell>
176158
<TableCell align="left">Announcement Description</TableCell>
177-
<TableCell align="left">Is Enabled?</TableCell>
159+
<TableCell align="left">Enabled</TableCell>
178160
<TableCell />
179161
</TableRow>
180162
</TableHead>
181163
<TableBody>
182-
{rows
164+
{(announcementsData || [])
183165
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
184-
.map((row, index) => (
185-
<React.Fragment key={index}>
186-
<TableRow
187-
sx={{
188-
"& > *": {
189-
borderBottom: "unset",
190-
cursor: "pointer",
191-
backgroundColor: "#efefef",
192-
},
193-
}}
194-
hover
195-
>
196-
<TableCell>
197-
<IconButton
198-
aria-label="edit-announcement"
199-
size="small"
200-
onClick={() => {
201-
setEditAnnouncement(row);
202-
setEditModalOpen(true);
203-
}}
204-
>
205-
<EditIcon />
206-
</IconButton>
207-
</TableCell>
208-
<TableCell align="left" component="th" scope="row">
209-
{row.announcementId}
210-
</TableCell>
211-
<TableCell align="left" component="th" scope="row">
212-
{row.title}
213-
</TableCell>
214-
<TableCell align="left" component="th" scope="row">
215-
{row.description}
216-
</TableCell>
217-
<TableCell>
218-
<FormControlLabel
219-
control={
220-
<Switch
221-
color="success"
222-
checked={row.is_enabled}
223-
onChange={(e) =>
224-
handleIsEnabled(row.announcementId, e.target.checked)
225-
}
226-
/>
227-
}
228-
/>
229-
</TableCell>
230-
<TableCell align="right">
231-
<IconButton
232-
color="error"
233-
aria-label="delete-announcement"
234-
onClick={async (e) => {
235-
e.stopPropagation();
236-
try {
237-
await announcementService.remove(row.announcementId);
238-
announcementRefetch();
239-
} catch (error) {
240-
console.error(
241-
"Failed to remove announcement:",
242-
error
243-
);
166+
.map((row) => (
167+
<TableRow
168+
key={row.announcementId}
169+
sx={{
170+
"& > *": {
171+
borderBottom: "unset",
172+
cursor: "pointer",
173+
backgroundColor: "#efefef",
174+
},
175+
}}
176+
hover
177+
>
178+
<TableCell>
179+
<IconButton
180+
aria-label="edit-announcement"
181+
size="small"
182+
onClick={() => {
183+
setEditAnnouncement(row);
184+
setEditModalOpen(true);
185+
}}
186+
>
187+
<EditIcon />
188+
</IconButton>
189+
</TableCell>
190+
<TableCell align="left" component="th" scope="row">
191+
{row.announcementId}
192+
</TableCell>
193+
<TableCell align="left" component="th" scope="row">
194+
{row.title}
195+
</TableCell>
196+
<TableCell align="left" component="th" scope="row">
197+
{row.description}
198+
</TableCell>
199+
<TableCell>
200+
<FormControlLabel
201+
control={
202+
<Switch
203+
color="success"
204+
checked={row.is_enabled}
205+
onChange={(e) =>
206+
handleIsEnabled(row.announcementId, e.target.checked)
244207
}
245-
}}
246-
>
247-
<DeleteIcon />
248-
</IconButton>
249-
</TableCell>
250-
</TableRow>
251-
</React.Fragment>
208+
/>
209+
}
210+
/>
211+
</TableCell>
212+
<TableCell align="right">
213+
<IconButton
214+
color="error"
215+
aria-label="delete-announcement"
216+
onClick={async (e) => {
217+
e.stopPropagation();
218+
try {
219+
await announcementService.remove(row.announcementId);
220+
announcementRefetch();
221+
} catch (error) {
222+
console.error(
223+
"Failed to remove announcement:",
224+
error
225+
);
226+
}
227+
}}
228+
>
229+
<DeleteIcon />
230+
</IconButton>
231+
</TableCell>
232+
</TableRow>
252233
))}
253234
</TableBody>
254235
</Table>
@@ -311,7 +292,7 @@ const Announcements = () => {
311292
onChange={announcementFormik.handleChange}
312293
/>
313294
}
314-
label="Globally Enable"
295+
label="Enabled"
315296
/>
316297
</Box>
317298
<Box mt={3} display="flex" justifyContent="space-between">
@@ -381,7 +362,7 @@ const Announcements = () => {
381362
onChange={editFormik.handleChange}
382363
/>
383364
}
384-
label="Globally Enable"
365+
label="Enabled"
385366
/>
386367
</Box>
387368
<Box mt={3} display="flex" justifyContent="space-between">
@@ -401,10 +382,11 @@ const Announcements = () => {
401382
</form>
402383
</Box>
403384
</Dialog>
385+
404386
<TablePagination
405387
rowsPerPageOptions={[10, 25, 100]}
406388
component="div"
407-
count={rows.length}
389+
count={(announcementsData || []).length}
408390
rowsPerPage={rowsPerPage}
409391
page={page}
410392
onPageChange={(event, newPage) => setPage(newPage)}
@@ -414,4 +396,4 @@ const Announcements = () => {
414396
);
415397
};
416398

417-
export default Announcements;
399+
export default Announcements;

‎client/src/hooks/useAnnouncements.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,17 @@ export const useAnnouncements = () => {
1010
const fetchApi = async () => {
1111
setLoading(true);
1212
try {
13-
const announcements = await announcementService.getAllAnnouncements();
14-
setData(announcements);
13+
const announcements = await announcementService.getAllAnnouncements();
14+
const processed = announcements
15+
.slice()
16+
.sort((a, b) => a.id - b.id)
17+
.map((announcement) => ({
18+
announcementId: announcement.id,
19+
title: announcement.title,
20+
description: announcement.description,
21+
is_enabled: announcement.is_enabled,
22+
}));
23+
setData(processed);
1524
setLoading(false);
1625
} catch (err) {
1726
setError(err);

0 commit comments

Comments
 (0)