Merge pull request #760 from taboowiths/feat/#752

[view] Theme Selector 테마 전역 저장 및 코드 리팩토링
githru · Oct 10, 2024 · 8f28b4e · 8f28b4e
2 parents 615f458 + 7bd6aa5
commit 8f28b4e
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 79 deletions.
diff --git a/packages/view/public/index.html b/packages/view/public/index.html
@@ -1,11 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
     <script>
-      window.isProduction = false;   
-      window.primaryColor = '#ffbbff';                     
+      window.isProduction = false;
+      window.theme = "githru";
     </script>
     <title>Githru</title>
   </head>

diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.tsx b/packages/view/src/components/ThemeSelector/ThemeSelector.tsx
@@ -1,9 +1,25 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import "./ThemeSelector.scss";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import CloseIcon from "@mui/icons-material/Close";
 
-const themes = [
+import { setCustomTheme } from "services";
+
+type ThemeInfo = {
+  title: string;
+  value: string;
+  colors: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+  };
+};
+
+type ThemeIconsProps = ThemeInfo & {
+  onClick: () => void;
+};
+
+const themeInfo: ThemeInfo[] = [
   {
     title: "Githru",
     value: "githru",
@@ -52,83 +68,82 @@ const themes = [
   },
 ];
 
-type ThemeIconsProps = {
-  title: string;
-  value: string;
-  colors: {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-  };
-  onClick: () => void;
-};
-
 const ThemeIcons = ({ title, value, colors, onClick }: ThemeIconsProps) => {
-  const [isSelected, setIsSelected] = useState<string>("");
+  const [selectedItem, setSelectedItem] = useState<string>("");
 
   useEffect(() => {
     const selectedTheme = document.documentElement.getAttribute("custom-type");
-    if (selectedTheme) setIsSelected(selectedTheme);
+    if (selectedTheme) setSelectedItem(selectedTheme);
   }, []);
 
   return (
     <div
-      className={`theme-icon${isSelected === value ? "--selected" : ""}`}
+      className={`theme-icon${selectedItem === value ? "--selected" : ""}`}
       onClick={onClick}
       role="presentation"
     >
       <div className="theme-icon__container">
-        <div
-          className="theme-icon__color"
-          style={{ backgroundColor: colors.primary }}
-        />
-        <div
-          className="theme-icon__color"
-          style={{ backgroundColor: colors.secondary }}
-        />
-        <div
-          className="theme-icon__color"
-          style={{ backgroundColor: colors.tertiary }}
-        />
+        {Object.values(colors).map((color, index) => (
+          <div
+            key={Number(index)}
+            className="theme-icon__color"
+            style={{ backgroundColor: color }}
+          />
+        ))}
       </div>
       <p className="theme-icon__title">{title}</p>
     </div>
   );
 };
 
 const ThemeSelector = () => {
-  const [open, setOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const themeSelectorRef = useRef<HTMLDivElement>(null);
 
   const handleTheme = (value: string) => {
+    setCustomTheme(value);
     document.documentElement.setAttribute("custom-type", value);
   };
 
   useEffect(() => {
-    document.documentElement.setAttribute("custom-type", "githru");
+    const handleClickOutside = (event: MouseEvent) => {
+      if (themeSelectorRef.current && !themeSelectorRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.setAttribute("custom-type", window.theme);
   }, []);
 
   return (
-    <div className="theme-selector">
-      <AutoAwesomeIcon onClick={() => setOpen(true)} />
-      {open && (
+    <div
+      className="theme-selector"
+      ref={themeSelectorRef}
+    >
+      <AutoAwesomeIcon onClick={() => setIsOpen(true)} />
+      {isOpen && (
         <div className="theme-selector__container">
           <div className="theme-selector__header">
             <p>Theme</p>
             <CloseIcon
               fontSize="small"
-              onClick={() => setOpen(false)}
+              onClick={() => setIsOpen(false)}
             />
           </div>
           <div className="theme-selector__list">
-            {themes.map((theme) => (
+            {themeInfo.map((theme) => (
               <ThemeIcons
                 key={theme.value}
-                title={theme.title}
-                value={theme.value}
-                colors={theme.colors}
+                {...theme}
                 onClick={() => {
                   handleTheme(theme.value);
-                  setOpen(false);
+                  setIsOpen(false);
                 }}
               />
             ))}

diff --git a/packages/view/src/ide/FakeIDEAdapter.ts b/packages/view/src/ide/FakeIDEAdapter.ts
@@ -54,10 +54,10 @@ export default class FakeIDEAdapter implements IDEPort {
     this.sendMessageToMe(message);
   }
 
-  public setPrimaryColor(color: string) {
+  public setCustomTheme(color: string) {
     sessionStorage.setItem("PRIMARY_COLOR", color);
     const message: IDEMessage = {
-      command: "updatePrimaryColor",
+      command: "updateCustomTheme",
     };
     this.sendMessageToMe(message);
   }
@@ -76,10 +76,10 @@ export default class FakeIDEAdapter implements IDEPort {
           command,
           payload: JSON.stringify(fakeBranchList),
         };
-      case "updatePrimaryColor":
+      case "updateCustomTheme":
         return {
           command,
-          payload: sessionStorage.getItem("PRIMARY_COLOR") as string,
+          payload: sessionStorage.getItem("CUSTOM_THEME") as string,
         };
       default:
         return {

diff --git a/packages/view/src/ide/IDEPort.ts b/packages/view/src/ide/IDEPort.ts
@@ -10,5 +10,5 @@ export default interface IDEPort {
   sendRefreshDataMessage: (payload?: string) => void;
   sendFetchAnalyzedDataMessage: (payload?: string) => void;
   sendFetchBranchListMessage: () => void;
-  setPrimaryColor: (color: string) => void;
+  setCustomTheme: (theme: string) => void;
 }
diff --git a/packages/view/src/ide/VSCodeIDEAdapter.ts b/packages/view/src/ide/VSCodeIDEAdapter.ts
@@ -49,10 +49,10 @@ export default class VSCodeIDEAdapter implements IDEPort {
     this.sendMessageToIDE(message);
   }
 
-  public setPrimaryColor(color: string) {
+  public setCustomTheme(theme: string) {
     const message: IDEMessage = {
-      command: "updatePrimaryColor",
-      payload: JSON.stringify({ primary: color }),
+      command: "updateCustomTheme",
+      payload: JSON.stringify({ theme }),
     };
     this.sendMessageToIDE(message);
   }

diff --git a/packages/view/src/services/index.ts b/packages/view/src/services/index.ts
@@ -2,9 +2,9 @@ import { container } from "tsyringe";
 
 import type IDEPort from "ide/IDEPort";
 
-export const setPrimaryColor = (color: string) => {
+export const setCustomTheme = (color: string) => {
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-  ideAdapter.setPrimaryColor(color);
+  ideAdapter.setCustomTheme(color);
 };
 
 export const sendFetchAnalyzedDataCommand = (selectedBranch?: string) => {

diff --git a/packages/view/src/types/IDEMessage.ts b/packages/view/src/types/IDEMessage.ts
@@ -12,4 +12,4 @@ export type IDEMessageCommandNames =
   | "fetchAnalyzedData"
   | "fetchBranchList"
   | "fetchCurrentBranch"
-  | "updatePrimaryColor";
+  | "updateCustomTheme";
diff --git a/packages/view/src/types/custom.d.ts b/packages/view/src/types/custom.d.ts
@@ -3,7 +3,7 @@ interface Window {
   githruNodesData: unknown;
   githruBranchesData: unknown;
   isProduction: boolean;
-  primaryColor: string;
+  theme: string;
 }
 
 declare module "*.svg" {

diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -62,10 +62,10 @@
     "configuration": {
       "title": "Githru",
       "properties": {
-        "githru.color.primary": {
+        "githru.theme": {
           "type": "string",
-          "default": "#ff8272",
-          "description": "Insert your primary color."
+          "default": "githru",
+          "description": "Insert your theme name: githru, hacker-blue, aqua, cotton-candy, mono"
         }
       }
     }

diff --git a/packages/vscode/src/setting-repository.ts b/packages/vscode/src/setting-repository.ts
@@ -2,7 +2,7 @@ import * as vscode from "vscode";
 
 const SETTING_PROPERTY_NAMES = {
   GITHUB_TOKEN: "githru.github.token",
-  PRIMARY_COLOR: "githru.color.primary",
+  THEME: "githru.theme",
 };
 
 export const getGithubToken = async (secrets: vscode.SecretStorage) => {
@@ -14,22 +14,21 @@ export const setGithubToken = async (secrets: vscode.SecretStorage, newGithubTok
 };
 
 export const deleteGithubToken = async (secrets: vscode.SecretStorage) => {
-    return await secrets.delete(SETTING_PROPERTY_NAMES.GITHUB_TOKEN);
-}
+  return await secrets.delete(SETTING_PROPERTY_NAMES.GITHUB_TOKEN);
+};
 
-export const setPrimaryColor = (color: string) => {
+export const setTheme = async (newTheme: string) => {
   const configuration = vscode.workspace.getConfiguration();
-  configuration.update(SETTING_PROPERTY_NAMES.PRIMARY_COLOR, color);
+  configuration.update(SETTING_PROPERTY_NAMES.THEME, newTheme);
 };
 
-export const getPrimaryColor = (): string => {
+export const getTheme = async (): Promise<string> => {
   const configuration = vscode.workspace.getConfiguration();
-  const primaryColor = configuration.get(SETTING_PROPERTY_NAMES.PRIMARY_COLOR) as string;
+  const theme = configuration.get(SETTING_PROPERTY_NAMES.THEME) as string;
 
-  if (!primaryColor) {
-    configuration.update(SETTING_PROPERTY_NAMES.PRIMARY_COLOR, "#ff8272");
-    return "#ff8272";
-  } else {
-    return primaryColor;
+  if (!theme) {
+    await setTheme("githru");
+    return "githru";
   }
+  return theme;
 };
diff --git a/packages/vscode/src/webview-loader.ts b/packages/vscode/src/webview-loader.ts
@@ -1,7 +1,7 @@
 import * as path from "path";
 import * as vscode from "vscode";
 
-import { getPrimaryColor, setPrimaryColor } from "./setting-repository";
+import { getTheme, setTheme } from "./setting-repository";
 import type { ClusterNode } from "./types/Node";
 
 const ANALYZE_DATA_KEY = "memento_analyzed_data";
@@ -77,10 +77,10 @@ export default class WebviewLoader implements vscode.Disposable {
           });
         }
 
-        if (command === "updatePrimaryColor") {
+        if (command === "updateCustomTheme") {
           const colorCode = payload && JSON.parse(payload);
-          if (colorCode.primary) {
-            setPrimaryColor(colorCode.primary);
+          if (colorCode.theme) {
+            setTheme(colorCode.theme);
           }
         }
       } catch (e) {
@@ -92,7 +92,7 @@ export default class WebviewLoader implements vscode.Disposable {
     //   this.dispose();
     //   throw new Error("Project not connected to Git.");
     // }
-    this._panel.webview.html = this.getWebviewContent(this._panel.webview);
+    this.setWebviewContent();
   }
 
   dispose() {
@@ -111,13 +111,12 @@ export default class WebviewLoader implements vscode.Disposable {
     });
   }
 
-  private getWebviewContent(webview: vscode.Webview): string {
+  private async getWebviewContent(webview: vscode.Webview): Promise<string> {
     const reactAppPathOnDisk = vscode.Uri.file(path.join(this.extensionPath, "dist", "webviewApp.js"));
     const reactAppUri = webview.asWebviewUri(reactAppPathOnDisk);
     // const reactAppUri = reactAppPathOnDisk.with({ scheme: "vscode-resource" });
 
-    const primaryColor = getPrimaryColor();
-
+    const theme = await getTheme();
     const returnString = `
             <!DOCTYPE html>
             <html lang="en">
@@ -127,7 +126,7 @@ export default class WebviewLoader implements vscode.Disposable {
                     <title>githru-vscode-ext webview</title>
                     <script>
                         window.isProduction = true;   
-                        window.primaryColor = "${primaryColor}";                     
+                        window.theme = "${theme}";                       
                     </script>
                 </head>
                 <body>
@@ -141,6 +140,13 @@ export default class WebviewLoader implements vscode.Disposable {
         `;
     return returnString;
   }
+
+  private async setWebviewContent() {
+    if (this._panel) {
+      this._panel.webview.html = await this.getWebviewContent(this._panel.webview);
+    }
+  }
+
   public setGlobalOwnerAndRepo(owner: string, repo: string) {
     if (this._panel) {
       this._panel.webview.postMessage({