Replace colorscheme state with React Hooks

14 files changed, 89 insertions, 90 deletions

diff --git a/src/console/actions/console.ts b/src/console/actions/console.ts
index 646cc31..bce2c67 100644
--- a/src/console/actions/console.ts
+++ b/src/console/actions/console.ts
@@ -1,8 +1,4 @@
 import * as messages from "../../shared/messages";
-import SettingClient from "../clients/SettingClient";
-import ColorScheme from "../../shared/ColorScheme";
-
-const settingClient = new SettingClient();
 
 export const CONSOLE_SHOW_COMMAND = "console.show.command";
 export const CONSOLE_SHOW_ERROR = "console.show.error";
@@ -10,7 +6,6 @@ export const CONSOLE_SHOW_INFO = "console.show.info";
 export const CONSOLE_HIDE_COMMAND = "console.hide.command";
 export const CONSOLE_SET_CONSOLE_TEXT = "console.set.command";
 export const CONSOLE_SHOW_FIND = "console.show.find";
-export const CONSOLE_SET_COLORSCHEME = "completion.set.colorscheme";
 export const CONSOLE_HIDE = "console.hide";
 
 export interface HideAction {
@@ -45,11 +40,6 @@ export interface SetConsoleTextAction {
   consoleText: string;
 }
 
-export interface SetColorSchemeAction {
-  type: typeof CONSOLE_SET_COLORSCHEME;
-  colorscheme: ColorScheme;
-}
-
 export type ConsoleAction =
   | HideAction
   | ShowCommand
@@ -57,8 +47,7 @@ export type ConsoleAction =
   | ShowErrorAction
   | ShowInfoAction
   | HideCommandAction
-  | SetConsoleTextAction
-  | SetColorSchemeAction;
+  | SetConsoleTextAction;
 
 const hide = (): ConsoleAction => {
   return {
@@ -131,14 +120,6 @@ const setConsoleText = (consoleText: string): SetConsoleTextAction => {
   };
 };
 
-const setColorScheme = async (): Promise<SetColorSchemeAction> => {
-  const scheme = await settingClient.getColorScheme();
-  return {
-    type: CONSOLE_SET_COLORSCHEME,
-    colorscheme: scheme,
-  };
-};
-
 export {
   hide,
   showCommand,
@@ -149,5 +130,4 @@ export {
   setConsoleText,
   enterCommand,
   enterFind,
-  setColorScheme,
 };
diff --git a/src/console/colorscheme/contexts.tsx b/src/console/colorscheme/contexts.tsx
new file mode 100644
index 0000000..e94454b
--- /dev/null
+++ b/src/console/colorscheme/contexts.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ColorScheme from "../../shared/ColorScheme";
+
+export const ColorSchemeContext = React.createContext<ColorScheme>(
+  ColorScheme.System
+);
+
+export const ColorSchemeUpdateContext = React.createContext<
+  (colorscheme: ColorScheme) => void
+>(() => {});
diff --git a/src/console/colorscheme/hooks.ts b/src/console/colorscheme/hooks.ts
new file mode 100644
index 0000000..c9de754
--- /dev/null
+++ b/src/console/colorscheme/hooks.ts
@@ -0,0 +1,15 @@
+import React from "react";
+import { ColorSchemeUpdateContext } from "./contexts";
+import SettingClient from "../clients/SettingClient";
+
+export const useColorSchemeRefresh = () => {
+  const update = React.useContext(ColorSchemeUpdateContext);
+  const settingClient = new SettingClient();
+  const refresh = React.useCallback(() => {
+    settingClient.getColorScheme().then((newScheme) => {
+      update(newScheme);
+    });
+  }, []);
+
+  return refresh;
+};
diff --git a/src/console/colorscheme/providers.tsx b/src/console/colorscheme/providers.tsx
new file mode 100644
index 0000000..810c8e0
--- /dev/null
+++ b/src/console/colorscheme/providers.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import ColorScheme from "../../shared/ColorScheme";
+import { DarkTheme, LightTheme } from "./theme";
+import { ColorSchemeContext, ColorSchemeUpdateContext } from "./contexts";
+import { ThemeProvider } from "styled-components";
+
+export const ColorSchemeProvider: React.FC = ({ children }) => {
+  const [colorscheme, setColorScheme] = React.useState(ColorScheme.System);
+  const theme = React.useMemo(() => {
+    if (colorscheme === ColorScheme.System) {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return DarkTheme;
+      }
+    } else if (colorscheme === ColorScheme.Dark) {
+      return DarkTheme;
+    }
+    return LightTheme;
+  }, [colorscheme]);
+
+  return (
+    <ColorSchemeContext.Provider value={colorscheme}>
+      <ColorSchemeUpdateContext.Provider value={setColorScheme}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      </ColorSchemeUpdateContext.Provider>
+    </ColorSchemeContext.Provider>
+  );
+};
+export default ColorSchemeProvider;
diff --git a/src/console/colorscheme/styled.tsx b/src/console/colorscheme/styled.tsx
new file mode 100644
index 0000000..12e10ec
--- /dev/null
+++ b/src/console/colorscheme/styled.tsx
@@ -0,0 +1,6 @@
+import baseStyled, { ThemedStyledInterface } from "styled-components";
+import { ThemeProperties } from "./theme";
+
+const styled = baseStyled as ThemedStyledInterface<ThemeProperties>;
+
+export default styled;
diff --git a/src/console/components/ColorSchemeProvider.tsx b/src/console/colorscheme/theme.ts
index bd63571..5c17190 100644
--- a/src/console/components/ColorSchemeProvider.tsx
+++ b/src/console/colorscheme/theme.ts
@@ -1,9 +1,4 @@
-import React from "react";
-import ColorScheme from "../../shared/ColorScheme";
-import { ThemeProvider } from "styled-components";
-import baseStyled, { ThemedStyledInterface } from "styled-components";
-
-type ThemeProperties = {
+export type ThemeProperties = {
   completionTitleBackground: string;
   completionTitleForeground: string;
   completionItemBackground: string;
@@ -50,27 +45,3 @@ export const DarkTheme: ThemeProperties = {
   consoleInfoBackground: "#052027",
   consoleInfoForeground: "#ffffff",
 };
-
-interface Props extends React.HTMLAttributes<HTMLElement> {
-  colorscheme: ColorScheme;
-}
-
-const ColorSchemeProvider: React.FC<Props> = ({ colorscheme, children }) => {
-  let theme = LightTheme;
-  if (colorscheme === ColorScheme.System) {
-    if (
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches
-    ) {
-      theme = DarkTheme;
-    }
-  } else if (colorscheme === ColorScheme.Dark) {
-    theme = DarkTheme;
-  }
-
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
-};
-
-export const styled = baseStyled as ThemedStyledInterface<ThemeProperties>;
-
-export default ColorSchemeProvider;
diff --git a/src/console/components/Console.tsx b/src/console/components/Console.tsx
index b97ed62..f6f4234 100644
--- a/src/console/components/Console.tsx
+++ b/src/console/components/Console.tsx
@@ -3,37 +3,29 @@ import FindPrompt from "./FindPrompt";
 import CommandPrompt from "./CommandPrompt";
 import InfoMessage from "./InfoMessage";
 import ErrorMessage from "./ErrorMessage";
-import * as consoleActions from "../../console/actions/console";
-import ColorSchemeProvider from "./ColorSchemeProvider";
 import AppContext from "./AppContext";
+import { useColorSchemeRefresh } from "../colorscheme/hooks";
 
 const Console: React.FC = () => {
-  const { state, dispatch } = React.useContext(AppContext);
+  const { state } = React.useContext(AppContext);
+  const refreshColorScheme = useColorSchemeRefresh();
 
   React.useEffect(() => {
-    dispatch(consoleActions.setColorScheme());
+    refreshColorScheme();
   }, []);
 
-  const ele = (() => {
-    switch (state.mode) {
-      case "command":
-        return <CommandPrompt />;
-      case "find":
-        return <FindPrompt />;
-      case "info":
-        return <InfoMessage>{state.messageText}</InfoMessage>;
-      case "error":
-        return <ErrorMessage>{state.messageText}</ErrorMessage>;
-      default:
-        return null;
-    }
-  })();
-
-  return (
-    <ColorSchemeProvider colorscheme={state.colorscheme}>
-      {ele}
-    </ColorSchemeProvider>
-  );
+  switch (state.mode) {
+    case "command":
+      return <CommandPrompt />;
+    case "find":
+      return <FindPrompt />;
+    case "info":
+      return <InfoMessage>{state.messageText}</InfoMessage>;
+    case "error":
+      return <ErrorMessage>{state.messageText}</ErrorMessage>;
+    default:
+      return null;
+  }
 };
 
 export default Console;
diff --git a/src/console/components/ErrorMessage.tsx b/src/console/components/ErrorMessage.tsx
index 93b049b..f8d5ae7 100644
--- a/src/console/components/ErrorMessage.tsx
+++ b/src/console/components/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled } from "./ColorSchemeProvider";
+import styled from "../colorscheme/styled";
 
 const Wrapper = styled.p`
   border-top: 1px solid gray;
diff --git a/src/console/components/InfoMessage.tsx b/src/console/components/InfoMessage.tsx
index 02ad27d..ccd9bcf 100644
--- a/src/console/components/InfoMessage.tsx
+++ b/src/console/components/InfoMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled } from "./ColorSchemeProvider";
+import styled from "../colorscheme/styled";
 
 const Wrapper = styled.p`
   border-top: 1px solid gray;
diff --git a/src/console/components/console/CompletionItem.tsx b/src/console/components/console/CompletionItem.tsx
index 7313491..2de1375 100644
--- a/src/console/components/console/CompletionItem.tsx
+++ b/src/console/components/console/CompletionItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled } from "../ColorSchemeProvider";
+import styled from "../../colorscheme/styled";
 
 const Container = styled.li<{
   shown: boolean;
diff --git a/src/console/components/console/CompletionTitle.tsx b/src/console/components/console/CompletionTitle.tsx
index a8e8a54..4018b3f 100644
--- a/src/console/components/console/CompletionTitle.tsx
+++ b/src/console/components/console/CompletionTitle.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled } from "../ColorSchemeProvider";
+import styled from "../../colorscheme/styled";
 
 const Li = styled.li<{ shown: boolean }>`
   display: ${({ shown }) => (shown ? "display" : "none")};
diff --git a/src/console/components/console/Input.tsx b/src/console/components/console/Input.tsx
index 7850f43..442bd30 100644
--- a/src/console/components/console/Input.tsx
+++ b/src/console/components/console/Input.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { styled } from "../ColorSchemeProvider";
+import styled from "../../colorscheme/styled";
 
 const Container = styled.div`
   background-color: ${({ theme }) => theme.commandBackground};
diff --git a/src/console/index.tsx b/src/console/index.tsx
index 4a5368b..71f2a27 100644
--- a/src/console/index.tsx
+++ b/src/console/index.tsx
@@ -6,6 +6,7 @@ import AppContext from "./components/AppContext";
 import "./index.css";
 import React from "react";
 import ReactDOM from "react-dom";
+import ColorSchemeProvider from "./colorscheme/providers";
 
 const wrapAsync = <T extends unknown>(
   dispatch: React.Dispatch<T>
@@ -48,7 +49,9 @@ const RootComponent: React.FC = () => {
 
   return (
     <AppContext.Provider value={{ state, dispatch: wrapAsync(dispatch) }}>
-      <Console />
+      <ColorSchemeProvider>
+        <Console />
+      </ColorSchemeProvider>
     </AppContext.Provider>
   );
 };
diff --git a/src/console/reducers/console.ts b/src/console/reducers/console.ts
index 3acd0e9..37f1efc 100644
--- a/src/console/reducers/console.ts
+++ b/src/console/reducers/console.ts
@@ -1,8 +1,6 @@
-import ColorScheme from "../../shared/ColorScheme";
 import {
   CONSOLE_HIDE,
   CONSOLE_HIDE_COMMAND,
-  CONSOLE_SET_COLORSCHEME,
   CONSOLE_SET_CONSOLE_TEXT,
   CONSOLE_SHOW_COMMAND,
   CONSOLE_SHOW_ERROR,
@@ -15,14 +13,12 @@ export interface State {
   mode: string;
   messageText: string;
   consoleText: string;
-  colorscheme: ColorScheme;
 }
 
 export const defaultState = {
   mode: "",
   messageText: "",
   consoleText: "",
-  colorscheme: ColorScheme.System,
 };
 
 // eslint-disable-next-line max-lines-per-function
@@ -53,11 +49,6 @@ export default function reducer(
       };
     case CONSOLE_SET_CONSOLE_TEXT:
       return { ...state, consoleText: action.consoleText };
-    case CONSOLE_SET_COLORSCHEME:
-      return {
-        ...state,
-        colorscheme: action.colorscheme,
-      };
     default:
       return state;
   }