diff --git a/01-frontend/src/helper/adminpanel/OrdersInfo.tsx b/01-frontend/src/helper/adminpanel/OrdersInfo.tsx
index bf95f06..e03cae8 100644
--- a/01-frontend/src/helper/adminpanel/OrdersInfo.tsx
+++ b/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}
- {t('date') + ": " + new Date(order.time).toUTCString()}
+ {t('date') + ": " + new Date(order.time).toUTCString()}
- {t('total') + ": " + order.total}
+ {t('total') + ": " + order.total}
@@ -90,39 +87,38 @@ const Column: React.FC 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 (
);
};
@@ -133,16 +129,21 @@ export default function OrdersInfo() {
const [editOrder, setEditOrder] = useState(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 (