Merge pull request #82 from jphacks/fix/hikahana/rate-api-connect

userページにrateを繋ぎ込み

Author: nose221834

app/src/app/api/rate/user/[id]/route.ts

@@ -15,6 +15,7 @@ export async function GET(req: NextRequest) {
 	}
 
 	try {
+		// ユーザー情報の取得
 		const user = await prisma.user.findUnique({
 			where: { id },
 			include: {
@@ -32,30 +33,35 @@ export async function GET(req: NextRequest) {
 			return NextResponse.json({ error: "User not found" }, { status: 404 });
 		}
 
+		// 次のレート情報の取得
 		const nextRate = await prisma.rate.findFirst({
-			where: { minRange: { gt: user.rate.maxRange } },
+			where: { minRange: { gt: user.ratePoint } },
 			orderBy: { minRange: "asc" },
 			select: { name: true, minRange: true },
 		});
 
-		const nextRateName = nextRate ? nextRate.name : "";
-		const pointsToNextRate = nextRate
-			? nextRate.minRange - user.ratePoint
-			: user.rate.maxRange - user.ratePoint;
-
+		// 必要なレスポンスデータの組み立て
 		const result = {
 			ratePoint: user.ratePoint,
 			rate: {
 				name: user.rate.name,
 				minRange: user.rate.minRange,
 				maxRange: user.rate.maxRange,
-				nextRateName,
-				pointsToNextRate,
 			},
+			nextRate: nextRate
+				? {
+						name: nextRate.name,
+						pointsToNextRate: nextRate.minRange - user.ratePoint,
+					}
+				: {
+						name: "",
+						pointsToNextRate: 0,
+					},
 		};
 
 		return NextResponse.json(result, { status: 200 });
 	} catch (error) {
+		console.error("RatePoint取得エラー:", error);
 		return NextResponse.json(
 			{ error: "Failed to get ratePoint", details: error },
 			{ status: 500 },

app/src/app/user/page.tsx

@@ -13,6 +13,7 @@ import type {
 	ChangeStatus,
 	MyScoreDetail,
 	DBUser as User,
+	UserRate,
 	experiencePoint,
 } from "@/types";
 import { useEffect, useState } from "react";
@@ -30,6 +31,7 @@ const UserPage = () => {
 	const [isOpen, setIsOpen] = useStatusChangeDialog();
 	const handleOpenDialog = () => setIsOpen(true);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [userRate, setUserRate] = useState<UserRate>();
 
 	useEffect(() => {
 		const userIdString = localStorage.getItem("userID");
@@ -62,24 +64,36 @@ const UserPage = () => {
 			} catch (error) {
 				console.error("エラーが発生しました:", error);
 			}
-
 			try {
-				const response = await fetch(`/api/experiencePoint/me/${userData.id}`);
-				if (!response.ok) {
-					throw new Error("データの取得に失敗しました");
+				const [experienceResponse, rateResponse] = await Promise.all([
+					fetch(`/api/experiencePoint/me/${userData.id}`),
+					fetch(`/api/rate/user/${userData.id}`),
+				]);
+
+				if (!experienceResponse.ok) {
+					throw new Error("経験値データの取得に失敗しました");
 				}
+				if (!rateResponse.ok) {
+					throw new Error("レートデータの取得に失敗しました");
+				}
+
+				const [experienceData, rateData] = await Promise.all([
+					experienceResponse.json(),
+					rateResponse.json(),
+				]);
 
-				const data = await response.json();
-				setUserStatus(data);
+				setUserStatus(experienceData);
 				setPoint({
-					speedPoint: data.speedPoint,
-					similarityPoint: data.similarityPoint,
-					totalPoint: data.totalPoint,
+					speedPoint: experienceData.speedPoint,
+					similarityPoint: experienceData.similarityPoint,
+					totalPoint: experienceData.totalPoint,
 					id: Number(userData.id),
 				});
+				setUserRate(rateData);
 			} catch (error) {
-				console.error("エラーが発生しました", error);
+				console.error("データ取得でエラーが発生しました:", error);
 			}
+
 			setIsLoading(false);
 		};
 
@@ -131,7 +145,10 @@ const UserPage = () => {
 				<div className="ml-4 flex flex-col gap-1">
 					<div className="flex items-center">
 						{isEditing ? (
-							<RenameDialog setIsEditing={setIsEditing} setUserData={setUserData} />
+							<RenameDialog
+								setIsEditing={setIsEditing}
+								setUserData={setUserData}
+							/>
 						) : (
 							<>
 								<span className="text-xl font-bold text-[#333333]">
@@ -166,7 +183,7 @@ const UserPage = () => {
 					<p className="text-xs text-muted-foreground">最高点</p>
 				</Card>
 			</div>
-			<PlayerRankCard rankPoint={2800} />
+			{userRate && <PlayerRankCard rate={userRate} />}
 			<button type="button" onClick={() => handleOpenDialog()}>
 				<StatusList
 					speedPoint={userStatus?.speedPoint || 0}

app/src/components/view/user/PlayerRankCard.tsx

@@ -1,86 +1,44 @@
-"use client";
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
-import { useEffect, useState } from "react";
-
-type Rank = {
-	min: number;
-	max: number;
-	color: string;
-	bgColor: string;
-};
+import type { UserRate as Rate } from "@/types";
 
-const ranks: { [key: string]: Rank } = {
+const ranks: { [key: string]: { color: string; bgColor: string } } = {
 	ブロンズ: {
-		min: 0,
-		max: 499,
 		color: "text-orange-500",
 		bgColor: "bg-orange-100",
 	},
 	シルバー: {
-		min: 500,
-		max: 999,
 		color: "text-slate-500",
 		bgColor: "bg-slate-100",
 	},
 	ゴールド: {
-		min: 1000,
-		max: 1499,
 		color: "text-yellow-500",
 		bgColor: "bg-yellow-100",
 	},
 	プラチナ: {
-		min: 1500,
-		max: 1999,
 		color: "text-emerald-500",
 		bgColor: "bg-emerald-100",
 	},
 	ダイヤモンド: {
-		min: 2000,
-		max: 2499,
 		color: "text-blue-500",
 		bgColor: "bg-blue-100",
 	},
 	マスター: {
-		min: 2500,
-		max: 2999,
 		color: "text-purple-500",
 		bgColor: "bg-purple-100",
 	},
 	プレデター: {
-		min: 3000,
-		max: 3499,
 		color: "text-red-500",
 		bgColor: "bg-red-100",
 	},
 };
 
-const getCurrentRank = (rating: number): string | undefined => {
-	return Object.entries(ranks).find(
-		([_, { min, max }]) => rating >= min && rating <= max,
-	)?.[0];
+type RateProps = {
+	rate: Rate;
 };
 
-interface PlayerRankCardProps {
-	rankPoint: number;
-}
-
-export default function PlayerRankCard({ rankPoint }: PlayerRankCardProps) {
-	const [currentRank, setCurrentRank] = useState<string | undefined>(
-		getCurrentRank(rankPoint),
-	);
-
-	useEffect(() => {
-		setCurrentRank(getCurrentRank(rankPoint));
-	}, [rankPoint]);
-
-	const nextRank =
-		currentRank &&
-		(Object.keys(ranks)[Object.keys(ranks).indexOf(currentRank) + 1] ||
-			undefined);
-
-	if (!currentRank) {
+export default function PlayerRankCard({ rate }: RateProps) {
+	if (!rate.rate) {
 		return (
 			<div className="w-[21rem]">
 				<Card className="w-full max-w-md space-y-6 p-8">
@@ -90,11 +48,17 @@ export default function PlayerRankCard({ rankPoint }: PlayerRankCardProps) {
 		);
 	}
 
+	// 現在のランクに対応するスタイルを取得
+	const rankStyles = ranks[rate.rate.name] || {
+		color: "text-gray-500",
+		bgColor: "bg-gray-100",
+	};
+
 	const rankPositionPercentage =
 		100 -
 		Math.floor(
-			((rankPoint - ranks[currentRank].min) /
-				(ranks[currentRank].max - ranks[currentRank].min)) *
+			((rate.ratePoint - rate.rate.minRange) /
+				(rate.rate.maxRange - rate.rate.minRange)) *
 				100,
 		);
 
@@ -103,23 +67,23 @@ export default function PlayerRankCard({ rankPoint }: PlayerRankCardProps) {
 			<Card className="w-full max-w-md space-y-6 p-8">
 				<div className="flex justify-between items-center">
 					<div>
-						<h3 className={`text-3xl font-bold ${ranks[currentRank].color}`}>
-							{currentRank}
+						<h3 className={`text-3xl font-bold ${rankStyles.color}`}>
+							{rate.rate.name}
 						</h3>
 						<p className="text-sm text-muted-foreground">現在のランク</p>
 					</div>
 					<div
-						className={`w-16 h-16 rounded-full ${ranks[currentRank].bgColor} flex items-center justify-center`}
+						className={`w-16 h-16 rounded-full flex items-center justify-center ${rankStyles.bgColor}`}
 					>
-						<span className={`text-2xl font-bold ${ranks[currentRank].color}`}>
-							{rankPoint}
+						<span className={`text-2xl font-bold ${rankStyles.color}`}>
+							{rate.ratePoint}
 						</span>
 					</div>
 				</div>
 				<Progress
 					value={
-						((rankPoint - ranks[currentRank].min) /
-							(ranks[currentRank].max - ranks[currentRank].min)) *
+						((rate.ratePoint - rate.rate.minRange) /
+							(rate.rate.maxRange - rate.rate.minRange)) *
 						100
 					}
 					className="h-2 bg-gray-200"
@@ -129,33 +93,33 @@ export default function PlayerRankCard({ rankPoint }: PlayerRankCardProps) {
 					<div>
 						<p className="text-muted-foreground">ランク範囲</p>
 						<p className="font-semibold">
-							{ranks[currentRank].min} - {ranks[currentRank].max} LP
+							{rate.rate.minRange} - {rate.rate.maxRange} LP
 						</p>
 					</div>
-					{nextRank && (
+					{rate.nextRate && (
 						<>
 							<div>
 								<p className="text-muted-foreground">次のランク</p>
-								<p className="font-semibold">{nextRank}</p>
+								<p className="font-semibold">{rate.nextRate.name}</p>
 							</div>
 							<div>
 								<p className="text-muted-foreground">次のランクまで</p>
 								<p className="font-semibold">
-									{ranks[currentRank].max - rankPoint} LP
+									{rate.rate.maxRange - rate.ratePoint + 1} LP
 								</p>
 							</div>
 						</>
 					)}
 					<div>
 						<p className="text-muted-foreground">現在のLP</p>
-						<p className="font-semibold">{rankPoint} LP</p>
+						<p className="font-semibold">{rate.ratePoint} LP</p>
 					</div>
 				</div>
-				<div className={`p-4 rounded-lg ${ranks[currentRank].bgColor}`}>
+				<div className={`p-4 rounded-lg ${rankStyles.bgColor}`}>
 					<p className="text-center text-sm mb-1">ランク内での位置</p>
 					<div className="flex gap-2 justify-center items-center">
 						<p className="text-sm font-bold">上位</p>
-						<p className="text-center text-2xl font-bold">
+						<p className={`text-center text-2xl font-bold ${rankStyles.color}`}>
 							{rankPositionPercentage}%
 						</p>
 					</div>

app/src/types/index.tsx

@@ -144,3 +144,16 @@ export interface ChangeStatus {
 	totalPoint: number;
 	id: number;
 }
+
+export interface UserRate {
+	ratePoint: number;
+	rate: {
+		name: string;
+		minRange: number;
+		maxRange: number;
+	};
+	nextRate: {
+		name: string;
+		pointsToNextRate: number;
+	};
+}