Merge pull request #736 from Sang-minKIM/main

전역상태 zustand store로 리펙토링

packages/view/src/App.tsx

@@ -7,18 +7,20 @@ import MonoLogo from "assets/monoLogo.svg";
 import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
-import { useGlobalData } from "hooks";
+import { useAnalayzedData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import type { RemoteGitHubInfo } from "types/RemoteGitHubInfo";
-import { useLoadingStore } from "store";
+import { useBranchStore, useDataStore, useLoadingStore, useOwnerStore, useRepoStore } from "store";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
-
-  const { filteredData, handleChangeAnalyzedData, handleChangeBranchList } = useGlobalData();
-  const { loading, setLoading } = useLoadingStore((state) => state);
-
+  const { handleChangeAnalyzedData } = useAnalayzedData();
+  const filteredData = useDataStore((state) => state.filteredData);
+  const { handleChangeBranchList } = useBranchStore();
+  const { loading, setLoading } = useLoadingStore();
+  const { setOwner } = useOwnerStore();
+  const { setRepo } = useRepoStore();
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
 
   useEffect(() => {
@@ -27,7 +29,6 @@ const App = () => {
         handleChangeAnalyzedData,
         handleChangeBranchList,
       };
-
       setLoading(true);
       ideAdapter.addIDESentEventListener(callbacks);
       ideAdapter.sendFetchAnalyzedDataMessage();
@@ -36,7 +37,6 @@ const App = () => {
     }
   }, [handleChangeAnalyzedData, handleChangeBranchList, ideAdapter, setLoading]);
 
-  const { setOwner, setRepo } = useGlobalData();
   useEffect(() => {
     const handleMessage = (event: MessageEvent<RemoteGitHubInfo>) => {
       const message = event.data;

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -3,16 +3,15 @@ import FormControl from "@mui/material/FormControl";
 import type { SelectChangeEvent } from "@mui/material/Select";
 import Select from "@mui/material/Select";
 
-import { useGlobalData } from "hooks";
 import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
-import { useLoadingStore } from "store";
+import { useBranchStore, useLoadingStore } from "store";
 
 import { SLICE_LENGTH } from "./BranchSelector.const";
 
 const BranchSelector = () => {
-  const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
-  const { setLoading } = useLoadingStore((state) => state);
+  const { branchList, selectedBranch, setSelectedBranch } = useBranchStore();
+  const { setLoading } = useLoadingStore();
 
   const handleChangeSelect = (event: SelectChangeEvent) => {
     setSelectedBranch(event.target.value);

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

@@ -11,7 +11,7 @@ import {
 import { Tooltip } from "@mui/material";
 
 import { Author } from "components/@common/Author";
-import { useGlobalData } from "hooks";
+import { useOwnerStore, useRepoStore } from "store";
 
 import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
@@ -56,7 +56,8 @@ 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 { repo, owner } = useGlobalData();
+  const { owner } = useOwnerStore();
+  const { repo } = useRepoStore();
   const isShow = commitNodeListInCluster.length > FIRST_SHOW_NUM;
   const handleCommitIdCopy = (id: string) => async () => {
     navigator.clipboard.writeText(id);

packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx

@@ -1,12 +1,12 @@
 import { Author } from "components/@common/Author";
 import { usePreLoadAuthorImg } from "components/VerticalClusterList/Summary/Summary.hook";
 import { getInitData } from "components/VerticalClusterList/Summary/Summary.util";
-import { useGlobalData } from "hooks";
+import { useDataStore } from "store";
 
 import "./FilteredAuthors.scss";
 
 const FilteredAuthors = () => {
-  const { selectedData } = useGlobalData();
+  const selectedData = useDataStore((state) => state.selectedData);
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusters = getInitData(selectedData);
 

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -4,14 +4,13 @@ import ReplayCircleFilledRoundedIcon from "@mui/icons-material/ReplayCircleFille
 import { IconButton } from "@mui/material";
 
 import { throttle } from "utils";
-import { useGlobalData } from "hooks";
 import "./RefreshButton.scss";
 import { sendRefreshDataCommand } from "services";
-import { useLoadingStore } from "store";
+import { useBranchStore, useLoadingStore } from "store";
 
 const RefreshButton = () => {
-  const { selectedBranch } = useGlobalData();
-  const { loading, setLoading } = useLoadingStore((state) => state);
+  const { selectedBranch } = useBranchStore();
+  const { loading, setLoading } = useLoadingStore();
 
   const refreshHandler = throttle(() => {
     setLoading(true);

packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.tsx

@@ -1,15 +1,17 @@
 import { useState } from "react";
+import { useShallow } from "zustand/react/shallow";
 import Chip from "@mui/material/Chip";
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
 
 import { selectedDataUpdater } from "components/VerticalClusterList/VerticalClusterList.util";
 import { getInitData, getClusterById } from "components/VerticalClusterList/Summary/Summary.util";
-import { useGlobalData } from "hooks";
-
 import "./SelectedClusterGroup.scss";
+import { useDataStore } from "store";
 
 const SelectedClusterGroup = () => {
-  const { selectedData, setSelectedData } = useGlobalData();
+  const [selectedData, setSelectedData] = useDataStore(
+    useShallow((state) => [state.selectedData, state.setSelectedData])
+  );
   const selectedClusters = getInitData(selectedData);
 
   const [isOpen, setIsOpen] = useState<boolean>(false);

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx

@@ -1,11 +1,12 @@
 import type { MouseEvent } from "react";
 import { useRef, useEffect, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
 import * as d3 from "d3";
 import type { SelectChangeEvent } from "@mui/material";
 import { FormControl, MenuItem, Select } from "@mui/material";
 
+import { useDataStore } from "store";
 import type { ClusterNode, AuthorInfo } from "types";
-import { useGlobalData } from "hooks";
 import { getAuthorProfileImgSrc } from "utils/author";
 import { pxToRem } from "utils/pxToRem";
 
@@ -18,7 +19,9 @@ import { DIMENSIONS, METRIC_TYPE } from "./AuthorBarChart.const";
 import "./AuthorBarChart.scss";
 
 const AuthorBarChart = () => {
-  const { data: totalData, filteredData, setSelectedData, setFilteredData } = useGlobalData();
+  const [totalData, filteredData, setSelectedData, setFilteredData] = useDataStore(
+    useShallow((state) => [state.data, state.filteredData, state.setSelectedData, state.setFilteredData])
+  );
 
   const rawData = useGetSelectedData();
   const svgRef = useRef<SVGSVGElement>(null);

packages/view/src/components/Statistics/Statistics.hook.tsx

@@ -1,6 +1,8 @@
-import { useGlobalData } from "hooks";
+import { useShallow } from "zustand/react/shallow";
+
+import { useDataStore } from "store";
 
 export const useGetSelectedData = () => {
-  const { filteredData, selectedData } = useGlobalData();
+  const [filteredData, selectedData] = useDataStore(useShallow((state) => [state.filteredData, state.selectedData]));
   return selectedData.length ? selectedData : filteredData;
 };

packages/view/src/components/TemporalFilter/LineChart.ts

@@ -1,7 +1,7 @@
 import * as d3 from "d3";
 import dayjs from "dayjs";
+import { type DateFilterRange } from "store";
 
-import type { DateFilterRange } from "hooks";
 import "./LineChart.scss";
 
 export type LineChartDatum = {

packages/view/src/components/TemporalFilter/TemporalFilter.tsx

@@ -1,12 +1,12 @@
 import "reflect-metadata";
 import type { CSSProperties } from "react";
 import { useEffect, useMemo, useRef } from "react";
-import * as d3 from "d3";
 import BounceLoader from "react-spinners/BounceLoader";
+import * as d3 from "d3";
+import { useShallow } from "zustand/react/shallow";
 import { Button } from "@mui/material";
 
-import { useGlobalData } from "hooks";
-import { useLoadingStore } from "store";
+import { useLoadingStore, useFilteredRangeStore, useDataStore } from "store";
 
 import { filterDataByDate, getMinMaxDate, lineChartTimeFormatter, sortBasedOnCommitNode } from "./TemporalFilter.util";
 import "./TemporalFilter.scss";
@@ -18,8 +18,13 @@ import { createBrush, drawBrush, resetBrush } from "./LineChartBrush";
 import { BRUSH_MARGIN, TEMPORAL_FILTER_LINE_CHART_STYLES } from "./LineChart.const";
 
 const TemporalFilter = () => {
-  const { data, filteredData, setFilteredData, filteredRange, setFilteredRange, setSelectedData } = useGlobalData();
-  const { loading } = useLoadingStore((state) => state);
+  const [data, filteredData, setFilteredData, setSelectedData] = useDataStore(
+    useShallow((state) => [state.data, state.filteredData, state.setFilteredData, state.setSelectedData])
+  );
+  const [loading] = useLoadingStore(useShallow((state) => [state.loading]));
+  const [filteredRange, setFilteredRange] = useFilteredRangeStore(
+    useShallow((state) => [state.filteredRange, state.setFilteredRange])
+  );
   const brushGroupRef = useRef<SVGGElement | null>(null);
   const brushRef = useRef<d3.BrushBehavior<unknown>>();
 

packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.tsx

@@ -1,6 +1,7 @@
 import React from "react";
+import { useShallow } from "zustand/react/shallow";
 
-import { useGlobalData } from "hooks";
+import { useDataStore } from "store";
 import type { ClusterGraphProps } from "types/ClusterGraphProps";
 
 import { getGraphHeight, getSelectedIndex } from "./ClusterGraph.util";
@@ -10,7 +11,9 @@ import { useHandleClusterGraph } from "./ClusterGraph.hook";
 import "./ClusterGraph.scss";
 
 const ClusterGraph: React.FC<ClusterGraphProps> = ({ data, clusterSizes }) => {
-  const { selectedData, setSelectedData } = useGlobalData();
+  const [selectedData, setSelectedData] = useDataStore(
+    useShallow((state) => [state.selectedData, state.setSelectedData])
+  );
   const selectedIndex = getSelectedIndex(data, selectedData);
   const graphHeight = getGraphHeight(clusterSizes) + selectedIndex.length * DETAIL_HEIGHT;
 

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

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

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

@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 
-import { useGlobalData } from "hooks";
+import { useDataStore } from "store";
 
 import { getAuthSrcMap } from "./Summary.util";
 import type { AuthSrcMap } from "./Summary.type";
 
 export const usePreLoadAuthorImg = () => {
-  const { data } = useGlobalData();
+  const data = useDataStore((state) => state.data);
   const [authSrcMap, setAuthSrcMap] = useState<AuthSrcMap | null>(null);
 
   useEffect(() => {

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

@@ -1,10 +1,11 @@
 import { useRef, useEffect } from "react";
 import type { ListRowProps } from "react-virtualized";
 import { List, AutoSizer } from "react-virtualized";
+import { useShallow } from "zustand/react/shallow";
 
 import type { ClusterNode } from "types";
 import { Detail } from "components";
-import { useGlobalData } from "hooks";
+import { useDataStore } from "store";
 
 import "./Summary.scss";
 import { Author } from "../../@common/Author";
@@ -21,16 +22,18 @@ const COLLAPSED_ROW_HEIGHT = CLUSTER_HEIGHT + NODE_GAP * 2;
 const EXPANDED_ROW_HEIGHT = DETAIL_HEIGHT + COLLAPSED_ROW_HEIGHT;
 
 const Summary = () => {
-  const { filteredData: data, selectedData, setSelectedData } = useGlobalData();
-  const clusters = getInitData(data);
+  const [filteredData, selectedData, setSelectedData] = useDataStore(
+    useShallow((state) => [state.filteredData, state.selectedData, state.setSelectedData])
+  );
+  const clusters = getInitData(filteredData);
   const detailRef = useRef<HTMLDivElement>(null);
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusterId = getClusterIds(selectedData);
   const listRef = useRef<List>(null);
-  const clusterSizes = getClusterSizes(data);
+  const clusterSizes = getClusterSizes(filteredData);
 
   const onClickClusterSummary = (clusterId: number) => () => {
-    const selected = getClusterById(data, clusterId);
+    const selected = getClusterById(filteredData, clusterId);
     setSelectedData((prevState: ClusterNode[]) => {
       return selectedDataUpdater(selected, clusterId)(prevState);
     });
@@ -63,7 +66,7 @@ const Summary = () => {
       >
         <div className="cluster-summary__graph">
           <ClusterGraph
-            data={[data[index]]}
+            data={[filteredData[index]]}
             clusterSizes={[clusterSizes[index]]}
           />
         </div>

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

@@ -1,4 +1,4 @@
-import { useGlobalData } from "hooks";
+import { useDataStore } from "store";
 import { FilteredAuthors } from "components/FilteredAuthors";
 import { SelectedClusterGroup } from "components/SelectedClusterGroup";
 
@@ -7,7 +7,7 @@ import { Summary } from "./Summary";
 import "./VerticalClusterList.scss";
 
 const VerticalClusterList = () => {
-  const { selectedData } = useGlobalData();
+  const selectedData = useDataStore((state) => state.selectedData);
 
   return (
     <div className="vertical-cluster-list">

packages/view/src/hooks/index.ts

@@ -1 +1 @@
-export * from "./useGlobalData";
+export * from "./useAnalayzedData";