chore: add `i18n` based with `useContext`

web/src/components/AboutSiteDialog.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import * as api from "../helpers/api";
+import useI18n from "../hooks/useI18n";
 import Only from "./common/OnlyWhen";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
@@ -10,6 +11,7 @@ interface Props extends DialogProps {}
 
 const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
   const [profile, setProfile] = useState<Profile>();
+  const { t, setLocale } = useI18n();
 
   useEffect(() => {
     try {
@@ -25,6 +27,10 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         version: "0.0.0",
       });
     }
+
+    setTimeout(() => {
+      setLocale("zh");
+    }, 2333);
   }, []);
 
   const handleCloseBtnClick = () => {
@@ -35,7 +41,8 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text">
-          <span className="icon-text">🤠</span>About <b>Memos</b>
+          <span className="icon-text">🤠</span>
+          {t("about")} <b>Memos</b>
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />

web/src/hooks/useDebounce.ts

@@ -1,27 +0,0 @@
-import { useCallback, useRef } from "react";
-
-/**
- * useDebounce: useRef + useCallback
- * @param func function
- * @param delay delay duration
- * @param deps depends
- * @returns debounced function
- */
-export default function useDebounce<T extends (...args: any[]) => any>(func: T, delay: number, deps: any[] = []): T {
-  const timer = useRef<number>();
-
-  const cancel = useCallback(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-  }, []);
-
-  const run = useCallback((...args: any) => {
-    cancel();
-    timer.current = window.setTimeout(() => {
-      func(...args);
-    }, delay);
-  }, deps);
-
-  return run as T;
-}

web/src/hooks/useI18n.ts

@@ -0,0 +1,3 @@
+import useI18n from "../labs/i18n/useI18n";
+
+export default useI18n;

web/src/hooks/useLoading.ts

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function useLoading(initialState = true) {
+const useLoading = (initialState = true) => {
   const [state, setState] = useState({ isLoading: initialState, isFailed: false, isSucceed: false });
 
   return {
@@ -30,4 +30,6 @@ export default function useLoading(initialState = true) {
       });
     },
   };
-}
+};
+
+export default useLoading;

web/src/hooks/useRefresh.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 
-export default function useRefresh() {
+const useRefresh = () => {
   const [, setBoolean] = useState<boolean>(false);
 
   const refresh = useCallback(() => {
@@ -10,4 +10,6 @@ export default function useRefresh() {
   }, []);
 
   return refresh;
-}
+};
+
+export default useRefresh;

web/src/hooks/useToggle.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from "react";
 
 // Parameter is the boolean, with default "false" value
-export default function useToggle(initialState = false): [boolean, (nextState?: boolean) => void] {
+const useToggle = (initialState = false): [boolean, (nextState?: boolean) => void] => {
   // Initialize the state
   const [state, setState] = useState(initialState);
 
@@ -16,4 +16,6 @@ export default function useToggle(initialState = false): [boolean, (nextState?:
   }, []);
 
   return [state, toggle];
-}
+};
+
+export default useToggle;

web/src/labs/i18n/I18nProvider.tsx

@@ -0,0 +1,27 @@
+import { createContext, useEffect, useState } from "react";
+import i18nStore from "./i18nStore";
+
+interface Props {
+  children: React.ReactElement;
+}
+
+const i18nContext = createContext(i18nStore.getState());
+
+const I18nProvider: React.FC<Props> = (props: Props) => {
+  const { children } = props;
+  const [i18nState, setI18nState] = useState(i18nStore.getState());
+
+  useEffect(() => {
+    const unsubscribe = i18nStore.subscribe((ns) => {
+      setI18nState(ns);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  return <i18nContext.Provider value={i18nState}>{children}</i18nContext.Provider>;
+};
+
+export default I18nProvider;

web/src/labs/i18n/i18nStore.ts

@@ -0,0 +1,58 @@
+type I18nState = Readonly<{
+  locale: string;
+}>;
+
+type Listener = (ns: I18nState, ps?: I18nState) => void;
+
+const createI18nStore = (preloadedState: I18nState) => {
+  const listeners: Listener[] = [];
+  let currentState = preloadedState;
+
+  const getState = () => {
+    return currentState;
+  };
+
+  const setState = (state: Partial<I18nState>) => {
+    const nextState = {
+      ...currentState,
+      ...state,
+    };
+    const prevState = currentState;
+    currentState = nextState;
+
+    for (const cb of listeners) {
+      cb(currentState, prevState);
+    }
+  };
+
+  const subscribe = (listener: Listener) => {
+    let isSubscribed = true;
+    listeners.push(listener);
+
+    const unsubscribe = () => {
+      if (!isSubscribed) {
+        return;
+      }
+
+      const index = listeners.indexOf(listener);
+      listeners.splice(index, 1);
+      isSubscribed = false;
+    };
+
+    return unsubscribe;
+  };
+
+  return {
+    getState,
+    setState,
+    subscribe,
+  };
+};
+
+const defaultI18nState = {
+  locale: "en",
+};
+
+const i18nStore = createI18nStore(defaultI18nState);
+
+export default i18nStore;

web/src/labs/i18n/useI18n.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import i18nStore from "./i18nStore";
+import enLocale from "../../locales/en.json";
+import zhLocale from "../../locales/zh.json";
+
+type Locale = "en" | "zh";
+
+const resources: Record<string, any> = {
+  en: enLocale,
+  zh: zhLocale,
+};
+
+const useI18n = () => {
+  const [{ locale }, setState] = useState(i18nStore.getState());
+
+  useEffect(() => {
+    const unsubscribe = i18nStore.subscribe((ns) => {
+      setState(ns);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+
+  const translate = (key: string) => {
+    try {
+      return resources[locale][key] as string;
+    } catch (error) {
+      return key;
+    }
+  };
+
+  const setLocale = (locale: Locale) => {
+    i18nStore.setState({
+      locale,
+    });
+  };
+
+  return {
+    t: translate,
+    locale,
+    setLocale,
+  };
+};
+
+export default useI18n;

web/src/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "about": "About"
+}

web/src/locales/zh.json

@@ -0,0 +1,3 @@
+{
+  "about": "关于"
+}

web/src/main.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
+import I18nProvider from "./labs/i18n/I18nProvider";
 import store from "./store";
 import App from "./App";
 import "./helpers/polyfill";
@@ -9,7 +10,9 @@ import "./css/index.css";
 const container = document.getElementById("root");
 const root = createRoot(container as HTMLElement);
 root.render(
+  <I18nProvider>
     <Provider store={store}>
       <App />
     </Provider>
+  </I18nProvider>
 );

web/src/services/resourceService.ts

@@ -14,11 +14,6 @@ const resourceService = {
     const resourceList = data.map((m) => convertResponseModelResource(m));
     return resourceList;
   },
-  /**
-   * Upload resource file to server,
-   * @param file file
-   * @returns resource: id, filename
-   */
   async upload(file: File): Promise<Resource> {
     const { name: filename, size } = file;
 

web/src/store/index.ts

@@ -1,5 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import { TypedUseSelectorHook, useSelector } from "react-redux";
 import userReducer from "./modules/user";
 import memoReducer from "./modules/memo";
 import editorReducer from "./modules/editor";
@@ -17,9 +17,7 @@ const store = configureStore({
 });
 
 type AppState = ReturnType<typeof store.getState>;
-type AppDispatch = typeof store.dispatch;
 
 export const useAppSelector: TypedUseSelectorHook<AppState> = useSelector;
-export const useAppDispatch = () => useDispatch<AppDispatch>();
 
 export default store;