From 4c84d63ff4b8c3c7032656953c0514af0890a3e1 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sat, 7 Sep 2024 21:18:49 +0800
Subject: [PATCH] fix: proper localstorage usage

---
 app/components/mask.tsx        | 17 ++++++-----------
 app/locales/index.ts           |  6 ++++++
 app/utils/indexedDB-storage.ts | 12 ++++++++++++
 package.json                   |  1 +
 yarn.lock                      | 15 ++++++++++++++-
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/app/components/mask.tsx b/app/components/mask.tsx
index 62503c37a85..9b8a8b6bd38 100644
--- a/app/components/mask.tsx
+++ b/app/components/mask.tsx
@@ -48,7 +48,7 @@ import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
 import { BUILTIN_MASK_STORE } from "../masks";
-import { nanoid } from "nanoid";
+import { useLocalStorage } from "foxact/use-local-storage";
 import {
   DragDropContext,
   Droppable,
@@ -426,16 +426,11 @@ export function MaskPage() {
   const maskStore = useMaskStore();
   const chatStore = useChatStore();
 
-  const [filterLang, setFilterLang] = useState<Lang | undefined>(
-    () => localStorage.getItem("Mask-language") as Lang | undefined,
+  const [filterLang, setFilterLang] = useLocalStorage<Lang | null>(
+    "Mask-language",
+    null,
+    { raw: true },
   );
-  useEffect(() => {
-    if (filterLang) {
-      localStorage.setItem("Mask-language", filterLang);
-    } else {
-      localStorage.removeItem("Mask-language");
-    }
-  }, [filterLang]);
 
   const allMasks = maskStore
     .getAll()
@@ -542,7 +537,7 @@ export function MaskPage() {
               onChange={(e) => {
                 const value = e.currentTarget.value;
                 if (value === Locale.Settings.Lang.All) {
-                  setFilterLang(undefined);
+                  setFilterLang(null);
                 } else {
                   setFilterLang(value as Lang);
                 }
diff --git a/app/locales/index.ts b/app/locales/index.ts
index acdb3e878a1..24aa24435b6 100644
--- a/app/locales/index.ts
+++ b/app/locales/index.ts
@@ -82,6 +82,9 @@ merge(fallbackLang, targetLang);
 export default fallbackLang as LocaleType;
 
 function getItem(key: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
   try {
     return localStorage.getItem(key);
   } catch {
@@ -90,6 +93,9 @@ function getItem(key: string) {
 }
 
 function setItem(key: string, value: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
   try {
     localStorage.setItem(key, value);
   } catch {}
diff --git a/app/utils/indexedDB-storage.ts b/app/utils/indexedDB-storage.ts
index da309455013..f47adf05a4b 100644
--- a/app/utils/indexedDB-storage.ts
+++ b/app/utils/indexedDB-storage.ts
@@ -3,6 +3,9 @@ import { get, set, del, clear } from "idb-keyval";
 
 class IndexedDBStorage implements StateStorage {
   public async getItem(name: string): Promise<string | null> {
+    if (typeof window === "undefined") {
+      return null;
+    }
     try {
       const value = (await get(name)) || localStorage.getItem(name);
       return value;
@@ -12,6 +15,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async setItem(name: string, value: string): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       const _value = JSON.parse(value);
       if (!_value?.state?._hasHydrated) {
@@ -25,6 +31,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async removeItem(name: string): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       await del(name);
     } catch (error) {
@@ -33,6 +42,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async clear(): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       await clear();
     } catch (error) {
diff --git a/package.json b/package.json
index ca5fcc0f5df..c9071607fb1 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@vercel/speed-insights": "^1.0.2",
     "axios": "^1.7.5",
     "emoji-picker-react": "^4.9.2",
+    "foxact": "^0.2.37",
     "fuse.js": "^7.0.0",
     "heic2any": "^0.0.4",
     "html-to-image": "^1.11.11",
diff --git a/yarn.lock b/yarn.lock
index 4979e4d995e..15d422e192c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2378,7 +2378,7 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
-client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -3627,6 +3627,14 @@ formdata-polyfill@^4.0.10:
   dependencies:
     fetch-blob "^3.1.2"
 
+foxact@^0.2.37:
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/foxact/-/foxact-0.2.37.tgz#9af5c8b56c96bb70c84760e79c8e949a6fa28f04"
+  integrity sha512-nzK7n3JAnmCWO3GJXe4ry196s7wlOUnJVBn/RQ9Og1FJ/pEaRi94atLGFmzM0CVDgIbSFdMnH49PtkWjSqtMSw==
+  dependencies:
+    client-only "^0.0.1"
+    server-only "^0.0.1"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -5778,6 +5786,11 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
+server-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e"
+  integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"