more optimization

nyakaspeter · Sep 4, 2022 · 6982e55 · 6982e55
1 parent f9b7e90
commit 6982e55
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 77 deletions.
diff --git a/src/components/AppNavbar.tsx b/src/components/AppNavbar.tsx
@@ -1,5 +1,4 @@
 import {
-  Center,
   createStyles,
   Navbar,
   Stack,
@@ -10,12 +9,10 @@ import {
   IconCategory,
   IconDeviceGamepad2,
   IconHome,
-  IconRefresh,
   IconSettings,
   TablerIcon,
 } from "@tabler/icons";
 import { Link } from "@tanstack/react-location";
-import { MouseEventHandler } from "react";
 import { useScanPaths } from "../hooks/useScanPaths";
 
 const useStyles = createStyles((theme) => ({
@@ -74,47 +71,6 @@ const NavbarLink = ({ icon: Icon, label, to }: NavbarLinkProps) => {
   );
 };
 
-interface NavbarButtonProps {
-  icon: TablerIcon;
-  label: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  rotate?: boolean;
-}
-
-const NavbarButton = ({
-  icon: Icon,
-  label,
-  onClick,
-  rotate,
-}: NavbarButtonProps) => {
-  const { classes } = useStyles();
-  return (
-    <Tooltip label={label} position="right">
-      <UnstyledButton className={classes.link} onClick={onClick}>
-        <Center
-          sx={
-            rotate
-              ? {
-                  animation: "rotation 1.5s infinite linear;",
-                  "@keyframes rotation": {
-                    from: {
-                      transform: "rotate(0deg);",
-                    },
-                    to: {
-                      transform: "rotate(359deg);",
-                    },
-                  },
-                }
-              : undefined
-          }
-        >
-          <Icon stroke={1.5} />
-        </Center>
-      </UnstyledButton>
-    </Tooltip>
-  );
-};
-
 export const AppNavbar = () => {
   const { mutate: scanPaths, isLoading: isScanning } = useScanPaths();
   const handleScanPaths = () => scanPaths();
@@ -140,12 +96,6 @@ export const AppNavbar = () => {
       </Navbar.Section>
       <Navbar.Section>
         <Stack justify="center" spacing={4}>
-          <NavbarButton
-            icon={IconRefresh}
-            label="Rescan paths"
-            rotate={isScanning}
-            onClick={handleScanPaths}
-          />
           <NavbarLink icon={IconSettings} label="Settings" to="/settings" />
         </Stack>
       </Navbar.Section>

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -14,6 +14,7 @@ import {
 import { useForm } from "@mantine/form";
 import {
   IconDeviceFloppy,
+  IconFileSearch,
   IconPlus,
   IconRefresh,
   IconTrash,
@@ -30,19 +31,13 @@ const SettingsPage = () => {
   const theme = useMantineTheme();
   const { mutate: scanPaths, isLoading: isScanning } = useScanPaths();
   const { mutate: refreshGames, isLoading: isRefreshing } = useRefreshGames();
-  const { mutate: removeUnusedData } = useRemoveUnusedData();
-  const { mutateAsync: refreshAuthHeaders } = useRefreshAuthHeaders();
+  const { mutate: cleanDatabase, isLoading: isCleaning } =
+    useRemoveUnusedData();
+  const { mutate: refreshAuthHeaders } = useRefreshAuthHeaders();
 
   const { mutate: save } = useEditSettings({
     onSuccess: () => {
-      setTimeout(async () => {
-        try {
-          await refreshAuthHeaders();
-          scanPaths();
-        } catch (error) {
-          console.error(error);
-        }
-      }, 1000);
+      refreshAuthHeaders();
     },
   });
 
@@ -63,11 +58,10 @@ const SettingsPage = () => {
   const handleRemoveCollection = (index: number) =>
     form.removeListItem("collections", index);
 
-  const handleSave = form.onSubmit((values) => save(values));
-
+  const handleRemoveUnusedData = () => cleanDatabase();
   const handleRefreshGames = () => refreshGames();
-
-  const handleRemoveUnusedData = () => removeUnusedData();
+  const handleScanPaths = () => scanPaths();
+  const handleSave = form.onSubmit((values) => save(values));
 
   return (
     <form onSubmit={handleSave}>
@@ -184,19 +178,28 @@ const SettingsPage = () => {
           <Group>
             <Button
               leftIcon={<IconTrash size={18} />}
+              loading={isCleaning}
               onClick={handleRemoveUnusedData}
             >
               Clean database
             </Button>
 
             <Button
               leftIcon={<IconRefresh size={18} />}
-              loading={isRefreshing || isScanning}
+              loading={isRefreshing}
               onClick={handleRefreshGames}
             >
               Refresh games
             </Button>
 
+            <Button
+              leftIcon={<IconFileSearch size={18} />}
+              loading={isScanning}
+              onClick={handleScanPaths}
+            >
+              Scan paths
+            </Button>
+
             <Button leftIcon={<IconDeviceFloppy size={18} />} type="submit">
               Save settings
             </Button>

diff --git a/src/utils/scan.ts b/src/utils/scan.ts
@@ -169,20 +169,13 @@ export const refreshGames = async () => {
 };
 
 export const removeUnusedData = async () => {
-  // let removedPaths = store.paths.filter((path) => !path.exists).length;
+  const pathGameIds = store.paths.flatMap((path) => path.gameIds);
 
-  // store.paths = store.paths.filter((path) => path.exists);
+  const oldGameCount = store.games.length;
+  store.games = store.games.filter((game) => pathGameIds.includes(game.id));
+  const newGameCount = store.games.length;
 
-  let removedGames = store.games.filter(
-    (game) => !store.paths.find((path) => path.gameIds.includes(game.id))
-  ).length;
-
-  store.games = store.games.filter((game) =>
-    store.paths.find((path) => path.gameIds.includes(game.id))
-  );
-
-  // await savePaths(store.paths);
   await saveGames(store.games);
 
-  return { removedGames };
+  return { removedGames: oldGameCount - newGameCount };
 };