Merge pull request #569 from seungineer/#496-seunginner3

fix(view): 커밋 메시지의 PR or Issue number 하이퍼링크 버그

Author: seungineer

packages/view/src/App.tsx

@@ -9,6 +9,7 @@ import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
+import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
@@ -32,6 +33,18 @@ const App = () => {
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
+  const { setOwner, setRepo } = useGlobalData();
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<RemoteGitHubInfo>) => {
+      const message = event.data;
+      setOwner(message.data.owner);
+      setRepo(message.data.repo);
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
   if (loading) {
     return (
       <BounceLoader

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

@@ -1,33 +1,41 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { IoIosArrowDropdownCircle, IoIosArrowDropupCircle } from "react-icons/io";
 
+import { useGlobalData } from "hooks";
+
 import type { ContentProps } from "../Summary.type";
 
 const Content = ({ content, clusterId, selectedClusterId }: ContentProps) => {
-  const str: string = content.message;
-  const regex = /^(\(#[0-9]+\)|#[0-9]+)/g;
-  const tobeStr: string[] = str.split(" ");
+  const { owner, repo } = useGlobalData();
+  const [linkedStr, setLinkedStr] = useState<React.ReactNode[]>([]);
+
+  useEffect(() => {
+    const str: string = content.message;
+    const regex = /^(\(#[0-9]+\)|#[0-9]+)/g;
+    const tobeStr: string[] = str.split(" ");
 
-  const linkedStr = tobeStr.reduce((acc: React.ReactNode[], tokenStr: string) => {
-    const matches = tokenStr.match(regex); // #num 으로 결과가 나옴 ()가 결과에 포함되지 않음
-    if (matches) {
-      const matchedStr = matches[0];
-      const matchedStrNum: string = matchedStr.substring(1);
-      const linkIssues = `https://github.com/githru/githru-vscode-ext/issues/${matchedStrNum}`;
-      acc.push(
-        <a
-          href={linkIssues}
-          key={`issues-${matchedStr}`}
-        >
-          {matchedStr}
-        </a>
-      );
-      acc.push(" ");
-    } else {
-      acc.push(tokenStr);
-      acc.push(" ");
-    }
-    return acc;
+    const newLinkedStr = tobeStr.reduce((acc: React.ReactNode[], tokenStr: string) => {
+      const matches = tokenStr.match(regex); // #num 으로 결과가 나옴 ()가 결과에 포함되지 않음
+      if (matches) {
+        const matchedStr = matches[0];
+        const matchedStrNum: string = matchedStr.substring(1);
+        const linkIssues = `https://github.com/${owner}/${repo}/issues/${matchedStrNum}`;
+        acc.push(
+          <a
+            href={linkIssues}
+            key={`issues-${matchedStr}`}
+          >
+            {matchedStr}
+          </a>
+        );
+        acc.push(" ");
+      } else {
+        acc.push(tokenStr);
+        acc.push(" ");
+      }
+      return acc;
+    }, []);
+    setLinkedStr(newLinkedStr);
   }, []);
 
   return (

packages/view/src/context/GlobalDataProvider.tsx

@@ -14,6 +14,8 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
 
   const [branchList, setBranchList] = useState<string[]>([]);
   const [selectedBranch, setSelectedBranch] = useState<string>(branchList?.[0]);
+  const [owner, setOwner] = useState<string>("");
+  const [repo, setRepo] = useState<string>("");
 
   const handleChangeBranchList = (branches: { branchList: string[]; head: string | null }) => {
     setSelectedBranch((prev) => (!prev && branches.head ? branches.head : prev));
@@ -44,8 +46,12 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => {
       setSelectedBranch,
       handleChangeAnalyzedData,
       handleChangeBranchList,
+      owner,
+      setOwner,
+      repo,
+      setRepo,
     }),
-    [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, loading]
+    [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, loading, owner, repo]
   );
 
   return <GlobalDataContext.Provider value={value}>{children}</GlobalDataContext.Provider>;

packages/view/src/hooks/useGlobalData.ts

@@ -24,6 +24,10 @@ type GlobalDataState = {
   setBranchList: Dispatch<SetStateAction<string[]>>;
   selectedBranch: string;
   setSelectedBranch: Dispatch<SetStateAction<string>>;
+  owner: string;
+  setOwner: Dispatch<SetStateAction<string>>;
+  repo: string;
+  setRepo: Dispatch<SetStateAction<string>>;
 } & IDESentEvents;
 
 export const GlobalDataContext = createContext<GlobalDataState | undefined>(undefined);

packages/view/src/types/RemoteGitHubInfo.ts

@@ -0,0 +1,6 @@
+export interface RemoteGitHubInfo {
+  data: {
+    owner: string;
+    repo: string;
+  };
+}

packages/vscode/src/extension.ts

@@ -76,7 +76,9 @@ export async function activate(context: vscode.ExtensionContext) {
       const fetchClusterNodes = async (baseBranchName = initialBaseBranchName) => {
         const gitLog = await getGitLog(gitPath, currentWorkspacePath);
         const gitConfig = await getGitConfig(gitPath, currentWorkspacePath, "origin");
-        const { owner, repo } = getRepo(gitConfig);
+        const { owner, repo: initialRepo } = getRepo(gitConfig);
+        webLoader.setGlobalOwnerAndRepo(owner, initialRepo);
+        const repo = initialRepo[0];
         const engine = new AnalysisEngine({
           isDebugMode: true,
           gitLog,

packages/vscode/src/utils/git.util.ts

@@ -208,7 +208,7 @@ export async function getGitConfig(
 
 export const getRepo = (gitRemoteConfig: string) => {
   const gitRemoteConfigPattern =
-    /(?:https?|git)(?::\/\/(?:\w+@)?|@)(?:github\.com)(?:\/|:)(?:(?<owner>.+?)\/(?<repo>.+?))(?:\.git|\/)?(\S*)$/m;
+    /(?:https?|git)(?::\/\/(?:\w+@)?|@)(?:github\.com)(?:\/|:)(?:(?<owner>[^/]+?)\/(?<repo>[^/.]+))(?:\.git|\/)?(\S*)$/m;
   const gitRemote = gitRemoteConfig.match(gitRemoteConfigPattern)?.groups;
   if (!gitRemote) {
     throw new Error("git remote config should be: [https?://|git@]${domain}/${owner}/${repo}.git");

packages/vscode/src/webview-loader.ts

@@ -111,6 +111,14 @@ export default class WebviewLoader implements vscode.Disposable {
         `;
     return returnString;
   }
+  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>;