2/1000 commit. First version of useQuery Orders and Account page.

01-frontend/src/helper/query/Queries.tsx

@@ -133,4 +133,24 @@ export const fetchCustomer = async (userId: number) => {
     }
     const data = await response.json();
     return data;
+};
+
+export const deleteAccount = async (userId: number) => {
+    const response = await fetch('http://localhost:8085/account?id=' + userId, {
+        method: 'DELETE',
+    });
+    if (!response.ok) {
+        throw new Error('Fehler beim Löschen des Accounts');
+    }
+    return await response.json();
+};
+
+export const fetchOrders = async (customerId: number) => {
+    const response = await fetch('http://localhost:8085/order/all?sutomerId=' + customerId);
+    console.log("API Response:", response);
+    if (!response.ok) {
+        throw new Error('Fehler beim Laden des Customers');
+    }
+    const data = await response.json();
+    return data;
 };

01-frontend/src/pages/Account.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { CustomerType } from "../components/Account";
 import { useAccount } from "../helper/AccountProvider";
-import { fetchCustomer } from "../helper/query/Queries";
+import { deleteAccount, fetchCustomer } from "../helper/query/Queries";
 import "./pages.css";
 
 export default function Account() {
@@ -45,6 +45,12 @@ export default function Account() {
         retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
     });
 
+    const { refetch: deleteRefetch } = useQuery({ 
+        queryKey: ['deleteAccount', userData?.customerId],
+        queryFn: () => deleteAccount(userData?.customerId || 0), // Funktion zum Löschen des Accounts
+        enabled: false, // Diese Abfrage wird nicht automatisch ausgeführt
+    });
+
     useEffect(() => {
         if (data) {
             setUser(data); // Aktualisiere den user-State mit den abgerufenen Daten
@@ -65,6 +71,7 @@ export default function Account() {
         setEdit(false);
     };
     const handleDelete = () => {
+        deleteRefetch();
         navigate("/");
         logout(); // Logout nach dem Löschen
     };

01-frontend/src/pages/Orders.tsx

@@ -1,42 +1,36 @@
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
-import { useState } from "react";
-import "./pages.css";
-import {useTranslation} from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import OrderType from "../components/Order";
-
-const mockOrders: OrderType[] = [
-    {
-        id: "1001",
-        date: "2025-05-20",
-        status: "IN_PROGRESS",
-        items: [
-            { name: "Tomatensamen", quantity: 2, price: 3.99 },
-            { name: "Blumenerde", quantity: 1, price: 7.49 }
-        ],
-        total: 15.47,
-        address: "Musterstraße 1, 12345 Musterstadt"
-    },
-    {
-        id: "1000",
-        date: "2025-05-10",
-        status: "ISSUES",
-        items: [
-            { name: "Gießkanne", quantity: 1, price: 12.99 }
-        ],
-        total: 12.99,
-        address: "Musterstraße 1, 12345 Musterstadt"
-    }
-];
+import "./pages.css";
+import { useAccount } from "../helper/AccountProvider";
+import { fetchOrders } from "../helper/query/Queries";
 
 export default function Orders() {
 
+    const {user} = useAccount();
+    const [orders, setOrders] = useState<OrderType[]>([])
+
+    const { data: accountOrders } = useQuery<OrderType[]>({
+        queryKey: ['fetchOrders', user?.customerId], // Hier sollte die tatsächliche Kunden-ID verwendet werden
+        queryFn: () => user ? fetchOrders(user.customerId) : Promise.resolve([]), // Simulierte API-Antwort
+        enabled: !!user, // Nur ausführen, wenn user existiert
+        retry: 3, // Versucht es 3-mal erneut
+        retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
+    });
+
+    useEffect(() => {
+        setOrders(accountOrders ?? []);
+    }, [accountOrders]);
+
     const { t } = useTranslation();
 
     const [tab, setTab] = useState(0);
     const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
 
-    const activeOrders = mockOrders.filter(o => o.status === "IN_PROGRESS");
-    const inactiveOrders = mockOrders.filter(o => o.status === "ISSUES");
+    const activeOrders = orders.filter(o => o.status === "ISSUES" || o.status === "IN_PROGRESS" || o.status === "ORDERED");
+    const inactiveOrders = orders.filter(o => o.status === "CANCELLED" || o.status === "DELIVERED");
 
     const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);