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,8 +34,7 @@ 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',
         item: { id: order.id },
@@ -54,10 +51,10 @@ const OrderCard: React.FC<{ order: OrderType; onClick: () => void }> = ({ order,
                         Order:   {order.id}
                     </Typography>
                     <Typography>
-                    {t('date') + ": " + new Date(order.time).toUTCString()}
+                        {t('date') + ": " + new Date(order.time).toUTCString()}
                     </Typography>
                     <Typography>
-                    {t('total') + ": " + order.total}
+                        {t('total') + ": " + order.total}
                     </Typography>
                 </CardContent>
             </Card>
@@ -90,39 +87,38 @@ 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>
-        <DialogTitle>
-            {`${t(order.status)} #${order?.id}`}
-        </DialogTitle>
-        <DialogContent dividers>
-            {order && (
-                <Stack spacing={2}>
-                    <Typography variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography>
-                    <Divider />
-                    <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
-                    <List dense>
-                        {order.orderItems.map((item, idx) => (
-                            <ListItemText
-                                key={idx}
-                                primary={`${item.article} x${item.amount}`}
-                            />
-                        ))}
-                    </List>
-                    <Divider />
-                    <Typography variant="h6">{`${t('sum')}: ${(order.total/100).toFixed(2)} €`}</Typography>
-                </Stack>
-            )}
-        </DialogContent>
-        <DialogActions>
-            <Button onClick={onClose}>{t('close')}</Button>
-        </DialogActions>
+            <DialogTitle>
+                {`${t(order.status)} #${order?.id}`}
+            </DialogTitle>
+            <DialogContent dividers>
+                {order && (
+                    <Stack spacing={2}>
+                        <Typography variant="subtitle1">{`${t('orderDate')}: ${new Date(order.time).toDateString()}`}</Typography>
+                        <Divider />
+                        <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
+                        <List dense>
+                            {order.orderItems.map((item, idx) => (
+                                <ListItemText
+                                    key={idx}
+                                    primary={`${item.article} x${item.amount}`}
+                                />
+                            ))}
+                        </List>
+                        <Divider />
+                        <Typography variant="h6">{`${t('sum')}: ${(order.total / 100).toFixed(2)} €`}</Typography>
+                    </Stack>
+                )}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>{t('close')}</Button>
+            </DialogActions>
         </Dialog>
     );
 };
@@ -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,
-        })
-        refetch();
-        setOrders(orders.map((o) => (o.id === id ? obj : o )));
+        try {
+            await patchOrderMutation.mutateAsync({ id: obj.id, status: obj.status });
+            refetch();
+            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 (