fix: reset value on hydration

Debbl · Debbl · commit 06f3a26a6cf4 · 2024-07-05T17:01:12.000+08:00
diff --git a/package.json b/package.json
@@ -14,11 +14,11 @@
     "@debbl/ahooks": "^0.1.0",
     "@monaco-editor/react": "^4.6.0",
     "highlight.js": "^11.9.0",
+    "jotai": "^2.8.4",
     "monaco-editor": "^0.50.0",
     "next": "^14.2.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "zustand": "^4.5.4"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@debbl/eslint-config": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "~/styles/globals.css";
+import { Provider } from "jotai";
 import nextConfig from "../../next.config.mjs";
 
 const { basePath } = nextConfig;
@@ -18,7 +19,9 @@ export default function RootLayout({
           type="image/x-icon"
         />
       </head>
-      <body>{children}</body>
+      <body>
+        <Provider>{children}</Provider>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,51 +3,34 @@ import type { DiffOnMount, Monaco } from "@monaco-editor/react";
 import { DiffEditor } from "@monaco-editor/react";
 import hljs from "highlight.js";
 import { useRef } from "react";
-import { useLatest } from "@debbl/ahooks";
+import { useHydrated, useLatest } from "@debbl/ahooks";
 import nextConfig from "../../next.config.mjs";
-import useMainStore from "~/store/useMainStore";
 import Header from "~/components/Header";
 import useTheme from "~/hooks/useTheme";
 import useToast from "~/hooks/useToast";
-import type { GetStoreState } from "~/types";
+import { useMainStore } from "~/store/useMainStore";
 
 const { basePath } = nextConfig;
 
-const selector = (s: GetStoreState<typeof useMainStore>) =>
-  [
-    {
-      originalValue: s.originalValue,
-      modifiedValue: s.modifiedValue,
-      language: s.language,
-      languages: s.languages,
-      theme: s.theme,
-      renderSideBySide: s.renderSideBySide,
-    },
-    {
-      setLanguage: s.setLanguage,
-      setLanguages: s.setLanguages,
-      setOriginalValue: s.setOriginalValue,
-      setModifiedValue: s.setModifiedValue,
-    },
-  ] as const;
-
 export default function Page() {
-  const [
-    {
-      originalValue,
-      modifiedValue,
-      language,
-      languages,
-      theme,
-      renderSideBySide,
-    },
-    { setOriginalValue, setModifiedValue, setLanguage, setLanguages },
-  ] = useMainStore(selector);
+  const {
+    originalValue,
+    modifiedValue,
+    language,
+    languages,
+    theme,
+    renderSideBySide,
+    setOriginalValue,
+    setModifiedValue,
+    setLanguage,
+    setLanguages,
+  } = useMainStore();
 
   useTheme();
   const { Toast, showToast } = useToast();
   const monacoRef = useRef<Monaco>();
   const languageRef = useLatest(language);
+  const { isHydrated } = useHydrated();
 
   const handleOnMount: DiffOnMount = (editor, monaco) => {
     monacoRef.current = monaco;
@@ -89,16 +72,18 @@ export default function Page() {
         <Header monaco={monacoRef.current} />
 
         <main className="size-full">
-          <DiffEditor
-            options={{
-              originalEditable: true,
-              renderSideBySide,
-            }}
-            onMount={handleOnMount}
-            height="100%"
-            theme={theme}
-            language={language}
-          />
+          {isHydrated && (
+            <DiffEditor
+              options={{
+                originalEditable: true,
+                renderSideBySide,
+              }}
+              onMount={handleOnMount}
+              height="100%"
+              theme={theme}
+              language={language}
+            />
+          )}
         </main>
       </div>
     </>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,34 +3,23 @@ import closeFilled from "@iconify/icons-carbon/close-filled";
 
 import type { Monaco } from "@monaco-editor/react";
 import { useGitHubInfo, useHydrated } from "@debbl/ahooks";
-import useMainStore from "~/store/useMainStore";
-import type { GetStoreState, Theme } from "~/types";
+import type { Theme } from "~/types";
+import { useMainStore } from "~/store/useMainStore";
 
 interface IProps {
   monaco?: Monaco;
 }
 
-const selector = (s: GetStoreState<typeof useMainStore>) =>
-  [
-    {
-      language: s.language,
-      languages: s.languages,
-      theme: s.theme,
-      renderSideBySide: s.renderSideBySide,
-    },
-    {
-      setLanguage: s.setLanguage,
-      setLanguages: s.setLanguages,
-      setTheme: s.setTheme,
-      setRenderSideBySide: s.setRenderSideBySide,
-    },
-  ] as const;
-
 const Header = ({ monaco }: IProps) => {
-  const [
-    { language, languages, theme, renderSideBySide },
-    { setLanguage, setTheme, setRenderSideBySide },
-  ] = useMainStore(selector);
+  const {
+    language,
+    languages,
+    theme,
+    renderSideBySide,
+    setLanguage,
+    setTheme,
+    setRenderSideBySide,
+  } = useMainStore();
 
   const { isHydrated } = useHydrated();
 
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import useMainStore from "~/store/useMainStore";
+import { useMainStore } from "~/store/useMainStore";
 
 const useTheme = () => {
-  const theme = useMainStore((s) => (s.theme === "vs-dark" ? "dark" : "light"));
+  const { theme } = useMainStore();
 
   useEffect(() => {
     const html = document.querySelector("html");
diff --git a/src/store/useMainStore.ts b/src/store/useMainStore.ts
@@ -1,6 +1,7 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
 import type { languages } from "monaco-editor/esm/vs/editor/editor.api";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
 import type { Theme } from "~/types";
 
 export interface MainStoreState {
@@ -23,28 +24,29 @@ export interface MainStoreActions {
   ) => void;
 }
 
-const useMainStore = create<MainStoreState & MainStoreActions>()(
-  persist(
-    (set) => ({
-      originalValue: "",
-      modifiedValue: "",
-      language: "plaintext",
-      languages: [],
-      theme: "light",
-      renderSideBySide: true,
-
-      setOriginalValue: (originalValue) => set({ originalValue }),
-      setModifiedValue: (modifiedValue) => set({ modifiedValue }),
-      setLanguage: (language) => set({ language }),
-      setLanguages: (languages) => set({ languages }),
-      setTheme: (theme) => set({ theme }),
-      setRenderSideBySide: (renderSideBySide) => set({ renderSideBySide }),
-    }),
-    {
-      name: "code-diff-main-store",
-      version: 1,
-    },
-  ),
+const useMainStoreAtom = atomWithStorage<MainStoreState>(
+  "code-diff-main-store",
+  {
+    originalValue: "",
+    modifiedValue: "",
+    language: "plaintext",
+    languages: [],
+    theme: "light",
+    renderSideBySide: true,
+  },
 );
 
-export default useMainStore;
+export function useMainStore() {
+  const [state, set] = useAtom(useMainStoreAtom);
+
+  return {
+    ...state,
+    setOriginalValue: (originalValue) => set((s) => ({ ...s, originalValue })),
+    setModifiedValue: (modifiedValue) => set((s) => ({ ...s, modifiedValue })),
+    setLanguage: (language) => set((s) => ({ ...s, language })),
+    setLanguages: (languages) => set((s) => ({ ...s, languages })),
+    setTheme: (theme) => set((s) => ({ ...s, theme })),
+    setRenderSideBySide: (renderSideBySide) =>
+      set((s) => ({ ...s, renderSideBySide })),
+  } as MainStoreActions & MainStoreState;
+}
