Merge pull request #57 from jphacks/fix/harata-ranking-today

Fix/harata ranking today
jphacks · Nov 15, 2024 · cec5028 · cec5028
2 parents c5b1b69 + a839bfa
commit cec5028
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 11 deletions.
diff --git a/app/src/app/api/score/assignment/[id]/route.ts b/app/src/app/api/score/assignment/[id]/route.ts
@@ -26,9 +26,9 @@ export async function GET(req: NextRequest) {
 		include: { user: true, assignment: true },
 	});
 
-	if (!scores[0].assignment){
-		return new Response(JSON.stringify({ message: "Not Found" }), {
-			status: 404,
+	if (!scores[0]?.assignment){
+		return new Response(JSON.stringify({}), {
+			status: 200,
 			headers: { "Content-Type": "application/json" },
 		});
 	}
@@ -37,8 +37,6 @@ export async function GET(req: NextRequest) {
 		where: { id: scores[0].assignment.wordId },
 	});
 
-
-
 	const scoreDetails: ScoreDetail[] = scores.map((score) => {
 		if(!score.assignment){
 			return {

diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
@@ -84,6 +84,10 @@ export default function Home() {
 		}
 	});
 
+	const latestAssignment = assignment
+		.filter((item) => item.assignTime)
+		.sort((a, b) => (b.assignTime?.getTime() ?? 0) - (a.assignTime?.getTime() ?? 0))[0];
+
 	return (
 		<div className="flex flex-col h-full px-10 py-10 bg-gradient-to-t from-gray-300 via-gray-200 to-gray-50">
 			<PointDialog type="login" />
@@ -97,9 +101,9 @@ export default function Home() {
 					</Card>
 				) : (
 					<div className="text-lg w-full">
-						{assignment[0]?.assignTime && (
+						{latestAssignment?.assignTime && (
 							// fixme [0]番目を参照しているがお題ごとに可変的にする必要あり。
-							<Timer assignTime={assignment[0]?.assignTime} />
+							<Timer assignTime={latestAssignment?.assignTime} />
 						)}
 					</div>
 				)}
@@ -115,7 +119,7 @@ export default function Home() {
 						<p className="text-sm text-gray-600">撮影してスコアを競おう！</p>
 					</div>
 					<h1 className="text-3xl font-bold text-center mb-4">
-						{assignment[0]?.english}
+						{latestAssignment?.english}
 					</h1>
 					<div className="flex justify-center w-full">
 						<Button

diff --git a/app/src/app/ranking/page.tsx b/app/src/app/ranking/page.tsx
@@ -31,12 +31,13 @@ export default function RankingPage() {
 				const response = await fetch("api/assignment/today");
 				const data: todayAssignment[] = await response.json();
 				setTopics(data);
-				setSelectedTopic(data[0].assignmentId);
+				if (data.length > 0) {
+					setSelectedTopic(data[0].assignmentId); // 初期値を設定
+				}
 			} catch (error) {
 				console.error("Error fetching topics:", error);
 			}
 		};
-
 		fetchTopics();
 	}, []);
 

diff --git a/app/src/components/view/ranking/RankingListToday.tsx b/app/src/components/view/ranking/RankingListToday.tsx
@@ -1,7 +1,10 @@
+import { Button } from "@/components/ui/button";
 import type { ScoreDetail } from "@/types";
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { LuClock } from "react-icons/lu";
 import { MdOutlineImageSearch } from "react-icons/md";
+import PhotoCameraIcon from "../../../../public/icons/icon-photo-camera.svg";
 
 const LoadingSpinner = () => (
 	<div className="fixed inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center z-50">
@@ -15,6 +18,7 @@ const RankingListToday: React.FC<{ selectedTopic: number }> = ({
 }) => {
 	const [data, setData] = useState<ScoreDetail[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const router = useRouter();
 
 	// 日付をYYYY-MM-DD形式で取得する関数
 	const getDate = useCallback((daysOffset = 0): string => {
@@ -63,13 +67,37 @@ const RankingListToday: React.FC<{ selectedTopic: number }> = ({
 			}
 		};
 
-		fetchData(getDate());
+		if (selectedTopic !== 0) {
+			fetchData(getDate());
+		} else {
+			setIsLoading(false);
+		}
 	}, [selectedTopic, getDate]);
 
 	if (isLoading) {
 		return <LoadingSpinner />;
 	}
 
+	if (!Array.isArray(data) || data.length === 0) {
+		return (
+			<div className="flex flex-col items-center justify-center h-full text-lg text-gray-700 mt-[20vh]">
+				<p className="text-2xl font-bold mb-4">まだ投稿がありません</p>
+				<p className="mb-4">今すぐ投稿して1位を目指しましょう！</p>
+				<p className="text-gray-800 mb-4">
+					あなたの投稿がトップに表示されるかも！
+				</p>
+				<Button
+					variant="primary"
+					className="flex items-center justify-center w-3/5 bg-gray-800 hover:bg-gray-700 text-white py-6 space-x-2 mt-4"
+					onClick={() => router.push("/camera")}
+				>
+					<PhotoCameraIcon className="w-6 h-auto" />
+					<span className="text-lg font-semibold">写真を撮る</span>
+				</Button>
+			</div>
+		);
+	}
+
 	return (
 		<div className="mt-4 space-y-4">
 			{data.map((item, index) => {