add persistance and debouncing

franciscoBSalgueiro · Oct 20, 2023 · ae6772f · ae6772f
1 parent 4e4ac0d
commit ae6772f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
@@ -12,6 +12,7 @@ import EngineSettings from "@/components/panels/analysis/EngineSettings";
 import { AsyncStringStorage } from "jotai/vanilla/utils/atomWithStorage";
 import { BaseDirectory, readTextFile, removeFile, writeTextFile } from "@tauri-apps/api/fs";
 import { Engine } from "@/utils/engines";
+import { LichessGamesOptions } from "@/utils/lichess/lichessexplorer";
 
 
 const options = { dir: BaseDirectory.AppData };
@@ -158,14 +159,20 @@ function tabValue<T extends object | string | boolean>(
     );
 }
 
-// Board Options
+// Per tab settings
 
 const invisibleFamily = atomFamily((tab: string) => atom(false));
 export const currentInvisibleAtom = tabValue(invisibleFamily);
 
 const tabFamily = atomFamily((tab: string) => atom("info"));
 export const currentTabSelectedAtom = tabValue(tabFamily);
 
+const lichessOptionsFamily = atomFamily((tab: string) => atom<LichessGamesOptions>({
+    ratings: [1000, 1200, 1400, 1600, 1800, 2000, 2200, 2500],
+    speeds: ["bullet", "blitz", "rapid", "classical", "correspondence"],
+}));
+export const currentLichessOptionsAtom = tabValue(lichessOptionsFamily);
+
 // Practice
 
 const practicingFamily = atomFamily((tab: string) => atom(false));

diff --git a/src/components/panels/database/DatabasePanel.tsx b/src/components/panels/database/DatabasePanel.tsx
@@ -1,8 +1,8 @@
 import { Alert, Group, SegmentedControl, Tabs, Text } from "@mantine/core";
 import { memo, useEffect, useState } from "react";
 import { Opening, PositionQuery, searchPosition } from "@/utils/db";
-import { currentTabAtom, referenceDbAtom } from "@/atoms/atoms";
-import { useAtomValue } from "jotai";
+import { currentLichessOptionsAtom, currentTabAtom, referenceDbAtom } from "@/atoms/atoms";
+import { useAtom, useAtomValue } from "jotai";
 import {
   convertToNormalized,
   getLichessGames,
@@ -72,10 +72,8 @@ async function fetchOpening(query: PositionQuery, db: DBType, tab: string, liche
 function DatabasePanel({ height, fen }: { height: number; fen: string }) {
   const referenceDatabase = useAtomValue(referenceDbAtom);
   const [db, setDb] = useState<"local" | "lch_all" | "lch_master">("local");
-  const [lichessOptions, setLichessOptions] = useState<LichessGamesOptions>({
-    ratings: [1000, 1200, 1400, 1600, 1800, 2000, 2200, 2500],
-    speeds: ["bullet", "blitz", "rapid", "classical", "correspondence"],
-  });
+  const [lichessOptions, setLichessOptions] = useAtom(currentLichessOptionsAtom);
+  const [debouncedLichessOptions] = useDebouncedValue(lichessOptions, 500);
   const [masterOptions, setMasterOptions] = useState<MasterGamesOptions>({});
   const [query, setQuery] = useState<PositionQuery>({ value: fen, type: "exact" });
   const [debouncedFen] = useDebouncedValue(fen, 50);
@@ -97,17 +95,12 @@ function DatabasePanel({ height, fen }: { height: number; fen: string }) {
 
   const tab = useAtomValue(currentTabAtom);
 
-  const dbOptionsKey = match(db)
-    .with("local", () => "0")
-    .with("lch_all", () => `1_${JSON.stringify(lichessOptions)}`)
-    .with("lch_master", () => `2_${JSON.stringify(masterOptions)}`)
-    .exhaustive();
   const {
     data: openingData,
     isLoading,
     error,
-  } = useSWR([dbType, query, dbOptionsKey], async ([dbType, query]) => {
-    return fetchOpening(query, dbType, tab?.value || "", lichessOptions, masterOptions);
+  } = useSWR([dbType, query, debouncedLichessOptions, masterOptions], async ([dbType, query, lichessOptions, masterOptions]) => {
+    return fetchOpening(query, dbType, tab?.value || "", lichessOptions!, masterOptions);
   });
 
   const [tabType, setTabType] = useState<string | null>("stats");
@@ -181,7 +174,7 @@ function DatabasePanel({ height, fen }: { height: number; fen: string }) {
               />
             ).with("lch_all", () =>
               <LichessOptionsPanel
-                options={lichessOptions}
+                options={lichessOptions!}
                 setOptions={setLichessOptions}
               />
             ).with("lch_master", () =>

diff --git a/src/components/panels/database/options/LichessOptionsPanel.tsx b/src/components/panels/database/options/LichessOptionsPanel.tsx
@@ -46,8 +46,10 @@ const LichessOptionsPanel = (props: LichessOptionsPanelProps) => {
         const selected = props.options.speeds ?? [];
         const newSelected = [...selected];
         const index = newSelected.indexOf(speed);
-        if (index >= 0 && newSelected.length > 1) {
-            newSelected.splice(index, 1);
+        if (index >= 0) {
+            if (newSelected.length > 1) {
+                newSelected.splice(index, 1);
+            }
         } else {
             newSelected.push(speed);
         }
@@ -58,8 +60,10 @@ const LichessOptionsPanel = (props: LichessOptionsPanelProps) => {
         const selected = props.options.ratings ?? [];
         const newSelected = [...selected];
         const index = newSelected.indexOf(rating);
-        if (index >= 0 && newSelected.length > 1) {
-            newSelected.splice(index, 1);
+        if (index >= 0) {
+            if (newSelected.length > 1) {
+                newSelected.splice(index, 1);
+            }
         } else {
             newSelected.push(rating);
         }