From 055bf298e33c02a1436368dfc554ee299dd75715 Mon Sep 17 00:00:00 2001 From: Sang-minKIM <87116017+Sang-minKIM@users.noreply.github.com> Date: Sat, 28 Sep 2024 18:34:39 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20filteredRange=20zustand=20store?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/TemporalFilter/LineChart.ts | 2 +- .../TemporalFilter/TemporalFilter.tsx | 5 +++-- .../view/src/context/GlobalDataProvider.tsx | 7 ++----- packages/view/src/hooks/useGlobalData.ts | 9 --------- packages/view/src/store/filteredRange.ts | 18 ++++++++++++++++++ packages/view/src/store/index.ts | 1 + 6 files changed, 25 insertions(+), 17 deletions(-) create mode 100644 packages/view/src/store/filteredRange.ts diff --git a/packages/view/src/components/TemporalFilter/LineChart.ts b/packages/view/src/components/TemporalFilter/LineChart.ts index 728416ce..d976f88f 100644 --- a/packages/view/src/components/TemporalFilter/LineChart.ts +++ b/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 = { diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.tsx b/packages/view/src/components/TemporalFilter/TemporalFilter.tsx index d0d58a16..8e9f50a2 100644 --- a/packages/view/src/components/TemporalFilter/TemporalFilter.tsx +++ b/packages/view/src/components/TemporalFilter/TemporalFilter.tsx @@ -6,7 +6,7 @@ import BounceLoader from "react-spinners/BounceLoader"; import { Button } from "@mui/material"; import { useGlobalData } from "hooks"; -import { useLoadingStore } from "store"; +import { useLoadingStore, useFilteredRangeStore } from "store"; import { filterDataByDate, getMinMaxDate, lineChartTimeFormatter, sortBasedOnCommitNode } from "./TemporalFilter.util"; import "./TemporalFilter.scss"; @@ -18,8 +18,9 @@ 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 { data, filteredData, setFilteredData, setSelectedData } = useGlobalData(); const { loading } = useLoadingStore((state) => state); + const { filteredRange, setFilteredRange } = useFilteredRangeStore(); const brushGroupRef = useRef(null); const brushRef = useRef>(); diff --git a/packages/view/src/context/GlobalDataProvider.tsx b/packages/view/src/context/GlobalDataProvider.tsx index 7e2cc0dd..5982ca28 100644 --- a/packages/view/src/context/GlobalDataProvider.tsx +++ b/packages/view/src/context/GlobalDataProvider.tsx @@ -1,7 +1,7 @@ import type { PropsWithChildren } from "react"; import { useMemo, useState } from "react"; -import { GlobalDataContext, type DateFilterRange } from "hooks"; +import { GlobalDataContext } from "hooks"; import type { ClusterNode } from "types"; import { useLoadingStore } from "store"; @@ -9,7 +9,6 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => { const [data, setData] = useState([]); const [filteredData, setFilteredData] = useState(data); const [selectedData, setSelectedData] = useState([]); - const [filteredRange, setFilteredRange] = useState(undefined); const { setLoading } = useLoadingStore((state) => state); const [branchList, setBranchList] = useState([]); const [selectedBranch, setSelectedBranch] = useState(branchList?.[0]); @@ -31,8 +30,6 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => { const value = useMemo( () => ({ data, - filteredRange, - setFilteredRange, filteredData, setFilteredData, selectedData, @@ -48,7 +45,7 @@ export const GlobalDataProvider = ({ children }: PropsWithChildren) => { repo, setRepo, }), - [data, filteredRange, filteredData, selectedData, branchList, selectedBranch, owner, repo] + [data, filteredData, selectedData, branchList, selectedBranch, owner, repo] ); return {children}; diff --git a/packages/view/src/hooks/useGlobalData.ts b/packages/view/src/hooks/useGlobalData.ts index 1d2b96a1..f0a4ef93 100644 --- a/packages/view/src/hooks/useGlobalData.ts +++ b/packages/view/src/hooks/useGlobalData.ts @@ -3,21 +3,12 @@ import { createContext, useContext } from "react"; import type { ClusterNode, IDESentEvents } from "types"; -export type DateFilterRange = - | { - fromDate: string; - toDate: string; - } - | undefined; - type GlobalDataState = { data: ClusterNode[]; - filteredRange: DateFilterRange; filteredData: ClusterNode[]; selectedData: ClusterNode[]; setFilteredData: Dispatch>; setSelectedData: Dispatch>; - setFilteredRange: Dispatch>; branchList: string[]; setBranchList: Dispatch>; selectedBranch: string; diff --git a/packages/view/src/store/filteredRange.ts b/packages/view/src/store/filteredRange.ts new file mode 100644 index 00000000..63729726 --- /dev/null +++ b/packages/view/src/store/filteredRange.ts @@ -0,0 +1,18 @@ +import { create } from "zustand"; + +export type DateFilterRange = + | { + fromDate: string; + toDate: string; + } + | undefined; + +type FilteredRangeStore = { + filteredRange: DateFilterRange; + setFilteredRange: (filteredRange: DateFilterRange) => void; +}; + +export const useFilteredRangeStore = create((set) => ({ + filteredRange: undefined, + setFilteredRange: (filteredRange) => set({ filteredRange }), +})); diff --git a/packages/view/src/store/index.ts b/packages/view/src/store/index.ts index b50fe215..fb2b9871 100644 --- a/packages/view/src/store/index.ts +++ b/packages/view/src/store/index.ts @@ -1 +1,2 @@ export * from "./loading"; +export * from "./filteredRange";