feat: ability to turn of auto refresh

src/components/AppBar.tsx

@@ -17,6 +17,7 @@ import KeyboardShortcut from "@/components/general/KeyboardShortcut";
 import SettingsMenu from "@/components/general/SettingsMenu";
 import { useDrawer } from "@/context/DrawerContext";
 import { useAuthStore } from "@/store/auth";
+import Tooltip from "@mui/material/Tooltip";
 import { useSearchParams } from "react-router-dom";
 import { SideDrawer } from "./main";
 import RefreshButton from "./refresh";
@@ -81,9 +82,13 @@ function AppBar() {
                   <div className="space-x-2">
                     {user?.uid ? (
                       <>
-                        <IconButton onClick={() => setShouldShowToolbar(false)}>
-                          <SearchIcon htmlColor="#fff" />
-                        </IconButton>
+                        <Tooltip title="Search">
+                          <IconButton
+                            onClick={() => setShouldShowToolbar(false)}
+                          >
+                            <SearchIcon htmlColor="#fff" />
+                          </IconButton>
+                        </Tooltip>
                         <RefreshButton />
                       </>
                     ) : null}
@@ -110,18 +115,19 @@ function AppBar() {
                   gap="1rem"
                 >
                   <Searchbar />
-                  <IconButton
-                    onClick={() => {
-                      if (searchParams.get("q")) {
-                        searchParams.delete("q");
-                        setSearchParams(searchParams);
-                      }
-
-                      setShouldShowSearchbar(false);
-                    }}
-                  >
-                    <ClearIcon htmlColor="#fff" />
-                  </IconButton>
+                  <Tooltip title="Close">
+                    <IconButton
+                      onClick={() => {
+                        if (searchParams.get("q")) {
+                          searchParams.delete("q");
+                          setSearchParams(searchParams);
+                        }
+                        setShouldShowSearchbar(false);
+                      }}
+                    >
+                      <ClearIcon htmlColor="#fff" />
+                    </IconButton>
+                  </Tooltip>
                 </Box>
               </Slide>
             </Toolbar>

src/components/general/AutoRefreshMenuItem.tsx

@@ -0,0 +1,24 @@
+import DoneIcon from "@mui/icons-material/Done";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import MenuItem from "@mui/material/MenuItem";
+import { ComponentProps } from "react";
+import { useLocalStorage } from "usehooks-ts";
+
+export function AutoRefreshMenuItem(props: ComponentProps<typeof MenuItem>) {
+  const [isAutoRefresh, setIsAutoRefresh] = useLocalStorage(
+    "auto-refresh",
+    true,
+  );
+
+  return (
+    <MenuItem
+      {...props}
+      onClick={() => {
+        setIsAutoRefresh((old) => !old);
+      }}
+    >
+      <ListItemIcon>{isAutoRefresh ? <DoneIcon /> : null}</ListItemIcon>
+      Auto refresh
+    </MenuItem>
+  );
+}

src/components/general/SettingsMenu.tsx

@@ -22,6 +22,7 @@ import { Capacitor } from "@capacitor/core";
 import { GoogleAuth } from "@codetrix-studio/capacitor-google-auth";
 import { signOut } from "firebase/auth";
 import toast from "react-hot-toast";
+import { AutoRefreshMenuItem } from "./AutoRefreshMenuItem";
 
 const logout = async () => {
   if (Capacitor.isNativePlatform()) {
@@ -146,6 +147,12 @@ export default function SettingsMenu() {
         <Divider />
         <ThemeMenuItem handleItemClick={handleItemClick} />
         <Divider />
+        <AutoRefreshMenuItem
+          sx={{
+            marginTop: "0.5rem",
+          }}
+        />
+        <Divider />
         <MenuItem
           onClick={() => handleItemClick(openModal)}
           sx={{

src/components/refresh.tsx

@@ -1,11 +1,12 @@
 import { cn } from "@/lib/utils";
+import RefreshIcon from "@mui/icons-material/Refresh";
 import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
 import {
   useIsFetching,
   useIsMutating,
   useQueryClient,
 } from "@tanstack/react-query";
-import { RefreshCw } from "lucide-react";
 import toast from "react-hot-toast";
 
 function RefreshButton() {
@@ -20,14 +21,16 @@ function RefreshButton() {
   }
 
   return (
-    <IconButton aria-label="refresh" onClick={refresh}>
-      <RefreshCw
-        className={cn(
-          "h-5 w-5 text-white",
-          isFetching > 0 || isMutating > 0 ? "animate-spin" : "",
-        )}
-      />
-    </IconButton>
+    <Tooltip title="Refresh">
+      <IconButton aria-label="refresh" onClick={refresh}>
+        <RefreshIcon
+          className={cn(
+            "h-5 w-5 text-white",
+            isFetching > 0 || isMutating > 0 ? "animate-spin" : "",
+          )}
+        />
+      </IconButton>
+    </Tooltip>
   );
 }
 

src/utils/query-client.ts

@@ -4,6 +4,10 @@ import { AxiosError } from "axios";
 import { signOut } from "firebase/auth";
 import toast from "react-hot-toast";
 
+const isAutoRefresh = JSON.parse(
+  window.localStorage.getItem("auto-refresh") ?? "true",
+);
+
 // Create a client
 export const queryClient = new QueryClient({
   queryCache: new QueryCache({
@@ -36,10 +40,10 @@ export const queryClient = new QueryClient({
       } else toast.error(`Something went wrong: ${error.message}`);
     },
   }),
-  // defaultOptions: {
-  //   queries: {
-  //     // gc time 5 minutes
-  //     staleTime: 5 * 60 * 1000,
-  //   },
-  // },
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchInterval: isAutoRefresh ? 1000 * 30 : undefined,
+    },
+  },
 });