Fix Tim Coding at Order Admin DnD

01-frontend/src/helper/adminpanel/OrdersInfo.tsx

@@ -1,27 +1,25 @@
 import {
-    Box,
     Button,
+    Card, CardContent,
     Dialog,
+    DialogActions,
     DialogContent,
     DialogTitle,
-    DialogActions,
-    List, ListItemText,
-    Typography,
-    useTheme,
-    Card, CardContent,
-    Stack,
     Divider,
-    Snackbar
+    List, ListItemText,
+    Snackbar,
+    Stack,
+    Typography,
+    useTheme
 } from "@mui/material";
-import React, { useState, useEffect, PropsWithChildren } from "react";
-import { useTranslation } from "react-i18next";
-import OrderType, { OrderStatusEnum } from "../../components/Order";
-import { useDrag, useDrop, DndProvider } from 'react-dnd';
+import { useMutation, useQuery } from "@tanstack/react-query";
+import React, { PropsWithChildren, useEffect, useState } from "react";
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { useQuery } from "@tanstack/react-query";
-import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
+import { useTranslation } from "react-i18next";
+import OrderType, { OrderPatch, OrderStatusEnum } from "../../components/Order";
 import { useAccount } from "../AccountProvider";
-import { useQueryClient } from "@tanstack/react-query";
+import { fetchOrdersAdmin, orderPatch } from "../query/Queries";
 
 // The order in which the statuses are displayed
 const statusOrder: OrderStatusEnum[] = [
@@ -36,7 +34,6 @@ const statusOrder: OrderStatusEnum[] = [
 const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({ order, onClick }) => {
 
     const { t } = useTranslation();
-    const theme = useTheme();
 
     const [{ isDragging }, drag] = useDrag(() => ({
         type: 'order',
@@ -90,11 +87,10 @@ const Column: React.FC<PropsWithChildren<{ status: OrderStatusEnum; onDrop: (id:
     );
 };
 
-const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void}> = ({ open, order, onClose }) => {
+const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: () => void }> = ({ open, order, onClose }) => {
 
     const { t } = useTranslation();
-    const theme = useTheme();
-    if(order === null)
+    if (order === null)
         return "";
     return (
         <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
@@ -116,7 +112,7 @@ const EditOrder: React.FC<{ open: boolean; order: OrderType | null; onClose: ()
                             ))}
                         </List>
                         <Divider />
-                    <Typography variant="h6">{`${t('sum')}: ${(order.total/100).toFixed(2)} €`}</Typography>
+                        <Typography variant="h6">{`${t('sum')}: ${(order.total / 100).toFixed(2)} €`}</Typography>
                     </Stack>
                 )}
             </DialogContent>
@@ -133,16 +129,21 @@ export default function OrdersInfo() {
     const [editOrder, setEditOrder] = useState<OrderType | null>(null);
     const [openSnackbar, setOpenSnackbar] = useState(false);
 
-    const {user: loginData} = useAccount();
-    const queryClient = useQueryClient()
+    const { user: loginData } = useAccount();
 
     const { data, refetch } = useQuery({
         queryKey: ["fetchOrdersAdmin", loginData],
-        queryFn: () => fetchOrdersAdmin(loginData? loginData : {email: "", password: "", session: "", customerId: -1, isAdmin: false}),
+        queryFn: () => fetchOrdersAdmin(loginData ? loginData : { email: "", password: "", session: "", customerId: -1, isAdmin: false }),
         retry: 3,
         retryDelay: 1000,
     });
 
+    const patchOrderMutation = useMutation({
+        mutationFn: (order: OrderPatch) =>
+            orderPatch({ id: order.id, status: order.status }),
+    });
+
+
     useEffect(() => {
         console.log("data", data);
         if (data) {
@@ -150,30 +151,21 @@ export default function OrdersInfo() {
         }
     }, [data]);
 
-
     const handleDrop = async (id: number, status: OrderStatusEnum) => {
-        if(orders.length < 1) {
-            const resp = await refetch();
-            setOrders(resp.data); // i dont know
-        }
-        const obj = orders.find((o) => {
-            return o.id === id
-        })
-        if(!obj) {
+        const obj = orders.find((o) => o.id === id);
+        if (!obj) {
             setOpenSnackbar(true);
             return;
         }
-        obj.status = status
-        const resp = await queryClient.fetchQuery({
-            queryKey: ["orderPatch", {id: obj.id, status: obj.status}],
-            queryFn: () => orderPatch({id: obj.id, status: obj.status}),
-            retry: 0,
-            retryDelay: 1000,
-        })
+        try {
+            await patchOrderMutation.mutateAsync({ id: obj.id, status: obj.status });
             refetch();
-        setOrders(orders.map((o) => (o.id === id ? obj : o )));
+            setOrders(orders.map((o) => (o.id === id ? { ...o, status } : o)));
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error) {
+            setOpenSnackbar(true);
+        }
     };
-
     const handleEdit = (order: OrderType) => setEditOrder(order);
 
     return (