From f76ace6069e212d7a7fcc75924b96ba2457b8c02 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 15 Sep 2021 20:27:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E6=A8=A1=E5=BC=8F=E7=9A=84=E5=AE=9E=E7=8E=B0,=20?=
 =?UTF-8?q?=E4=BD=BF=E5=85=B6=E8=83=BD=E5=9C=A8=E5=86=85=E9=83=A8=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E5=8F=98=E6=9B=B4=E5=90=8E=E7=AB=8B=E5=8D=B3=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/components/Provider.tsx      |  7 ++++++-
 shared/contexts/DarkModeContext.tsx | 26 ++++++++++++++++++++++++++
 shared/index.tsx                    |  3 +++
 web/src/App.tsx                     | 21 +++++++++++++++------
 4 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 shared/contexts/DarkModeContext.tsx

diff --git a/shared/components/Provider.tsx b/shared/components/Provider.tsx
index 3c790431..bd23dbe2 100644
--- a/shared/components/Provider.tsx
+++ b/shared/components/Provider.tsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { CacheProvider } from '../cache/Provider';
+import { DarkModeContextProvider } from '../contexts/DarkModeContext';
 
 export const TcProvider: React.FC = React.memo((props) => {
-  return <CacheProvider>{props.children}</CacheProvider>;
+  return (
+    <CacheProvider>
+      <DarkModeContextProvider>{props.children}</DarkModeContextProvider>
+    </CacheProvider>
+  );
 });
 TcProvider.displayName = 'TcProvider';
diff --git a/shared/contexts/DarkModeContext.tsx b/shared/contexts/DarkModeContext.tsx
new file mode 100644
index 00000000..79ab113d
--- /dev/null
+++ b/shared/contexts/DarkModeContext.tsx
@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { useStorage } from 'tailchat-shared';
+
+const DarkModeContext = React.createContext<{
+  darkMode: boolean;
+  setDarkMode: (isDarkMode: boolean) => void;
+}>({
+  darkMode: true,
+  setDarkMode: () => {},
+});
+DarkModeContext.displayName = 'DarkModeContext';
+
+export const DarkModeContextProvider: React.FC = React.memo((props) => {
+  const [darkMode = true, { save: setDarkMode }] = useStorage('darkMode', true);
+
+  return (
+    <DarkModeContext.Provider value={{ darkMode, setDarkMode }}>
+      {props.children}
+    </DarkModeContext.Provider>
+  );
+});
+DarkModeContextProvider.displayName = 'DarkModeContextProvider';
+
+export function useDarkMode() {
+  return useContext(DarkModeContext);
+}
diff --git a/shared/index.tsx b/shared/index.tsx
index 6011f0ba..655dfdec 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -33,6 +33,9 @@ export {
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
 export { TcProvider } from './components/Provider';
 
+// contexts
+export { useDarkMode } from './contexts/DarkModeContext';
+
 // i18n
 export { t, setLanguage, useTranslation } from './i18n';
 export { Trans } from './i18n/Trans';
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 043b668c..21fa5822 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
-import { TcProvider, useStorage } from 'tailchat-shared';
+import { TcProvider, useDarkMode, useStorage } from 'tailchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
 import { ConfigProvider as AntdProvider } from 'antd';
@@ -43,8 +43,8 @@ const AppProvider: React.FC = React.memo((props) => {
 });
 AppProvider.displayName = 'AppProvider';
 
-export const App: React.FC = React.memo(() => {
-  const [darkMode] = useStorage('darkMode', true);
+export const AppContainer: React.FC = React.memo((props) => {
+  const { darkMode } = useDarkMode();
 
   return (
     <div
@@ -53,15 +53,24 @@ export const App: React.FC = React.memo(() => {
         dark: darkMode,
       })}
     >
-      <AppProvider>
+      {props.children}
+    </div>
+  );
+});
+AppContainer.displayName = 'AppContainer';
+
+export const App: React.FC = React.memo(() => {
+  return (
+    <AppProvider>
+      <AppContainer>
         <Switch>
           <Route path="/entry" component={EntryRoute} />
           <Route path="/main" component={MainRoute} />
           <Route path="/invite/:inviteCode" component={InviteRoute} />
           <Redirect to="/entry" />
         </Switch>
-      </AppProvider>
-    </div>
+      </AppContainer>
+    </AppProvider>
   );
 });
 App.displayName = 'App';