[view] Remote Git config에서 owner, repo 정보를 View에서 받는 방식 수정

packages/view/src/App.tsx

@@ -10,45 +10,32 @@ import type IDEPort from "ide/IDEPort";
 import { useAnalayzedData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
-import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
-import { useBranchStore, useDataStore, useLoadingStore, useOwnerStore, useRepoStore } from "store";
+import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore } from "store";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
   const { handleChangeAnalyzedData } = useAnalayzedData();
   const filteredData = useDataStore((state) => state.filteredData);
   const { handleChangeBranchList } = useBranchStore();
+  const { handleGithubInfo } = useGithubInfo();
   const { loading, setLoading } = useLoadingStore();
-  const { setOwner } = useOwnerStore();
-  const { setRepo } = useRepoStore();
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
 
   useEffect(() => {
     if (initRef.current === false) {
       const callbacks: IDESentEvents = {
         handleChangeAnalyzedData,
         handleChangeBranchList,
+        handleGithubInfo,
       };
       setLoading(true);
       ideAdapter.addIDESentEventListener(callbacks);
       ideAdapter.sendFetchAnalyzedDataMessage();
       ideAdapter.sendFetchBranchListMessage();
+      ideAdapter.sendFetchGithubInfo();
       initRef.current = true;
     }
-  }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent<RemoteGitHubInfo>) => {
-      const message = event.data;
-      if (message.data) {
-        setOwner(message.data.owner);
-        setRepo(message.data.repo);
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, []);
+  }, [handleChangeAnalyzedData, handleChangeBranchList, handleGithubInfo, ideAdapter, setLoading]);
 
   if (loading) {
     return (

packages/view/src/components/Detail/Detail.tsx

@@ -11,7 +11,7 @@ import {
 import { Tooltip } from "@mui/material";
 
 import { Author } from "components/@common/Author";
-import { useOwnerStore, useRepoStore } from "store";
+import { useGithubInfo } from "store";
 
 import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
@@ -56,8 +56,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
   const commitNodeListInCluster =
     selectedData?.filter((selected) => selected.commitNodeList[0].clusterId === clusterId)[0].commitNodeList ?? [];
   const { commitNodeList, toggle, handleToggle } = useCommitListHide(commitNodeListInCluster);
-  const { owner } = useOwnerStore();
-  const { repo } = useRepoStore();
+  const { owner, repo } = useGithubInfo();
   const isShow = commitNodeListInCluster.length > FIRST_SHOW_NUM;
   const handleCommitIdCopy = (id: string) => async () => {
     navigator.clipboard.writeText(id);

packages/view/src/components/VerticalClusterList/Summary/Content/Content.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
 import ArrowDropDownCircleRoundedIcon from "@mui/icons-material/ArrowDropDownCircleRounded";
 
-import { useOwnerStore, useRepoStore } from "store";
+import { useGithubInfo } from "store";
 
 import type { ContentProps } from "../Summary.type";
 
 const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
-  const { owner } = useOwnerStore();
-  const { repo } = useRepoStore();
+  const { owner, repo } = useGithubInfo();
   const [linkedStr, setLinkedStr] = useState<React.ReactNode[]>([]);
 
   useEffect(() => {

packages/view/src/ide/FakeIDEAdapter.ts

@@ -20,6 +20,8 @@ export default class FakeIDEAdapter implements IDEPort {
           return events.handleChangeAnalyzedData(payload ? JSON.parse(payload) : undefined);
         case "fetchBranchList":
           return events.handleChangeBranchList(payload ? JSON.parse(payload) : undefined);
+        case "fetchGithubInfo":
+          return events.handleGithubInfo(payload ? JSON.parse(payload) : undefined);
         default:
           console.log("Unknown Message");
       }
@@ -54,6 +56,13 @@ export default class FakeIDEAdapter implements IDEPort {
     this.sendMessageToMe(message);
   }
 
+  public sendFetchGithubInfo() {
+    const message: IDEMessage = {
+      command: "fetchGithubInfo",
+    };
+    this.sendMessageToMe(message);
+  }
+
   public setCustomTheme(color: string) {
     sessionStorage.setItem("PRIMARY_COLOR", color);
     const message: IDEMessage = {

packages/view/src/ide/IDEPort.ts

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

packages/view/src/ide/VSCodeIDEAdapter.ts

@@ -19,6 +19,8 @@ export default class VSCodeIDEAdapter implements IDEPort {
           return events.handleChangeAnalyzedData(payloadData);
         case "fetchBranchList":
           return events.handleChangeBranchList(payloadData);
+        case "fetchGithubInfo":
+          return events.handleGithubInfo(payloadData);
         default:
           console.log("Unknown Message");
       }
@@ -49,6 +51,13 @@ export default class VSCodeIDEAdapter implements IDEPort {
     this.sendMessageToIDE(message);
   }
 
+  public sendFetchGithubInfo() {
+    const message: IDEMessage = {
+      command: "fetchGithubInfo",
+    };
+    this.sendMessageToIDE(message);
+  }
+
   public setCustomTheme(theme: string) {
     const message: IDEMessage = {
       command: "updateCustomTheme",

packages/view/src/store/githubInfo.ts

@@ -0,0 +1,20 @@
+import { create } from "zustand";
+
+export type githubInfo = {
+  owner: string;
+  repo: string;
+};
+
+export const useGithubInfo = create<
+  githubInfo & {
+    handleGithubInfo: (repoInfo: githubInfo) => void;
+  }
+>((set) => ({
+  owner: "githru",
+  repo: "githru-vscode-ext",
+  handleGithubInfo: (repoInfo: githubInfo) => {
+    if (repoInfo) {
+      set({ owner: repoInfo.owner, repo: repoInfo.repo });
+    }
+  },
+}));

packages/view/src/store/index.ts

@@ -1,6 +1,5 @@
 export * from "./loading";
 export * from "./filteredRange";
 export * from "./branch";
-export * from "./repo";
-export * from "./owner";
+export * from "./githubInfo";
 export * from "./data";

packages/view/src/types/IDEMessage.ts

@@ -12,4 +12,5 @@ export type IDEMessageCommandNames =
   | "fetchAnalyzedData"
   | "fetchBranchList"
   | "fetchCurrentBranch"
+  | "fetchGithubInfo"
   | "updateCustomTheme";

packages/view/src/types/IDESentEvents.ts

@@ -1,8 +1,9 @@
-import type { BranchListPayload } from "store";
+import type { BranchListPayload, githubInfo } from "store";
 import type { ClusterNode } from "types";
 
 // triggered by ide response
 export type IDESentEvents = {
   handleChangeAnalyzedData: (analyzedData: ClusterNode[]) => void;
   handleChangeBranchList: (branches: BranchListPayload) => void;
+  handleGithubInfo: (repoInfo: githubInfo) => void;
 };

packages/vscode/src/extension.ts

@@ -58,6 +58,8 @@ export async function activate(context: vscode.ExtensionContext) {
       }
 
       const fetchBranches = async () => await getBranches(gitPath, currentWorkspacePath);
+      const gitConfig = await getGitConfig(gitPath, currentWorkspacePath, "origin");
+      const fetchGithubInfo = async () => getRepo(gitConfig);
 
       const fetchCurrentBranch = async () => {
         let branchName;
@@ -77,10 +79,7 @@ export async function activate(context: vscode.ExtensionContext) {
       const initialBaseBranchName = await fetchCurrentBranch();
       const fetchClusterNodes = async (baseBranchName = initialBaseBranchName) => {
         const gitLog = await getGitLog(gitPath, currentWorkspacePath);
-        const gitConfig = await getGitConfig(gitPath, currentWorkspacePath, "origin");
-
         const { owner, repo: initialRepo } = getRepo(gitConfig);
-        webLoader.setGlobalOwnerAndRepo(owner, initialRepo);
         const repo = initialRepo[0];
         const engine = new AnalysisEngine({
           isDebugMode: true,
@@ -100,6 +99,7 @@ export async function activate(context: vscode.ExtensionContext) {
         fetchClusterNodes,
         fetchBranches,
         fetchCurrentBranch,
+        fetchGithubInfo,
       });
 
       currentPanel = webLoader.getPanel();

packages/vscode/src/webview-loader.ts

@@ -14,7 +14,7 @@
     context: vscode.ExtensionContext,
     fetcher: GithruFetcherMap
   ) {
-    const { fetchClusterNodes, fetchBranches, fetchCurrentBranch } = fetcher;
+    const { fetchClusterNodes, fetchBranches, fetchCurrentBranch, fetchGithubInfo } = fetcher;
     const viewColumn = vscode.ViewColumn.One;
 
     //캐시 초기화
@@ -31,13 +31,13 @@
 
     const icon_path = vscode.Uri.file(path.join(this.extensionPath, "images", "logo.png"));
     this._panel.iconPath = icon_path;
     let analyzedData;
     this._panel.webview.onDidReceiveMessage(async (message: { command: string; payload?: string }) => {
       try {
         const { command, payload } = message;
 
         if (command === "fetchAnalyzedData" || command === "refresh") {
           const baseBranchName = (payload && JSON.parse(payload)) ?? (await fetchCurrentBranch());
           try {
             const baseBranchName = (payload && JSON.parse(payload)) ?? (await fetchCurrentBranch());
             const storedAnalyzedData = context.workspaceState.get<ClusterNode[]>(
@@ -76,6 +76,14 @@
             payload: branches,
           });
         }
+
+        if (command === "fetchGithubInfo") {
+          const githubInfo = await fetchGithubInfo();
+          await this.respondToMessage({ 
+            ...message,
+            payload: githubInfo,
+          });
+        }
 
         if (command === "updateCustomTheme") {
           const colorCode = payload && JSON.parse(payload);
@@ -147,19 +155,12 @@
     }
   }
 
-  public setGlobalOwnerAndRepo(owner: string, repo: string) {
-    if (this._panel) {
-      this._panel.webview.postMessage({
-        command: "setGlobalOwnerAndRepo",
-        data: { owner, repo },
-      });
-    }
-  }
 }
 
 type GithruFetcher<D = unknown, P extends unknown[] = []> = (...params: P) => Promise<D>;
 type GithruFetcherMap = {
   fetchClusterNodes: GithruFetcher<ClusterNode[], [string]>;
   fetchBranches: GithruFetcher<{ branchList: string[]; head: string | null }>;
   fetchCurrentBranch: GithruFetcher<string>;
+  fetchGithubInfo: GithruFetcher<{ owner: string; repo: string }>;
 };