Merge pull request #37 from openfoodfacts/usestates-remove-ticket

fix: useState remove button
openfoodfacts · May 13, 2024 · 2c411bf · 2c411bf
2 parents 1d97a00 + 98cc360
commit 2c411bf
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 18 deletions.
diff --git a/src/components/ImageTicket.tsx b/src/components/ImageTicket.tsx
@@ -5,7 +5,7 @@ import TicketsButtons from './TicketsButtons'
 import Box from '@mui/material/Box';
 import { useMediaQuery } from '@mui/material';
 
-export default function ImageTicket({ticket}: {ticket: any}) {
+export default function ImageTicket({ticket, setTickets, tickets}: {ticket: any, setTickets: any, tickets: any}) {
 
     const isMobile = useMediaQuery('(max-width:700px)');
     // format url to get mini image
@@ -34,7 +34,9 @@ export default function ImageTicket({ticket}: {ticket: any}) {
                 </Box>
             </TableCell>
             <Date created_at={ticket.created_at} />
-            <TableCell align="center"><TicketsButtons barcode={ticket.barcode} id={ticket.id} /></TableCell>
+            <TableCell align="center">
+                <TicketsButtons barcode={ticket.barcode} id={ticket.id} setTickets={setTickets} tickets={tickets} />
+            </TableCell>
         </TableRow>
     )
 }
diff --git a/src/components/Ticket.tsx b/src/components/Ticket.tsx
@@ -4,7 +4,13 @@ import Date from './Date'
 import TicketsButtons from './TicketsButtons'
 import { useMediaQuery } from '@mui/material';
 
-export default function Ticket({ticket}: any) {
+interface TicketProps {
+    ticket: any;
+    setTickets: any;
+    tickets: any;
+}
+
+export default function Ticket({ticket, setTickets, tickets}: TicketProps) {
 
     const isMobile = useMediaQuery('(max-width:700px)');
 
@@ -25,7 +31,7 @@ export default function Ticket({ticket}: any) {
             <TableCell align="center">{ticket.flavor}</TableCell>
             <TableCell align="center">{ticket.reasons}</TableCell>
             <Date created_at={ticket.created_at} />
-            <TableCell align="center"><TicketsButtons barcode={ticket.barcode} id={ticket.id} /></TableCell>
+            <TableCell align="center"><TicketsButtons barcode={ticket.barcode} id={ticket.id} setTickets={setTickets} tickets={tickets} /></TableCell>
         </TableRow>
     )
 }
diff --git a/src/components/TicketsButtons.tsx b/src/components/TicketsButtons.tsx
@@ -6,19 +6,28 @@ import EditIcon from '@mui/icons-material/Edit';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
 import CheckIcon from '@mui/icons-material/Check';
 
-// Change status of ticket to archived
-function handleStatus(id: number, status: string) {
-    try {
-        axios.put(`${import.meta.env.VITE_API_URL}/tickets/${id}/status?status=${status}`)
-        window.location.reload();
-    } catch (error) {
-        console.error(error);
-    }
+interface BasicButtonGroup {
+    id: number;
+    barcode: string;
+    setTickets: any;
+    tickets: any;
 }
 
-export default function BasicButtonGroup(props: { id: number, barcode: string }) {
+export default function BasicButtonGroup({id, barcode, setTickets, tickets}: BasicButtonGroup) {
+
+    // Change status of ticket to archived
+    function handleStatus(id: number, status: string) {
+        try {
+            axios.put(`${import.meta.env.VITE_API_URL}/tickets/${id}/status?status=${status}`)
+            // remove ticket from tickets
+            const updatedTickets = tickets.filter((ticket: any) => ticket.id !== id);
+            setTickets(updatedTickets);
+        } catch (error) {
+            console.error(error);
+        }
+    }
 
-    const linkUrl = `${import.meta.env.VITE_PO_URL}/cgi/product.pl?type=edit&code=${props.barcode}`;
+    const linkUrl = `${import.meta.env.VITE_PO_URL}/cgi/product.pl?type=edit&code=${barcode}`;
 
     return (
         <ButtonGroup variant="contained" aria-label="ticket_actions">
@@ -37,7 +46,7 @@ export default function BasicButtonGroup(props: { id: number, barcode: string })
                 color="error"
                 endIcon={<NotInterestedIcon />}
                 sx={{ maxHeight: '40px' }}
-                onClick={() => handleStatus(props.id, 'closed')}
+                onClick={() => handleStatus(id, 'closed')}
             >
                 No problem
             </Button>
@@ -46,7 +55,7 @@ export default function BasicButtonGroup(props: { id: number, barcode: string })
                 color="success"
                 endIcon={<CheckIcon />}
                 sx={{ maxHeight: '40px' }}
-                onClick={() => handleStatus(props.id, 'closed')}
+                onClick={() => handleStatus(id, 'closed')}
             >
                 I fixed it!
             </Button>

diff --git a/src/pages/ImageModerationPage.tsx b/src/pages/ImageModerationPage.tsx
@@ -74,7 +74,7 @@ export default function ImageModerationPage() {
                                         }
                                         <TableBody>
                                             {Tickets.map((ticket, index) => (
-                                                <ImageTicket key={index} ticket={ticket} />
+                                                <ImageTicket key={index} ticket={ticket} setTickets={setTickets} tickets={Tickets} />
                                             ))}
                                         </TableBody>
                                     </Table>

diff --git a/src/pages/ModerationPage.tsx b/src/pages/ModerationPage.tsx
@@ -102,7 +102,7 @@ export default function ImageModerationPage() {
                                         }
                                         <TableBody>
                                         {Tickets.map((ticket, index) => (
-                                            <Ticket key={index} ticket={ticket} />
+                                            <Ticket key={index} ticket={ticket} setTickets={setTickets} tickets={Tickets} />
                                         ))}
                                         </TableBody>
                                     </Table>