Merge pull request #767 from taboowiths/feat/#747

[view] 브랜치 변경 시 테마 초기화되는 문제 해결 및 코드 리팩토링

packages/view/src/App.tsx

@@ -11,6 +11,7 @@ import { useAnalayzedData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore } from "store";
+import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -40,7 +41,7 @@ const App = () => {
   if (loading) {
     return (
       <BounceLoader
-        color="#ff8272"
+        color={THEME_INFO[window.theme as keyof typeof THEME_INFO].colors.primary}
         loading={loading}
         cssOverride={{
           position: "fixed",

packages/view/src/components/ThemeSelector/ThemeSelector.const.ts

@@ -0,0 +1,49 @@
+import type { ThemeInfo } from "./ThemeSelector.type";
+
+export const THEME_INFO: ThemeInfo = {
+  githru: {
+    title: "Githru",
+    value: "githru",
+    colors: {
+      primary: "#e06091",
+      secondary: "#8840bb",
+      tertiary: "#ffd08a",
+    },
+  },
+  "hacker-blue": {
+    title: "Hacker Blue",
+    value: "hacker-blue",
+    colors: {
+      primary: "#456cf7",
+      secondary: "#3f4c73",
+      tertiary: "#6c60f0",
+    },
+  },
+  aqua: {
+    title: "Aqua",
+    value: "aqua",
+    colors: {
+      primary: "#51decd",
+      secondary: "#0687a3",
+      tertiary: "#a7ffff",
+    },
+  },
+  "cotton-candy": {
+    title: "Cotton Candy",
+    value: "cotton-candy",
+    colors: {
+      primary: "#ffcccb",
+      secondary: "#feffd1",
+      tertiary: "#a39aeb",
+    },
+  },
+  mono: {
+    title: "Mono",
+    value: "mono",
+    colors: {
+      primary: "#68788f",
+      secondary: "#3a4776",
+      tertiary: "#9aaed1",
+    },
+  },
+};

packages/view/src/components/ThemeSelector/ThemeSelector.tsx

@@ -3,82 +3,19 @@ import "./ThemeSelector.scss";
 import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
 import CloseIcon from "@mui/icons-material/Close";
 
-import { setCustomTheme } from "services";
+import { sendUpdateThemeCommand } from "services";
 
-type ThemeInfo = {
-  title: string;
-  value: string;
-  colors: {
-    primary: string;
-    secondary: string;
-    tertiary: string;
-  };
-};
+import { THEME_INFO } from "./ThemeSelector.const";
+import type { ThemeInfo } from "./ThemeSelector.type";
 
-type ThemeIconsProps = ThemeInfo & {
+type ThemeIconsProps = ThemeInfo[keyof ThemeInfo] & {
   onClick: () => void;
 };
 
-const themeInfo: ThemeInfo[] = [
-  {
-    title: "Githru",
-    value: "githru",
-    colors: {
-      primary: "#e06091",
-      secondary: "#8840bb",
-      tertiary: "#ffd08a",
-    },
-  },
-  {
-    title: "Hacker Blue",
-    value: "hacker-blue",
-    colors: {
-      primary: "#456cf7",
-      secondary: "#3f4c73",
-      tertiary: "#6c60f0",
-    },
-  },
-  {
-    title: "Aqua",
-    value: "aqua",
-    colors: {
-      primary: "#51decd",
-      secondary: "#0687a3",
-      tertiary: "#a7ffff",
-    },
-  },
-  {
-    title: "Cotton Candy",
-    value: "cotton-candy",
-    colors: {
-      primary: "#ffcccb",
-      secondary: "#feffd1",
-      tertiary: "#a39aeb",
-    },
-  },
-
-  {
-    title: "Mono",
-    value: "mono",
-    colors: {
-      primary: "#68788f",
-      secondary: "#3a4776",
-      tertiary: "#9aaed1",
-    },
-  },
-];
-
 const ThemeIcons = ({ title, value, colors, onClick }: ThemeIconsProps) => {
-  const [selectedItem, setSelectedItem] = useState<string>("");
-
-  useEffect(() => {
-    const selectedTheme = document.documentElement.getAttribute("custom-type");
-    if (selectedTheme) setSelectedItem(selectedTheme);
-  }, []);
-
   return (
     <div
-      className={`theme-icon${selectedItem === value ? "--selected" : ""}`}
+      className={`theme-icon${window.theme === value ? "--selected" : ""}`}
       onClick={onClick}
       role="presentation"
     >
@@ -101,8 +38,9 @@ const ThemeSelector = () => {
   const themeSelectorRef = useRef<HTMLDivElement>(null);
 
   const handleTheme = (value: string) => {
-    setCustomTheme(value);
-    document.documentElement.setAttribute("custom-type", value);
+    sendUpdateThemeCommand(value);
+    window.theme = value;
+    document.documentElement.setAttribute("theme", value);
   };
 
   useEffect(() => {
@@ -118,7 +56,7 @@ const ThemeSelector = () => {
   }, []);
 
   useEffect(() => {
-    document.documentElement.setAttribute("custom-type", window.theme);
+    document.documentElement.setAttribute("theme", window.theme);
   }, []);
 
   return (
@@ -137,7 +75,7 @@ const ThemeSelector = () => {
             />
           </div>
           <div className="theme-selector__list">
-            {themeInfo.map((theme) => (
+            {Object.entries(THEME_INFO).map(([_, theme]) => (
               <ThemeIcons
                 key={theme.value}
                 {...theme}

packages/view/src/components/ThemeSelector/ThemeSelector.type.ts

@@ -0,0 +1,11 @@
+export type ThemeInfo = {
+  [key in "githru" | "hacker-blue" | "aqua" | "cotton-candy" | "mono"]: {
+    title: string;
+    value: key;
+    colors: {
+      primary: string;
+      secondary: string;
+      tertiary: string;
+    };
+  };
+};

packages/view/src/ide/FakeIDEAdapter.ts

@@ -63,10 +63,10 @@ export default class FakeIDEAdapter implements IDEPort {
     this.sendMessageToMe(message);
   }
 
-  public setCustomTheme(color: string) {
-    sessionStorage.setItem("PRIMARY_COLOR", color);
+  public sendUpdateThemeMessage(theme: string) {
+    sessionStorage.setItem("THEME", theme);
     const message: IDEMessage = {
-      command: "updateCustomTheme",
+      command: "updateTheme",
     };
     this.sendMessageToMe(message);
   }
@@ -85,7 +85,7 @@ export default class FakeIDEAdapter implements IDEPort {
           command,
           payload: JSON.stringify(fakeBranchList),
         };
-      case "updateCustomTheme":
+      case "updateTheme":
         return {
           command,
           payload: sessionStorage.getItem("CUSTOM_THEME") as string,

packages/view/src/ide/IDEPort.ts

@@ -11,5 +11,5 @@ export default interface IDEPort {
   sendFetchAnalyzedDataMessage: (payload?: string) => void;
   sendFetchBranchListMessage: () => void;
   sendFetchGithubInfo: () => void;
-  setCustomTheme: (theme: string) => void;
+  sendUpdateThemeMessage: (theme: string) => void;
 }

packages/view/src/ide/VSCodeIDEAdapter.ts

@@ -58,9 +58,9 @@ export default class VSCodeIDEAdapter implements IDEPort {
     this.sendMessageToIDE(message);
   }
 
-  public setCustomTheme(theme: string) {
+  public sendUpdateThemeMessage(theme: string) {
     const message: IDEMessage = {
-      command: "updateCustomTheme",
+      command: "updateTheme",
       payload: JSON.stringify({ theme }),
     };
     this.sendMessageToIDE(message);

packages/view/src/services/index.ts

@@ -2,9 +2,9 @@ import { container } from "tsyringe";
 
 import type IDEPort from "ide/IDEPort";
 
-export const setCustomTheme = (color: string) => {
+export const sendUpdateThemeCommand = (theme: string) => {
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
-  ideAdapter.setCustomTheme(color);
+  ideAdapter.sendUpdateThemeMessage(theme);
 };
 
 export const sendFetchAnalyzedDataCommand = (selectedBranch?: string) => {

packages/view/src/styles/_colors.scss

@@ -5,39 +5,39 @@ $color-medium-gray: #757880;
 $color-dark-gray: #3c4048;
 $color-background: #222324;
 
-html[custom-type="githru"] {
+html[theme="githru"] {
   --color-primary: #e06091;
   --color-secondary: #8840bb;
   --color-tertiary: #ffd08a;
   --color-success: #07bebe;
   --color-failed: #ee2479;
 }
 
-html[custom-type="hacker-blue"] {
+html[theme="hacker-blue"] {
   --color-primary: #456cf7;
   --color-secondary: #3f4c73;
   --color-tertiary: #6c60f0;
   --color-success: #1fc7a9;
   --color-failed: #ee2479;
 }
 
-html[custom-type="aqua"] {
+html[theme="aqua"] {
   --color-primary: #51decd;
   --color-secondary: #0687a3;
   --color-tertiary: #a7ffff;
   --color-success: #008cde;
   --color-failed: #ee2479;
 }
 
-html[custom-type="cotton-candy"] {
+html[theme="cotton-candy"] {
   --color-primary: #ffcccb;
   --color-secondary: #feffd1;
   --color-tertiary: #a39aeb;
   --color-success: #7ad5c4;
   --color-failed: #ff8bbc;
 }
 
-html[custom-type="mono"] {
+html[theme="mono"] {
   --color-primary: #68788f;
   --color-secondary: #3a4776;
   --color-tertiary: #9aaed1;

packages/view/src/types/IDEMessage.ts

@@ -13,4 +13,4 @@ export type IDEMessageCommandNames =
   | "fetchBranchList"
   | "fetchCurrentBranch"
   | "fetchGithubInfo"
-  | "updateCustomTheme";
+  | "updateTheme";

packages/vscode/src/setting-repository.ts

@@ -17,17 +17,17 @@ export const deleteGithubToken = async (secrets: vscode.SecretStorage) => {
   return await secrets.delete(SETTING_PROPERTY_NAMES.GITHUB_TOKEN);
 };
 
-export const setTheme = async (newTheme: string) => {
+export const setTheme = (theme: string) => {
   const configuration = vscode.workspace.getConfiguration();
-  configuration.update(SETTING_PROPERTY_NAMES.THEME, newTheme);
+  configuration.update(SETTING_PROPERTY_NAMES.THEME, theme);
 };
 
-export const getTheme = async (): Promise<string> => {
+export const getTheme = () => {
   const configuration = vscode.workspace.getConfiguration();
   const theme = configuration.get(SETTING_PROPERTY_NAMES.THEME) as string;
 
   if (!theme) {
-    await setTheme("githru");
+    setTheme("githru");
     return "githru";
   }
   return theme;

packages/vscode/src/webview-loader.ts

@@ -85,10 +85,10 @@ export default class WebviewLoader implements vscode.Disposable {
           });
         }
 
-        if (command === "updateCustomTheme") {
-          const colorCode = payload && JSON.parse(payload);
-          if (colorCode.theme) {
-            setTheme(colorCode.theme);
+        if (command === "updateTheme") {
+          const themeInfo = payload && JSON.parse(payload);
+          if (themeInfo.theme) {
+            setTheme(themeInfo.theme);
           }
         }
       } catch (e) {
@@ -100,7 +100,7 @@ export default class WebviewLoader implements vscode.Disposable {
     //   this.dispose();
     //   throw new Error("Project not connected to Git.");
     // }
-    this.setWebviewContent();
+    this._panel.webview.html = this.getWebviewContent(this._panel.webview);
   }
 
   dispose() {
@@ -119,12 +119,12 @@ export default class WebviewLoader implements vscode.Disposable {
     });
   }
 
-  private async getWebviewContent(webview: vscode.Webview): Promise<string> {
+  private getWebviewContent(webview: vscode.Webview) {
     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 theme = await getTheme();
+    const theme = getTheme();
     const returnString = `
             <!DOCTYPE html>
             <html lang="en">
@@ -149,12 +149,14 @@ export default class WebviewLoader implements vscode.Disposable {
     return returnString;
   }
 
-  private async setWebviewContent() {
+  public setGlobalOwnerAndRepo(owner: string, repo: string) {
     if (this._panel) {
-      this._panel.webview.html = await this.getWebviewContent(this._panel.webview);
+      this._panel.webview.postMessage({
+        command: "setGlobalOwnerAndRepo",
+        data: { owner, repo },
+      });
     }
   }
-
 }
 
 type GithruFetcher<D = unknown, P extends unknown[] = []> = (...params: P) => Promise<D>;