From cd5f73b459848c97f2396d1275d7e386c76d1c9d Mon Sep 17 00:00:00 2001
From: mebtte <i@mebtte.com>
Date: Tue, 13 Aug 2024 22:45:08 +0800
Subject: [PATCH] refactor setting

---
 .../commands/start_server/middlewares/i18n.ts |  2 +-
 apps/pwa/src/global_states/server.ts          |  6 +-
 apps/pwa/src/global_states/setting.ts         | 21 +++----
 apps/pwa/src/i18n/index.ts                    |  6 +-
 .../src/pages/login/first_step/language.tsx   |  9 ++-
 .../pages/player/pages/setting/language.tsx   |  9 ++-
 .../src/pages/player/pages/setting/volume.tsx |  9 ++-
 .../src/pages/player/use_audio/use_volume.ts  |  4 +-
 apps/pwa/src/server/index.ts                  |  4 +-
 apps/pwa/src/utils/x_state.tsx                | 56 -------------------
 10 files changed, 34 insertions(+), 92 deletions(-)
 delete mode 100644 apps/pwa/src/utils/x_state.tsx

diff --git a/apps/cli/src/commands/start_server/middlewares/i18n.ts b/apps/cli/src/commands/start_server/middlewares/i18n.ts
index d05ebffd..f81133db 100644
--- a/apps/cli/src/commands/start_server/middlewares/i18n.ts
+++ b/apps/cli/src/commands/start_server/middlewares/i18n.ts
@@ -14,7 +14,7 @@ export default (ctx: Context & I18nMiddleware, next: Next) => {
   let lang: Language | null = null;
   const getLang = () => {
     if (!lang) {
-      // @ts-expect-error
+      // @ts-expect-error: known types
       ({ __lang: lang } = ctx.query as { [CommonQuery.LANGUAGE]: unknown });
       if (!lang || !ACCEPT_LANGUAGES.includes(lang)) {
         const negotiator = new Negotiator(ctx.request);
diff --git a/apps/pwa/src/global_states/server.ts b/apps/pwa/src/global_states/server.ts
index 4da8cae6..ed4f20df 100644
--- a/apps/pwa/src/global_states/server.ts
+++ b/apps/pwa/src/global_states/server.ts
@@ -25,7 +25,11 @@ export const useServer = create(
     },
 );
 
-useServer.subscribe((server) => storage.setItem(Key.SERVER, server));
+useServer.subscribe((server) =>
+  storage
+    .setItem(Key.SERVER, server)
+    .catch((error) => logger.error(error, 'Failed to store server')),
+);
 
 window.setInterval(() => {
   const selectedServer = getSelectedServer(useServer.getState());
diff --git a/apps/pwa/src/global_states/setting.ts b/apps/pwa/src/global_states/setting.ts
index eee3b7d4..9b41784d 100644
--- a/apps/pwa/src/global_states/setting.ts
+++ b/apps/pwa/src/global_states/setting.ts
@@ -1,4 +1,4 @@
-import XState from '@/utils/x_state';
+import { create } from 'zustand';
 import storage, { Key } from '@/storage';
 import { Setting } from '@/constants/setting';
 import logger from '@/utils/logger';
@@ -26,26 +26,23 @@ const DEFAULT_SETTING: Setting = {
   language: getInitialLanguage(),
 };
 const initialSetting = await storage.getItem(Key.SETTING);
-const setting = new XState<Setting>({
+export const useSetting = create<Setting>(() => ({
   ...DEFAULT_SETTING,
   ...initialSetting,
-});
+}));
 
 /**
  * correct language
  * @author mebtte<i@mebtte.com>
  */
-if (!LANGUAGES.includes(setting.get().language)) {
-  setting.set((s) => ({
-    ...s,
+if (!LANGUAGES.includes(useSetting.getState().language)) {
+  useSetting.setState({
     language: DEFAULT_LANGUAGE,
-  }));
+  });
 }
 
-setting.onChange((s) =>
+useSetting.subscribe((setting) =>
   storage
-    .setItem(Key.SETTING, s)
-    .catch((error) => logger.error(error, 'Failed to save setting')),
+    .setItem(Key.SETTING, setting)
+    .catch((error) => logger.error(error, 'Failed to store setting')),
 );
-
-export default setting;
diff --git a/apps/pwa/src/i18n/index.ts b/apps/pwa/src/i18n/index.ts
index cf5280ae..409ebf73 100644
--- a/apps/pwa/src/i18n/index.ts
+++ b/apps/pwa/src/i18n/index.ts
@@ -1,9 +1,9 @@
 import { Language } from '#/constants';
-import setting from '../global_states/setting';
+import { useSetting } from '@/global_states/setting';
 import type { Key } from './constants';
 
 let translation: { [key in Key]: string };
-switch (setting.get().language) {
+switch (useSetting.getState().language) {
   case Language.ZH_HANS: {
     ({ default: translation } = await import('./zh_hans'));
     break;
@@ -40,4 +40,4 @@ export const LANGUAGE_MAP: Record<
   [Language.JA]: { label: '日本語' },
 };
 
-export { Key };
+export type { Key };
diff --git a/apps/pwa/src/pages/login/first_step/language.tsx b/apps/pwa/src/pages/login/first_step/language.tsx
index f46a91c9..5d4a03f7 100644
--- a/apps/pwa/src/pages/login/first_step/language.tsx
+++ b/apps/pwa/src/pages/login/first_step/language.tsx
@@ -1,7 +1,7 @@
 import { LANGUAGES, Language } from '#/constants';
 import Label from '@/components/label';
 import { Select, Option } from '@/components/select';
-import setting from '@/global_states/setting';
+import { useSetting } from '@/global_states/setting';
 import { LANGUAGE_MAP, t } from '@/i18n';
 
 const languageOptions: Option<Language>[] = LANGUAGES.map((l) => ({
@@ -11,7 +11,7 @@ const languageOptions: Option<Language>[] = LANGUAGES.map((l) => ({
 }));
 
 function Wrapper({ disabled }: { disabled: boolean }) {
-  const { language } = setting.useState();
+  const { language } = useSetting();
   return (
     <Label label={t('language')}>
       <Select<Language>
@@ -21,10 +21,9 @@ function Wrapper({ disabled }: { disabled: boolean }) {
           actualValue: language,
         }}
         onChange={(option) => {
-          setting.set((s) => ({
-            ...s,
+          useSetting.setState({
             language: option.actualValue,
-          }));
+          });
           return window.setTimeout(() => window.location.reload(), 0);
         }}
         options={languageOptions}
diff --git a/apps/pwa/src/pages/player/pages/setting/language.tsx b/apps/pwa/src/pages/player/pages/setting/language.tsx
index 3acb6cb2..f799b126 100644
--- a/apps/pwa/src/pages/player/pages/setting/language.tsx
+++ b/apps/pwa/src/pages/player/pages/setting/language.tsx
@@ -1,11 +1,11 @@
 import { memo, CSSProperties } from 'react';
-import setting from '@/global_states/setting';
 import { Select, Option } from '@/components/select';
 import { LANGUAGE_MAP, t } from '@/i18n';
 import { Language } from '#/constants';
 import dialog from '@/utils/dialog';
 import Item from './item';
 import { itemStyle } from './constants';
+import { useSetting } from '@/global_states/setting';
 
 const LANGUAGES = Object.values(Language);
 const style: CSSProperties = {
@@ -18,7 +18,7 @@ const options: Option<Language>[] = LANGUAGES.map((l) => ({
 }));
 
 function Wrapper() {
-  const { language } = setting.useState();
+  const { language } = useSetting();
   return (
     <Item label={t('language')} style={itemStyle}>
       <Select<Language>
@@ -32,10 +32,9 @@ function Wrapper() {
             dialog.confirm({
               content: t('change_language_question'),
               onConfirm: () => {
-                setting.set((prev) => ({
-                  ...prev,
+                useSetting.setState({
                   language: option.actualValue,
-                }));
+                });
                 window.setTimeout(() => window.location.reload(), 0);
               },
             });
diff --git a/apps/pwa/src/pages/player/pages/setting/volume.tsx b/apps/pwa/src/pages/player/pages/setting/volume.tsx
index 68a13971..782f281d 100644
--- a/apps/pwa/src/pages/player/pages/setting/volume.tsx
+++ b/apps/pwa/src/pages/player/pages/setting/volume.tsx
@@ -1,16 +1,15 @@
 import { type CSSProperties, memo } from 'react';
-import setting from '@/global_states/setting';
 import Slider from '@/components/slider';
 import { useTheme } from '@/global_states/theme';
 import { t } from '@/i18n';
 import Item from './item';
 import { itemStyle } from './constants';
+import { useSetting } from '@/global_states/setting';
 
 const onVolumnChange = (v: number) =>
-  setting.set((s) => ({
-    ...s,
+  useSetting.setState({
     playerVolume: v,
-  }));
+  });
 const sliderStyle: CSSProperties = {
   width: 200,
 };
@@ -20,7 +19,7 @@ const miniModeSliderStyle: CSSProperties = {
 };
 
 function Volume() {
-  const { playerVolume } = setting.useState();
+  const { playerVolume } = useSetting();
   return (
     <Item label={t('relative_volume')} style={itemStyle}>
       <Slider
diff --git a/apps/pwa/src/pages/player/use_audio/use_volume.ts b/apps/pwa/src/pages/player/use_audio/use_volume.ts
index b1548454..467a7deb 100644
--- a/apps/pwa/src/pages/player/use_audio/use_volume.ts
+++ b/apps/pwa/src/pages/player/use_audio/use_volume.ts
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import setting from '@/global_states/setting';
 import CustomAudio from '@/utils/custom_audio';
 import { QueueMusic } from '../constants';
+import { useSetting } from '@/global_states/setting';
 
 export default (audio: CustomAudio<QueueMusic> | null) => {
-  const { playerVolume } = setting.useState();
+  const { playerVolume } = useSetting();
 
   useEffect(() => {
     if (audio) {
diff --git a/apps/pwa/src/server/index.ts b/apps/pwa/src/server/index.ts
index 9464589a..c6072d73 100644
--- a/apps/pwa/src/server/index.ts
+++ b/apps/pwa/src/server/index.ts
@@ -4,7 +4,6 @@ import {
   getSelectedServer,
   getSelectedUser,
 } from '@/global_states/server';
-import setting from '@/global_states/setting';
 import ErrorWithCode from '@/utils/error_with_code';
 import sleep from '#/utils/sleep';
 import definition from '@/definition';
@@ -12,6 +11,7 @@ import { NORMAL_REQUEST_MINIMAL_DURATION } from '@/constants';
 import timeoutFn from '#/utils/timeout';
 import { CommonQuery } from '#/constants';
 import { t } from '@/i18n';
+import { useSetting } from '@/global_states/setting';
 
 export enum Method {
   GET = 'get',
@@ -24,7 +24,7 @@ export enum Method {
 export function getCommonParams() {
   return {
     [CommonQuery.VERSION]: definition.VERSION,
-    [CommonQuery.LANGUAGE]: setting.get().language,
+    [CommonQuery.LANGUAGE]: useSetting.getState().language,
   };
 }
 
diff --git a/apps/pwa/src/utils/x_state.tsx b/apps/pwa/src/utils/x_state.tsx
deleted file mode 100644
index cebd2627..00000000
--- a/apps/pwa/src/utils/x_state.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useState, useEffect } from 'react';
-import Eventin from 'eventin';
-
-enum EventType {
-  UPDATED = 'updated',
-}
-
-class XState<State> {
-  private eventemitter: Eventin<
-    EventType,
-    {
-      [EventType.UPDATED]: State;
-    }
-  >;
-
-  private state: State;
-
-  constructor(initialState: State) {
-    this.eventemitter = new Eventin<
-      EventType,
-      {
-        [EventType.UPDATED]: State;
-      }
-    >();
-    this.state = initialState;
-  }
-
-  get() {
-    return this.state;
-  }
-
-  set(updater: State | ((state: State) => State)) {
-    // @ts-expect-error
-    this.state = typeof updater === 'function' ? updater(this.state) : updater;
-    this.eventemitter.emit(EventType.UPDATED, this.state);
-  }
-
-  onChange(listener: (state: State) => void) {
-    return this.eventemitter.listen(EventType.UPDATED, listener);
-  }
-
-  useState() {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [state, setState] = useState(this.state);
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      const unsubscribe = this.onChange((s) => setState(s));
-      return unsubscribe;
-    }, []);
-
-    return state;
-  }
-}
-
-export default XState;