feat: replace jotai by zustand (#239)

SocialGouv · Oct 11, 2022 · 789a811 · 789a811
1 parent 8f42efe
commit 789a811
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 49 deletions.
diff --git a/TODO.md b/TODO.md
@@ -23,7 +23,7 @@
 - [ ] Isomorphic electron mock ?
 - [ ] Use preload + sandbox
 - [ ] move common electron + Archifiltre code to 3rd party package
-- [ ] migrate from jotai to zustand 4 
+- [x] migrate from jotai to zustand 4 
 
 ## Doc
 - [ ] Tech doc tool (docusaurus? next? jekyll?) + github pages

diff --git a/package.json b/package.json
@@ -59,7 +59,6 @@
       "d3",
       "electron-store",
       "i18next",
-      "jotai",
       "lodash",
       "posthog-js",
       "react-dropzone",
@@ -213,7 +212,6 @@
     "electron-util": "^0.17.2",
     "fs-extra": "^10.1.0",
     "i18next": "^21.8.10",
-    "jotai": "^1.8.5",
     "json2csv": "^5.0.6",
     "level": "^8.0.0",
     "lodash": "^4.17.21",

diff --git a/src/renderer/components/viewer/CirclePacking.tsx b/src/renderer/components/viewer/CirclePacking.tsx
@@ -93,7 +93,6 @@ export const CirclePacking: React.FC = () => {
         if (isInfoFocus) return;
 
         if (node.data.name === ROOT) {
-            setMainInfos((infos) => infos);
             return;
         }
 

diff --git a/src/renderer/store/BreadcrumbStore.tsx b/src/renderer/store/BreadcrumbStore.tsx
@@ -1,8 +1,7 @@
 import type { UnknownMapping } from "@common/utils/type";
 import { t } from "i18next";
-import { atom, useAtom } from "jotai/index";
-import type { SetStateAction } from "react";
 import { useEffect, useMemo } from "react";
+import create from "zustand";
 
 import type { LocaleFileResources } from "../../common/i18n/raw";
 import { viewListStore } from "./ViewListStore";
@@ -18,20 +17,14 @@ export type BreadcrumbId = {
 
 export interface BreadcrumbObject {
     history?: string[];
-    historyIds?: string[];
     id: BreadcrumbId | UnknownMapping;
 }
 
 export interface UseBreadcrumbStore {
     breadcrumb: BreadcrumbObject;
     resetBreadcrumb: () => void;
-    setBreadcrumb: (update: SetStateAction<BreadcrumbObject>) => void;
 }
 
-const breadcrumbAtom = atom<BreadcrumbObject>({
-    id: "",
-});
-
 const joinBreadcrumbHistory = (labels: string[] | undefined) =>
     labels?.join(CHEVRON);
 
@@ -44,10 +37,16 @@ interface UseBreadcrumbStoreOptions {
     allowUpdate: boolean;
 }
 const defaultOptions: UseBreadcrumbStoreOptions = { allowUpdate: false };
+
+const breadcrumbStore = create<BreadcrumbObject>(() => ({
+    history: [],
+    id: "",
+}));
+
 export const useBreadcrumbStore = ({
     allowUpdate,
 } = defaultOptions): UseBreadcrumbStore => {
-    const [breadcrumb, setBreadcrumb] = useAtom(breadcrumbAtom);
+    const breadcrumb = breadcrumbStore();
     const { list, currentIndex, prevIndex } = viewListStore();
 
     const initialType = list[0]
@@ -70,10 +69,10 @@ export const useBreadcrumbStore = ({
     useEffect(() => {
         if (allowUpdate) {
             if (currentIndex === 0) {
-                setBreadcrumb(initialBreadcrumb);
+                breadcrumbStore.setState(initialBreadcrumb);
             } else if (currentView && currentViewName) {
                 if (prevIndex < currentIndex) {
-                    setBreadcrumb((prevBreadcrumb) => {
+                    breadcrumbStore.setState((prevBreadcrumb) => {
                         const { history } = prevBreadcrumb;
 
                         const newHistory = !history?.length
@@ -86,7 +85,7 @@ export const useBreadcrumbStore = ({
                         };
                     });
                 } else {
-                    setBreadcrumb((prevBreadcrumb) => {
+                    breadcrumbStore.setState((prevBreadcrumb) => {
                         const history = prevBreadcrumb.history ?? [];
                         history.pop();
                         return {
@@ -104,18 +103,16 @@ export const useBreadcrumbStore = ({
         currentViewType,
         list,
         prevIndex,
-        setBreadcrumb,
         allowUpdate,
         initialBreadcrumb,
     ]);
 
     const resetBreadcrumb = () => {
-        setBreadcrumb(initialBreadcrumb);
+        breadcrumbStore.setState(initialBreadcrumb);
     };
 
     return {
         breadcrumb,
         resetBreadcrumb,
-        setBreadcrumb,
     };
 };
diff --git a/src/renderer/store/PstFMInfosStore.tsx b/src/renderer/store/PstFMInfosStore.tsx
@@ -1,7 +1,6 @@
 import { useService } from "@common/modules/ContainerModule";
 import type { ComputedDatum } from "@nivo/circle-packing";
-import { atom, useAtom } from "jotai/index";
-import type { SetStateAction } from "react";
+import create from "zustand";
 
 import type {
     MailViewerObject,
@@ -20,36 +19,33 @@ export interface UsePstMainInfosStore {
     cancelFocus: () => void;
     isInfoFocus: boolean;
     mainInfos: MainInfos | undefined;
-    setMainInfos: (update?: SetStateAction<MainInfos | undefined>) => void;
+    setMainInfos: (update?: MainInfos | undefined) => void;
     startFocus: () => void;
 }
 
-const pstMainInfosAtom = atom<MainInfos | undefined>(undefined);
-const isInfoFocusAtom = atom<boolean>(false);
+const _usePstFMInfosStore = create<UsePstMainInfosStore>((set) => ({
+    cancelFocus: () => {
+        set({ isInfoFocus: false });
+    },
+    isInfoFocus: false,
+    mainInfos: undefined,
+    setMainInfos: (mainInfos: MainInfos | undefined) => {
+        set({ mainInfos });
+    },
+    startFocus: () => {
+        set({ isInfoFocus: true });
+    },
+}));
 
-/**
- * A hook that exposes Folder and Mails informations. (FM: accronym for Folder & Mails)
- */
 export const usePstFMInfosStore = (): UsePstMainInfosStore => {
-    const [mainInfos, setMainInfos] = useAtom(pstMainInfosAtom);
-
-    const [isInfoFocus, setIsInfoFocus] = useAtom(isInfoFocusAtom);
     const trackerService = useService("trackerService");
-
-    const startFocus = () => {
-        trackerService?.getProvider().track("Feat(4.0) Detail Expanded");
-        setIsInfoFocus(true);
-    };
-
-    const cancelFocus = () => {
-        setIsInfoFocus(false);
-    };
+    const { startFocus, ...rest } = _usePstFMInfosStore();
 
     return {
-        cancelFocus,
-        isInfoFocus,
-        mainInfos,
-        setMainInfos,
-        startFocus,
+        startFocus: () => {
+            trackerService?.getProvider().track("Feat(4.0) Detail Expanded");
+            startFocus();
+        },
+        ...rest,
     };
 };
diff --git a/yarn.lock b/yarn.lock
@@ -9911,11 +9911,6 @@ join-component@^1.1.0:
   resolved "https://registry.yarnpkg.com/join-component/-/join-component-1.1.0.tgz#b8417b750661a392bee2c2537c68b2a9d4977cd5"
   integrity sha1-uEF7dQZho5K+4sJTfGiyqdSXfNU=
 
-jotai@^1.8.5:
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.8.5.tgz#a1d64682cc7b12697782488d5b6c6cfb54051520"
-  integrity sha512-c6MGQ3S0X8VctRUEmRLEL3FMib3F7Ppsx3x86c5XL+Gm6JjH6qIt0lb0F4yE2V5/9Tg+KhGiagfsdA5lg0D7cQ==
-
 jpeg-js@^0.4.2:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"