✨ Add cache and stale timers for most react query

src/components/layout/header/Header.tsx

@@ -1,7 +1,6 @@
 import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { CURRENT_VERSION, REPO_URL } from '../../../../data/constants';
-import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import DockerMenuButton from '../../../modules/Docker/DockerModule';
@@ -14,20 +13,14 @@ export const HeaderHeight = 64;
 export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses } = useCardStyles(false);
-
-  const { config } = useConfigContext();
-
-  const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
-  useEffect(() => {
-    // Fetch Data here when component first mounted
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      res.json().then((data) => {
-        if (data.tag_name > CURRENT_VERSION) {
-          setNewVersionAvailable(data.tag_name);
-        }
-      });
-    });
-  }, [CURRENT_VERSION]);
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['github/latest'],
+    cacheTime: 1000 * 60 * 60 * 24,
+    staleTime: 1000 * 60 * 60 * 5,
+    queryFn: () =>
+      fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
+  });
+  const newVersionAvailable = data?.tag_name !== CURRENT_VERSION ? data?.tag_name : undefined;
 
   return (
     <MantineHeader height={HeaderHeight} className={cardClasses.card}>
@@ -39,7 +32,13 @@ export function Header(props: any) {
           <Search />
           <ToggleEditModeAction />
           <DockerMenuButton />
-          <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
+          <Indicator
+            size={15}
+            color="blue"
+            withBorder
+            processing
+            disabled={newVersionAvailable === undefined}
+          >
             <SettingsMenu newVersionAvailable={newVersionAvailable} />
           </Indicator>
         </Group>