From 1f2832779126ad665087200b5a11fb6791ac7f0e Mon Sep 17 00:00:00 2001
From: miyabin66 <freezemark5166@gmail.com>
Date: Fri, 3 Nov 2023 17:50:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?graph=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AEuseEffect=E3=82=92hooks?=
 =?UTF-8?q?=E3=81=AB=E3=81=BE=E3=81=A8=E3=82=81=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Graph.tsx | 33 ++++++++--------------------
 src/hooks/useGraph.ts    | 47 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 24 deletions(-)
 create mode 100644 src/hooks/useGraph.ts

diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
index 0e1daba..80512c8 100644
--- a/src/components/Graph.tsx
+++ b/src/components/Graph.tsx
@@ -1,10 +1,11 @@
 'use client';
 import { usePopulation } from '@/hooks/api/usePopulation';
 import { useHighcharts } from '@/hooks/useHighcharts';
+import { useGrpph } from '@/hooks/useGraph';
 import Highcharts from 'highcharts';
 import HighchartsAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
-import { type Dispatch, type SetStateAction, useEffect } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 import type {
   DisplayConditions,
   PrefecturesList,
@@ -37,29 +38,13 @@ export const Graph = ({
     displayCondition,
     graphData,
   });
-
-  useEffect(() => setIsLoading(isLoading), [isLoading, setIsLoading]);
-
-  useEffect(() => {
-    if (!populationData) return;
-
-    const data = populationData.result;
-    const prefName = currentPrefectures.prefName;
-
-    setGraphData((prev) => {
-      if (!prev) {
-        return [{ result: data, prefName }];
-      }
-
-      const exsistData = prev.filter((item) => item.prefName === prefName);
-
-      if (exsistData.length === 0) {
-        return [...prev, { result: data, prefName }];
-      }
-
-      return prev;
-    });
-  }, [currentPrefectures, populationData, setGraphData]);
+  useGrpph({
+    currentPrefectures,
+    isLoading,
+    populationData,
+    setGraphData,
+    setIsLoading,
+  });
 
   return <HighchartsReact highcharts={Highcharts} options={options} />;
 };
diff --git a/src/hooks/useGraph.ts b/src/hooks/useGraph.ts
new file mode 100644
index 0000000..d322549
--- /dev/null
+++ b/src/hooks/useGraph.ts
@@ -0,0 +1,47 @@
+import { useEffect, type Dispatch, type SetStateAction } from 'react';
+import type { PrefecturesList } from '@/interfaces/prefectures';
+import type {
+  GetPopulationResponse,
+  PopulationGraphData,
+} from '@/interfaces/population';
+
+interface Props {
+  currentPrefectures: PrefecturesList;
+  isLoading: boolean;
+  populationData: GetPopulationResponse | undefined;
+  setGraphData: Dispatch<SetStateAction<PopulationGraphData[] | undefined>>;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+}
+
+export const useGrpph = ({
+  currentPrefectures,
+  isLoading,
+  populationData,
+  setGraphData,
+  setIsLoading,
+}: Props) => {
+  useEffect(() => setIsLoading(isLoading), [isLoading, setIsLoading]);
+
+  useEffect(() => {
+    if (!populationData) return;
+
+    const data = populationData.result;
+    const prefName = currentPrefectures.prefName;
+
+    setGraphData((prev) => {
+      if (!prev) {
+        return [{ result: data, prefName }];
+      }
+
+      const exsistData = prev.filter((item) => item.prefName === prefName);
+
+      if (exsistData.length === 0) {
+        return [...prev, { result: data, prefName }];
+      }
+
+      return prev;
+    });
+  }, [currentPrefectures, populationData, setGraphData]);
+
+  return {};
+};

From 886a383d64983860a1557b8dbb839d70509a65d4 Mon Sep 17 00:00:00 2001
From: miyabin66 <freezemark5166@gmail.com>
Date: Fri, 3 Nov 2023 18:02:33 +0900
Subject: [PATCH 2/2] =?UTF-8?q?waitFor=E3=81=AE=E4=BD=BF=E3=81=84=E6=96=B9?=
 =?UTF-8?q?=E3=81=8C=E9=96=93=E9=81=95=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/container.test.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/test/container.test.tsx b/src/test/container.test.tsx
index 602df04..bd0b77f 100644
--- a/src/test/container.test.tsx
+++ b/src/test/container.test.tsx
@@ -24,15 +24,15 @@ describe('containerのテスト', () => {
 
     const hokkaido = screen.getByDisplayValue('北海道');
 
-    await waitFor(async () => {
-      await userEvent.click(hokkaido);
-    });
+    await userEvent.click(hokkaido);
 
-    const element = screen.getByRole('heading', {
-      level: 2,
-      name: `${DisplayConditionsList['総人口']}グラフ`,
-    });
+    await waitFor(() => {
+      const element = screen.getByRole('heading', {
+        level: 2,
+        name: `${DisplayConditionsList['総人口']}グラフ`,
+      });
 
-    expect(element).toBeInTheDocument();
+      expect(element).toBeInTheDocument();
+    });
   });
 });