enhance(view): Detail Component Contents #88

jin-Pro · 2022-09-05T05:40:24Z

WorkList

Before this commit, Detail Components contents showed the contents of one target commit, but after this commit, it shows the commit list in cluster

Target_ID => TARGET_TASK_ID 변경
getTime Func Delete

Result

Todo

scss
Commit 상세 내용 추가

Add WorkList

[ fix(view): fix value naming taskId => ClusterId ]

taskId 대신 ClusterId 적용

[ enhance(view): add Cluster Detail Data in Detail Component ]

add Detail Data
- authors
- commits
- files
- insertions
- deletions

jin-Pro · 2022-09-05T05:41:09Z

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

-      {committer.emails.map((email: string, i: number) => (
-        <p key={i}>{email}</p>
+      {commitNodeListInCluster.map((commitNode) => (
+        <div key={commitNode.commit.id}>{commitNode.commit.message}</div>


li tag로 변경해야 할 것 같아요

commitNode를 구조분해할당하지 않은 이유가, 어떻게 확장될지 정해지지 않아서 이렇게 사용했습니다!

jin-Pro · 2022-09-05T05:41:42Z

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

-  // );
-  // console.log(parentCommits);
+  const commitNodeListInCluster = flatCommitNodeList.filter(
+    (commitNode) => commitNode.taskId === taskId


({taskId}) => taskId === taskId

가 작동하지 않아 분해할당하지 않았습니다.

원래는 중복된 변수명도 작동해야하나요?

원래는 중복된 변수명도 작동해야하나요?

아뇨 ㅎㅎㅎ 나름의 코드 작성에 대한 의견을 작성했습니다 ㅎㅎ

ytaek · 2022-09-05T10:30:36Z

PR이나 commit title에, 동사(verb)를 하나 넣어주시면 더 이해하기 편할 것 같아요~. 더했다, 고쳤다, 뺐다 이런거?

jejecrunch · 2022-09-05T11:37:58Z

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

-  if (data?.length === 0) return undefined;
-  const flatCommitNode: CommitNode[] = data
+type GetCommitListInCluster = GlobalProps & { taskId: number };
+export const getCommitListInCluster = ({


저희가 클릭하면 통계쪽도 바뀌는 시스템인데 통계쪽에서는 현재 taskId가 아닌 데이터로 전달받고 있어서 이 부분 합쳐지면 유용하게 쓰일 것 같습니다 ! 일단 우선 저는 디테일에 clusterId인 taskId를 전달하는 걸 먼저 구현해보겠습니다 !

넵 저도 맞춰서 진행하겠습니다!

enhance(view): merge fix(view): fix value naming taskId => ClusterId enhance(view): add Cluster Detail Data in Detail Component

jeonghye-choi · 2022-09-07T02:54:53Z

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

+  const diffStatistics = commitNodeListInCluster.reduce(
+    (acc, { commit: { diffStatistics: cur } }) => ({
+      insertions: acc.insertions + cur.insertions,
+      deletions: acc.deletions + cur.deletions,
+    }),
+    {
+      insertions: 0,
+      deletions: 0,
+    }
+  );


이 부분 코드 너무 좋은 거 같아요! 👍

감사드립니다. 이부분에서 조금 더 고민했던 내용이

{ insertions: 0, deletions: 0, }

이 부분을 상수로 분리할까? 라는 고민을 했었습니다.

vgihan

고생하셨습니다 ~! 😁

vgihan · 2022-09-07T03:59:07Z

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

+      commit: {
+        author: { names },
+      },
+    }: CommitNode) =>


저는 lint에서 줄바꿈이 많이 일어나면, 구조 분해 할당을 적게 쓰거나 안쓰는 편인데 아래와 같이 적용하는 것은 어떨까요 ? 사실 아래처럼 사용하면 names를 참조하기 위해 프로퍼티를 더 깊게 명시해야하는 단점이 있지만 줄바꿈을 덜 일으킬 수 있을 것 같습니다 !!

const fn = (set: Set<unknown>) => ({ commit }: CommitNode) => { commit.author.names.forEach((name) => set.add(name)); return getDataSetSize(commitNodeListInCluster, fn); }

오 ,, 좋은 거 같아요 다른분들 의견도 궁금하네요 ㅎㅎㅎ 줄바꿈이 너무 많아서 저도 고민했었거든요

ytaek · 2022-09-07T04:10:47Z

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

+const getDataSetSize = <T extends any[]>(arr: T, callback: Function) => {
+  const set = new Set();
+  const fn = callback(set);
+  arr.forEach(fn);
+  return set.size;
+};


(사소) callback이 달려있는데, getDataSetSize라는 이름만 보면, callback을 기대하지 못할 것 같습니다. 좋은 이름이 있으면 바꿔주는 것도 괜찮아 보이네용.

좋은 의견 감사드립니다!!
네이밍은 언제나 어려운것 같습니다.. ㅜㅜ

ytaek · 2022-09-07T04:12:09Z

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

+  commitNodeListInCluster,
+}: GetCommitListAuthorLength) => {
+  const fn =
+    (set: Set<unknown>) =>


(궁금) 혹시 Set<unknown>을 써야하는 이유가 있을지요?

자료들의 type들이 왠만큼 정해진 상태인 것 같은데, 명시해줄 수 있거나 컴파일러가 추론해줄 수 있는 형태로 간다면 좀 더 코드가 단단해질 수 있지 않을까 해서 여쭤봅니다~.

vscode에서 type 추론된 타입이 Set이였는데 ,, 사실 저도 작성하고 나니 불편했었습니다..
type 관련해서 더 확인해보고 commit 남기겠습니다!

네 그러면 generic을 쓰던지 해도 괜찮을 수 있겠네요~.

해당 부분 string으로 fn 코드 내부에서만 선언해주면 되더라구요!

9a13f79
로 수정해서 commit 올렸습니다!

ytaek · 2022-09-07T04:14:04Z

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

 };
+type ObjAddCommarReturn = { [key in keyof ObjAddCommarProps]: string };
+const objAddCommar = (obj: ObjAddCommarProps): ObjAddCommarReturn =>


(궁금) objAddCommar는 무슨 뜻인지요?

obj안에 존재하는 value에 ','를 넣는 함수입니다..!
네이밍이 많이 부실한것 같군요 ㅜㅜ

ex) {
money : 1000
} => {
money : '1,000'
}

아... 그러면 typo 같네요 :-) comma

ex) { money : 1000 } => { money : '1,000' }

그런데, 이건 어떨 때 사용하나요?

cluster 를 클릭하면 cluster에 해당하는 commit들의 데이터를 가공해주어서 위 이미지와 같이 렌더링 해주고 있습니다!
위 이미지에서는 number로 데이터를 ui로 표출하는게 아니라, ','가 존재하는 string 객체로 나타내주어서 구현했습니다.!

numAddCommar 함수가 세 자리씩 끊어서 콤마만 붙여주는 역할만 한다면, toLocaleString 함수를 사용하는 것은 어떨까요 ??

와 ,, 지금 확인했는데 ,,, ㅋㅋㅋㅋ 엄청나네요,, 역시 내장함수 많이 알아두는게 정말 중요한것 같아요,,,
수정해서 올리겠습니다!

1a92442

저의 피같은 numAddCommar 코드를 지우고 toLocaleString으로 변경했습니다 ㅎㅎ 감사합니다!

앜ㅋㅋㅋ 코드 도둑돼버렸네요,, 반영 감사합니다 !!

taejs · 2022-09-07T15:27:10Z

import type { GlobalProps, CommitNode } from "types/";

export const getCommitListInCluster = ({
  data,
  clusterId,
}: GlobalProps & { clusterId: number }) => {
  return data
    .map((clusterNode) => clusterNode.commitNodeList)
    .flat()
    .filter((commitNode) => commitNode.clusterId === clusterId);
};

const getDataSetSize = <T extends any[]>(arr: T) => {
  const set = new Set(arr);
  return set.size;
};

const getCommitListAuthorLength = (commitNodes: CommitNode[]) => {
  return getDataSetSize(commitNodes.map((d) => d.commit.author.names).flat());
};

const getChangeFileLength = (commitNodes: CommitNode[]) => {
  return getDataSetSize(
    commitNodes.map((d) => Object.keys(d.commit.diffStatistics.files)).flat()
  );
};

export const getCommitListDetail = (commitNodes: CommitNode[]) => {
  const authorLength = getCommitListAuthorLength(commitNodes);
  const fileLength = getChangeFileLength(commitNodes);
  const insertions = commitNodes.reduce(
    (acc, cur) => acc + cur.commit.diffStatistics.insertions,
    0
  );
  const deletions = commitNodes.reduce(
    (acc, cur) => acc + cur.commit.diffStatistics.deletions,
    0
  );

  return {
    authorLength,
    fileLength,
    commitLength: commitNodes.length,
    insertions,
    deletions,
  };
};

올려주신 유틸 코드라인수를 줄여봤고.. 테스트는 안해서 안돌아갈수도 있긴합니다.
objAddCommar는 아예 제거했는데요 개인적으로 렌더 관련 코드는 렌더쪽에서 toLocaleString 처리하는게 더좋다고 생각해서요

필요하시면 참고해주세요!

hanseul-lee · 2022-09-07T15:39:51Z

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

+type ObjAddCommarProps = {
+  authorLength: number;
+  fileLength: number;
+  commitLength: number;
+  insertions: number;
+  deletions: number;
 };
+type ObjAddCommarReturn = { [key in keyof ObjAddCommarProps]: string };


type 관련한 것들 따로 Detail.type.ts 파일로 빼주시면 한눈에 파악하기 좋을 것 같습니다~

jin-Pro added the ✨ view label Sep 5, 2022

jin-Pro requested a review from a team as a code owner September 5, 2022 05:40

jin-Pro self-assigned this Sep 5, 2022

jin-Pro commented Sep 5, 2022

View reviewed changes

jejecrunch reviewed Sep 5, 2022

View reviewed changes

hanseul-lee approved these changes Sep 6, 2022

View reviewed changes

jin-Pro force-pushed the main branch 2 times, most recently from 2d0cf08 to 9aeb880 Compare September 7, 2022 02:09

enhance(view): add Cluster Detail Information in Detail Component

efb793b

enhance(view): merge fix(view): fix value naming taskId => ClusterId enhance(view): add Cluster Detail Data in Detail Component

jin-Pro force-pushed the main branch from 9aeb880 to efb793b Compare September 7, 2022 02:21

jeonghye-choi reviewed Sep 7, 2022

View reviewed changes

jeonghye-choi approved these changes Sep 7, 2022

View reviewed changes

vgihan approved these changes Sep 7, 2022

View reviewed changes

ytaek reviewed Sep 7, 2022

View reviewed changes

jin-Pro changed the title ~~fix(view): Detail Component Contents~~ enhance(view): Detail Component Contents Sep 7, 2022

jin-Pro added 2 commits September 7, 2022 13:53

fix(view): fix set type unknown => string

9a13f79

fix(view): delete numAddCommar Func, as use toLocaleString

1a92442

jin-Pro merged commit 2106c29 into githru:main Sep 7, 2022

hanseul-lee reviewed Sep 7, 2022

View reviewed changes

jin-Pro mentioned this pull request Sep 11, 2022

style(view): add Detail Component css #134

Merged

hanseul-lee added this to the v0.1.0 milestone Sep 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

enhance(view): Detail Component Contents #88

enhance(view): Detail Component Contents #88

jin-Pro commented Sep 5, 2022 •

edited

Loading

jin-Pro Sep 5, 2022

jin-Pro Sep 5, 2022

jejecrunch Sep 5, 2022

jin-Pro Sep 5, 2022

ytaek commented Sep 5, 2022

jejecrunch Sep 5, 2022

jin-Pro Sep 5, 2022

jeonghye-choi Sep 7, 2022

jin-Pro Sep 7, 2022

vgihan left a comment

vgihan Sep 7, 2022

jin-Pro Sep 7, 2022

ytaek Sep 7, 2022

jin-Pro Sep 7, 2022

ytaek Sep 7, 2022

jin-Pro Sep 7, 2022

ytaek Sep 7, 2022

jin-Pro Sep 7, 2022

ytaek Sep 7, 2022

jin-Pro Sep 7, 2022

ytaek Sep 7, 2022

jin-Pro Sep 7, 2022

vgihan Sep 7, 2022

jin-Pro Sep 7, 2022 •

edited

Loading

jin-Pro Sep 7, 2022

vgihan Sep 7, 2022

taejs commented Sep 7, 2022

hanseul-lee Sep 7, 2022

jin-Pro Sep 8, 2022

enhance(view): Detail Component Contents #88

enhance(view): Detail Component Contents #88

Conversation

jin-Pro commented Sep 5, 2022 • edited Loading

WorkList

Result

Todo

Add WorkList

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ytaek commented Sep 5, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vgihan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jin-Pro Sep 7, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taejs commented Sep 7, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jin-Pro commented Sep 5, 2022 •

edited

Loading

jin-Pro Sep 7, 2022 •

edited

Loading