feat(stores/global): use jotai (#3134)

Author: SkyeYoung

package.json

@@ -31,6 +31,7 @@
     "fast-clean": "^1.4.0",
     "i18next": "^25.0.1",
     "immer": "^10.1.1",
+    "jotai": "^2.12.5",
     "mobx": "^6.13.7",
     "mobx-persist-store": "^1.1.8",
     "mobx-react-lite": "^4.1.0",

pnpm-lock.yaml

@@ -15,14 +15,17 @@
  * limitations under the License.
  */
 import { ActionIcon } from '@mantine/core';
+import { useSetAtom } from 'jotai';
 
-import { globalStore } from '@/stores/global';
+import { isSettingsOpenAtom } from '@/stores/global';
 import IconSettings from '~icons/material-symbols/settings';
 
 export const SettingModalBtn = () => {
+  const setIsSettingsOpen = useSetAtom(isSettingsOpenAtom);
+
   return (
     <ActionIcon
-      onClick={() => globalStore.settings.set('isOpen', true)}
+      onClick={() => setIsSettingsOpen(true)}
       variant="light"
       size="sm"
     >

src/components/Header/SettingModalBtn.tsx

@@ -15,20 +15,23 @@
  * limitations under the License.
  */
 import { Divider, InputWrapper, Modal, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
 import { queryClient } from '@/config/global';
-import { globalStore } from '@/stores/global';
+import { adminKeyAtom, isSettingsOpenAtom } from '@/stores/global';
 import { sha } from '~build/git';
 
 const AdminKey = () => {
   const { t } = useTranslation();
+  const [adminKey, setAdminKey] = useAtom(adminKeyAtom);
+
   return (
     <TextInput
       label={t('settings.adminKey')}
-      value={globalStore.settings.adminKey}
+      value={adminKey}
       onChange={(e) => {
-        globalStore.settings.set('adminKey', e.currentTarget.value);
+        setAdminKey(e.currentTarget.value);
         setTimeout(() => {
           queryClient.invalidateQueries();
           queryClient.refetchQueries();
@@ -52,11 +55,12 @@ const UICommitSha = () => {
 
 export const SettingsModal = () => {
   const { t } = useTranslation();
+  const [isSettingsOpen, setIsSettingsOpen] = useAtom(isSettingsOpenAtom);
 
   return (
     <Modal
-      opened={globalStore.settings.isOpen}
-      onClose={() => globalStore.settings.set('isOpen', false)}
+      opened={isSettingsOpen}
+      onClose={() => setIsSettingsOpen(false)}
       centered
       title={t('settings.title')}
     >

src/components/page/SettingsModal.tsx

@@ -17,14 +17,15 @@
 
 import { notifications } from '@mantine/notifications';
 import axios, { AxiosError, type AxiosResponse, HttpStatusCode } from 'axios';
+import { getDefaultStore } from 'jotai';
 import { stringify } from 'qs';
 
 import {
   API_HEADER_KEY,
   API_PREFIX,
   SKIP_INTERCEPTOR_HEADER,
 } from '@/config/constant';
-import { globalStore } from '@/stores/global';
+import { adminKeyAtom, isSettingsOpenAtom } from '@/stores/global';
 
 export const req = axios.create();
 
@@ -40,7 +41,8 @@ req.interceptors.request.use((conf) => {
     });
   };
   conf.baseURL = API_PREFIX;
-  conf.headers.set(API_HEADER_KEY, globalStore.settings.adminKey);
+  const adminKey = getDefaultStore().get(adminKeyAtom);
+  conf.headers.set(API_HEADER_KEY, adminKey);
   return conf;
 });
 
@@ -84,7 +86,7 @@ req.interceptors.response.use(
       });
       // Requires to enter admin key at 401
       if (res.status === HttpStatusCode.Unauthorized) {
-        globalStore.settings.set('isOpen', true);
+        getDefaultStore().set(isSettingsOpenAtom, true);
         return Promise.resolve({ data: {} });
       }
     }

src/config/req.ts

@@ -14,30 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { action, observable } from 'mobx';
-import { makePersistable } from 'mobx-persist-store';
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 
-/** allow store use `set(key, value)` */
-const set = action(function <T, K extends keyof T>(
-  this: T,
-  key: K extends 'set' ? never : K,
-  value: T[K]
-) {
-  this[key as K] = value;
-});
+// Admin key with persistent storage
+export const adminKeyAtom = atomWithStorage<string>(
+  'settings:adminKey',
+  '',
+  undefined,
+  {
+    getOnInit: true,
+  }
+);
 
-const settingsStore = observable({
-  set,
-  isOpen: false,
-  adminKey: '',
-});
-
-export const globalStore = observable({
-  settings: settingsStore,
-});
-
-makePersistable(settingsStore, {
-  name: 'settings',
-  properties: ['adminKey'],
-  storage: window.localStorage,
-});
+// Settings modal visibility state
+export const isSettingsOpenAtom = atom<boolean>(false);