Merge pull request #72 from jin-Pro/main

feat(view): Detail Component

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

@@ -1,8 +1,34 @@
+/* eslint-disable react/no-array-index-key */
 import type { GlobalProps } from "types/global";
 
+import { getTargetCommit, getTime } from "./Detail.util";
+
+const TARGET_ID = "2a7a93cde9c9f74d5f05c1d0fb1da8e96da7057b";
+
 const Detail = ({ data }: GlobalProps) => {
-  console.log(data);
-  return <>Detail</>;
+  const commit = getTargetCommit({ data, id: TARGET_ID });
+  if (!commit) return null;
+  const { authorDate, message, committer } = commit;
+  const time = getTime(authorDate);
+  return (
+    <>
+      <div>작성 날짜</div>
+      <p>{time}</p>
+
+      <div>메세지</div>
+      <p>{message}</p>
+
+      <div>Committer Name</div>
+      {committer.names.map((name: string, i: number) => (
+        <p key={i}>{name}</p>
+      ))}
+
+      <div>Committer Email</div>
+      {committer.emails.map((email: string, i: number) => (
+        <p key={i}>{email}</p>
+      ))}
+    </>
+  );
 };
 
 export default Detail;

packages/view/src/components/Detail/Detail.util.ts

@@ -0,0 +1,34 @@
+import type { GlobalProps } from "types/global";
+
+import type { CommitNode } from "types/NodeTypes.temp";
+
+type GetTargetCommit = GlobalProps & { id: string };
+
+export const getTargetCommit = ({ data, id }: GetTargetCommit) => {
+  if (data?.length === 0) return undefined;
+  const flatCommitNode: CommitNode[] = data
+    .map((clusterNode) => clusterNode.commitNodeList)
+    .flat();
+  const [target] = flatCommitNode.filter(
+    (commitNode) => commitNode.commit.id === id
+  );
+
+  // parent Commit 추출하기
+  // const parentCommitId = target.commit.parentIds;
+  // console.log(parentCommitId);
+  // const parentCommits = parentCommitId.map((parentId) =>
+  //   flatCommitNode.filter(commitNode => commitNode.commit.id === parentId)
+  // );
+  // console.log(parentCommits);
+
+  // 동일한 Cluster Commit 추출하기
+  // const { taskId: ClusterId } = target;
+  // const clusterCommits = flatCommitNode.filter(
+  //   (commitNode) => commitNode.taskId === ClusterId
+  // );
+  // console.log(clusterCommits);
+  return target?.commit;
+};
+
+export const getTime = (date: Date) =>
+  String(date).split(".")[0].replace("T", " ");

packages/view/src/types/NodeTypes.temp.ts

@@ -41,7 +41,7 @@ export type Commit = {
   authorDate: Date;
   commitDate: Date;
   diffStatistics: DiffStatistics;
-
+  message: string;
   // fill necessary properties...
 };
 
@@ -63,7 +63,7 @@ export type CommitNode = NodeBase & {
   nodeTypeName: "COMMIT";
   commit: Commit;
   seq: number;
-
+  taskId: number; // 동일한 Cluster 내부 commit 참조 id
   hasMajorTag: boolean;
   hasMinorTag: boolean;
   isMergeCommit: boolean;