From 646a41e9313117fa5ef7dbd826cdef49628c1380 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sun, 7 Aug 2022 22:48:22 +0800
Subject: [PATCH] chore: add `i18n` based with `useContext`

---
 web/src/components/AboutSiteDialog.tsx |  9 +++-
 web/src/hooks/useDebounce.ts           | 27 ------------
 web/src/hooks/useI18n.ts               |  3 ++
 web/src/hooks/useLoading.ts            |  6 ++-
 web/src/hooks/useRefresh.ts            |  6 ++-
 web/src/hooks/useToggle.ts             |  6 ++-
 web/src/labs/i18n/I18nProvider.tsx     | 27 ++++++++++++
 web/src/labs/i18n/i18nStore.ts         | 58 ++++++++++++++++++++++++++
 web/src/labs/i18n/useI18n.ts           | 47 +++++++++++++++++++++
 web/src/locales/en.json                |  3 ++
 web/src/locales/zh.json                |  3 ++
 web/src/main.tsx                       |  9 ++--
 web/src/services/resourceService.ts    |  5 ---
 web/src/store/index.ts                 |  4 +-
 14 files changed, 168 insertions(+), 45 deletions(-)
 delete mode 100644 web/src/hooks/useDebounce.ts
 create mode 100644 web/src/hooks/useI18n.ts
 create mode 100644 web/src/labs/i18n/I18nProvider.tsx
 create mode 100644 web/src/labs/i18n/i18nStore.ts
 create mode 100644 web/src/labs/i18n/useI18n.ts
 create mode 100644 web/src/locales/en.json
 create mode 100644 web/src/locales/zh.json

diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index d7a0b9ef3..fa4ed6ed9 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/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 />
diff --git a/web/src/hooks/useDebounce.ts b/web/src/hooks/useDebounce.ts
deleted file mode 100644
index 349c1c873..000000000
--- a/web/src/hooks/useDebounce.ts
+++ /dev/null
@@ -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;
-}
diff --git a/web/src/hooks/useI18n.ts b/web/src/hooks/useI18n.ts
new file mode 100644
index 000000000..7a1368582
--- /dev/null
+++ b/web/src/hooks/useI18n.ts
@@ -0,0 +1,3 @@
+import useI18n from "../labs/i18n/useI18n";
+
+export default useI18n;
diff --git a/web/src/hooks/useLoading.ts b/web/src/hooks/useLoading.ts
index daf365745..28f5dfa91 100644
--- a/web/src/hooks/useLoading.ts
+++ b/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;
diff --git a/web/src/hooks/useRefresh.ts b/web/src/hooks/useRefresh.ts
index f3204057b..e892d9b65 100644
--- a/web/src/hooks/useRefresh.ts
+++ b/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;
diff --git a/web/src/hooks/useToggle.ts b/web/src/hooks/useToggle.ts
index 349a92ddb..fb5e68007 100644
--- a/web/src/hooks/useToggle.ts
+++ b/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;
diff --git a/web/src/labs/i18n/I18nProvider.tsx b/web/src/labs/i18n/I18nProvider.tsx
new file mode 100644
index 000000000..1a717adc7
--- /dev/null
+++ b/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;
diff --git a/web/src/labs/i18n/i18nStore.ts b/web/src/labs/i18n/i18nStore.ts
new file mode 100644
index 000000000..05ebb1f35
--- /dev/null
+++ b/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;
diff --git a/web/src/labs/i18n/useI18n.ts b/web/src/labs/i18n/useI18n.ts
new file mode 100644
index 000000000..760b7b2a8
--- /dev/null
+++ b/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;
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
new file mode 100644
index 000000000..287c80f45
--- /dev/null
+++ b/web/src/locales/en.json
@@ -0,0 +1,3 @@
+{
+  "about": "About"
+}
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
new file mode 100644
index 000000000..283465b6e
--- /dev/null
+++ b/web/src/locales/zh.json
@@ -0,0 +1,3 @@
+{
+  "about": "关于"
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 5451f08c6..bcdf9af8a 100644
--- a/web/src/main.tsx
+++ b/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(
-  <Provider store={store}>
-    <App />
-  </Provider>
+  <I18nProvider>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </I18nProvider>
 );
diff --git a/web/src/services/resourceService.ts b/web/src/services/resourceService.ts
index 1413edbc4..8e1a238ac 100644
--- a/web/src/services/resourceService.ts
+++ b/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;
 
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index 59f80da6f..bce86eeda 100644
--- a/web/src/store/index.ts
+++ b/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;