fix: retry status query

Pwnzer0tt1 · Jun 19, 2024 · 91b5122 · 91b5122
1 parent 49b0411
commit 91b5122
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import { AppShell, Box, Container, Divider, Image, LoadingOverlay, MantineProvid
 import { LoginProvider } from '@/components/LoginProvider';
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { LogoutButton, OptionButton } from '@/components/Buttons';
-import { useGlobalStore, useTokenStore } from './utils/stores';
+import { useConnectFailTimeStore, useGlobalStore, useTokenStore } from './utils/stores';
 import { statusQuery } from './utils/queries';
 import { HomePage } from './components/HomePage';
 
@@ -17,11 +17,12 @@ export default function App() {
   const setToken = useTokenStore((store) => store.setToken)
   const header = useGlobalStore((store) => store.header)
   const status = statusQuery()
+  const isStatusError = useConnectFailTimeStore((state) => state.failed)
 
   return (
     <MantineProvider defaultColorScheme='dark'>
       <Notifications />
-      <LoadingOverlay visible={loadingStatus || status.isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+      <LoadingOverlay visible={loadingStatus || (!isStatusError && status.isLoading) } zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
       <LoginProvider>
         <AppShell
           header={{ height: 60 }}

diff --git a/frontend/src/components/LoginProvider.tsx b/frontend/src/components/LoginProvider.tsx
@@ -1,6 +1,6 @@
 import { postFormRequest } from "@/utils/net";
 import { statusQuery } from "@/utils/queries";
-import { useGlobalStore, useTokenStore } from "@/utils/stores";
+import { useConnectFailTimeStore, useGlobalStore, useTokenStore } from "@/utils/stores";
 import { Box, Button, Container, Group, PasswordInput, Space } from "@mantine/core"
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications'
@@ -14,6 +14,7 @@ export const LoginProvider = ({ children }: { children:any }) => {
     const [token, setToken] = useTokenStore((store) => [store.loginToken, store.setToken])
     const [loadingStatus, setLoading] = useGlobalStore((store) => [store.loading, store.setLoader])
     const status = statusQuery()
+    const [isStatusErrors, resetStatusError] = useConnectFailTimeStore((state) => [state.failed, state.reset])
     const queryClient = useQueryClient()
 
     const form = useForm({
@@ -35,8 +36,7 @@ export const LoginProvider = ({ children }: { children:any }) => {
             queryClient.invalidateQueries({ queryKey: [] })
         }
     },[status.isError])
-
-    if (status.isError){
+    if (isStatusErrors){
         return <Box className="center-flex-col" style={{
             width: "100%",
             height: "100%",
@@ -45,7 +45,12 @@ export const LoginProvider = ({ children }: { children:any }) => {
                 <WelcomeTitle description="An error occured while fetching status!" />
                 Check if the backend is running and reachable.
                 <Space h="xl" />
-                <Button onClick={() => status.refetch()} size="xl" color="orange">Retry</Button>
+                <Button onClick={() => {
+                    resetStatusError()
+                    queryClient.invalidateQueries({ queryKey: [] })
+                    queryClient.resetQueries({ queryKey: [] })
+                    status.refetch()
+                }} size="xl" color="orange">Retry</Button>
             </Container>
         </Box>
     }

diff --git a/frontend/src/utils/queries.tsx b/frontend/src/utils/queries.tsx
@@ -6,16 +6,20 @@ import { useMemo } from "react";
 import { Stats } from "./types";
 
 export const statusQuery = () => {
-    const failTimes = 3
-    const [failures, setFailures] = useConnectFailTimeStore((state) => [state.connectionFails, state.setConnectionFails])
     return useQuery({
         queryKey: ["status"],
-        queryFn: async () => await getRequest("/status") as paths["/api/status"]["get"]["responses"][200]["content"]["application/json"],
-        refetchInterval: (failures < failTimes)?1000:undefined,
-        retry(failureCount, _error) {
-            setFailures(failureCount)
-            return (failureCount < failTimes)
+        queryFn: async () => {
+            if(useConnectFailTimeStore.getState().failed) throw false
+            return await getRequest("/status") as paths["/api/status"]["get"]["responses"][200]["content"]["application/json"]
         },
+        refetchInterval: 1000,
+        retry(_fail, _error) {
+            const failStats = useConnectFailTimeStore.getState()
+            if (!failStats.failed)
+                failStats.setConnectionFails(failStats.connectionFails + 1)
+            return true
+        },
+        retryDelay: (_attempt) => 1000
     })
 }
 

diff --git a/frontend/src/utils/stores.ts b/frontend/src/utils/stores.ts
@@ -69,10 +69,16 @@ export const useSettingsStore = create<settingsStore>()(
 
 export const useConnectFailTimeStore = create<{
     connectionFails: number,
+    maxFails: number,
+    failed: boolean,
     setConnectionFails: (cf:number) => void
+    reset: () => void
 }>()(
-    (set) => ({
+    (set, get) => ({
         connectionFails: 0,
-        setConnectionFails: (cf:number) => set(() => ({ connectionFails:cf })),
+        maxFails: 3,
+        failed: false,
+        setConnectionFails: (cf:number) => set(() => ({ connectionFails:cf, failed:cf >= get().maxFails})),
+        reset: () => set(() => ({ connectionFails:0, failed:false })),
     })
 )