Merge pull request #148 from fsi-tue/feat/better-order-management

Feat/better order management

Author: am9zZWY

bun.lock

@@ -24,7 +24,7 @@ export default class CacheHandler {
 		tags = [tags].flat()
 		// Iterate over all entries in the cache
 		for (let [key, value] of cache) {
-			// If the value's tags include the specified tag, delete this entry
+			// If the value's tags include the specified tag, reset this entry
 			if (value.tags.some((tag) => tags.includes(tag))) {
 				cache.delete(key)
 			}

cache-handler.mjs

@@ -26,6 +26,7 @@
   "dependencies": {
     "@date-fns/utc": "^2.1.0",
     "@tailwindcss/postcss": "^4.1.8",
+    "@tanstack/react-query": "^5.80.7",
     "@types/js-yaml": "^4.0.9",
     "@yudiel/react-qr-scanner": "^2.3.1",
     "accept-language": "^3.0.20",

package.json

@@ -1,80 +1,39 @@
 'use client'
 
 import { Construction } from "lucide-react";
-import { ComponentType, useCallback, useEffect, useMemo, useState } from "react";
+import React, { ComponentType } from "react";
 import { Loading } from "@/app/components/Loading";
 import { useTranslations } from 'next-intl';
-import { SystemStatus } from "@/model/system";
+import ErrorMessage from "./components/ErrorMessage";
+import { useSystem } from "@/lib/fetch/system";
 
-let globalSystemStatus: SystemStatus | null = null;
-let lastFetchTime = 0;
-const CACHE_DURATION = 30000; // 30 seconds
-
-type ExtendedSystemStatus = SystemStatus | 'checking';
 const WithSystemCheck = <P extends object>(
     WrappedComponent: ComponentType<P>
 ): ComponentType<P> => {
 
     return function WithSystemCheckComponent(props: P) {
         const t = useTranslations();
-        const [systemStatus, setSystemStatus] = useState<ExtendedSystemStatus>(() => {
-            const now = Date.now();
-            if (globalSystemStatus && (now - lastFetchTime) < CACHE_DURATION) {
-                return globalSystemStatus;
-            }
-            return 'checking';
-        });
-        const [loading, setLoading] = useState<boolean>(() => {
-            const now = Date.now();
-            return !(globalSystemStatus && (now - lastFetchTime) < CACHE_DURATION);
-        });
-
-        const checkSystemStatus = useCallback(async (): Promise<void> => {
-            const now = Date.now();
-            if (globalSystemStatus && (now - lastFetchTime) < CACHE_DURATION) {
-                setSystemStatus(globalSystemStatus);
-                setLoading(false);
-                return;
-            }
 
-            setLoading(true);
 
-            try {
-                const response = await fetch('/api/manage/system/status', {
-                    method: 'GET',
-                    credentials: 'include',
-                    // Add cache control for browser caching
-                    cache: 'no-store'
-                });
+        const { data, error, isFetching } = useSystem()
 
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-
-                const data: { status: SystemStatus } = await response.json();
+        if (isFetching) {
+            return <Loading message={t('withsystemcheck.check_system_status')}/>
+        }
 
-                // Update global cache
-                globalSystemStatus = data.status;
-                lastFetchTime = Date.now();
+        if (error) {
+            return <ErrorMessage error={error.message}/>;
+        }
 
-                setSystemStatus(data.status);
-            } catch (error) {
-                console.error('Error fetching system status:', error);
-                // Keep previous status if available, otherwise set to inactive
-                if (!globalSystemStatus) {
-                    setSystemStatus('inactive');
-                }
-            } finally {
-                setLoading(false);
-            }
-        }, []);
+        if (!data) {
+            return null;
+        }
 
-        useEffect(() => {
-            checkSystemStatus();
-        }, [checkSystemStatus]);
+        if (data.status.active) {
+            return <WrappedComponent {...props} />;
+        }
 
-        // Memoize the inactive system UI to prevent unnecessary re-renders
-        const inactiveSystemUI = useMemo(() => (
+        return (
             <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
                 <div className="flex items-center gap-3 mb-2">
                     <div className="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
@@ -84,26 +43,11 @@ const WithSystemCheck = <P extends object>(
                         {t('withsystemcheck.system_inactive')}
                     </h1>
                 </div>
-                <p className="text-gray-500 text-sm">
-                    {t('withsystemcheck.system_unavailable_message')}
+                <p className="text-gray-500 text-md">
+                    {data.status.message ?? t('withsystemcheck.system_unavailable_message')}
                 </p>
             </div>
-        ), [t]);
-
-        // Memoize loading component
-        const loadingUI = useMemo(() => (
-            <Loading message={t('withsystemcheck.check_system_status')}/>
-        ), [t]);
-
-        if (loading) {
-            return loadingUI;
-        }
-
-        if (systemStatus === 'active') {
-            return <WrappedComponent {...props} />;
-        }
-
-        return inactiveSystemUI;
+        )
     };
 };