useEffectを削除

jphacks · Nov 16, 2024 · 249861b · 249861b
1 parent c9a58d1
commit 249861b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 36 deletions.
diff --git a/app/src/components/view/ranking/RankingListAll.tsx b/app/src/components/view/ranking/RankingListAll.tsx
@@ -1,32 +1,32 @@
 import { Card } from "@/components/ui/card";
 import type { RankingScores } from "@/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { LoadingSpinner } from "../LoadingSpinner";
 
-export default function RankingListWeekly() {
+export default function RankingListAll() {
 	const [data, setData] = useState<RankingScores[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 
-	useEffect(() => {
-		const fetchData = () => {
-			setIsLoading(true);
-			return fetch("/api/score/week",{cache: "reload"})
-				.then((response) => {
-					if (!response.ok) {
-						throw new Error("Failed to fetch data");
-					}
-					return response.json();
-				})
-				.then((result) => setData(result))
-				.catch((error) => console.error("Error fetching data:", error))
-				.finally(() => setIsLoading(false));
-		};
+	// データ取得関数を定義
+	const fetchData = async () => {
+		setIsLoading(true);
+		try {
+			const response = await fetch("/api/score/all", { cache: "reload" });
+			if (!response.ok) {
+				throw new Error("Failed to fetch data");
+			}
+			const result = await response.json();
+			setData(result);
+		} catch (error) {
+			console.error("Error fetching data:", error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
 
+	// 初回ロード時にデータを取得
+	if (data.length === 0 && !isLoading) {
 		fetchData();
-	}, []);
-
-	if (isLoading) {
-		return <LoadingSpinner />;
 	}
 
 	const getEmoji = (rank: number) => {
@@ -42,8 +42,16 @@ export default function RankingListWeekly() {
 		}
 	};
 
+	if (isLoading) {
+		return <LoadingSpinner />;
+	}
+
 	return (
 		<div className="mt-4 space-y-4">
+			{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+			<button onClick={fetchData} className="mb-4 bg-blue-500 text-white p-2 rounded">
+				更新
+			</button>
 			{data.length >= 3 && (
 				<div className="flex justify-center items-end space-x-4">
 					{data[1] && (

diff --git a/app/src/components/view/ranking/RankingListWeekly.tsx b/app/src/components/view/ranking/RankingListWeekly.tsx
@@ -1,29 +1,33 @@
 import { Card } from "@/components/ui/card";
 import type { RankingScores } from "@/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { LoadingSpinner } from "../LoadingSpinner";
 
 export default function RankingListWeekly() {
 	const [data, setData] = useState<RankingScores[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 
-	useEffect(() => {
-		const fetchData = () => {
-			setIsLoading(true);
-			return fetch("/api/score/week",{cache: "reload"})
-				.then((response) => {
-					if (!response.ok) {
-						throw new Error("Failed to fetch data");
-					}
-					return response.json();
-				})
-				.then((result) => setData(result))
-				.catch((error) => console.error("Error fetching data:", error))
-				.finally(() => setIsLoading(false));
-		};
+	// データ取得関数を定義
+	const fetchData = async () => {
+		setIsLoading(true);
+		try {
+			const response = await fetch("/api/score/week");
+			if (!response.ok) {
+				throw new Error("Failed to fetch data");
+			}
+			const result = await response.json();
+			setData(result);
+		} catch (error) {
+			console.error("Error fetching data:", error);
+		} finally {
+			setIsLoading(false);
+		}
+	};
 
+	// 初回ロード時にデータを取得
+	if (data.length === 0 && !isLoading) {
 		fetchData();
-	}, []);
+	}
 
 	const getEmoji = (rank: number) => {
 		switch (rank) {
@@ -44,6 +48,10 @@ export default function RankingListWeekly() {
 
 	return (
 		<div className="mt-4 space-y-4">
+			{/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+			<button onClick={fetchData} className="mb-4 bg-blue-500 text-white p-2 rounded">
+				更新
+			</button>
 			{data.length >= 3 && (
 				<div className="flex justify-center items-end space-x-4">
 					{data[1] && (