[fix] コンポーネントの呼び出しをリファクタリング

jphacks · Nov 15, 2024 · d0cad9a · d0cad9a
1 parent 2651daa
commit d0cad9a
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 57 deletions.
diff --git a/app/src/app/user/page.tsx b/app/src/app/user/page.tsx
@@ -48,7 +48,6 @@ const UserPage = () => {
 	if (!userData) return null;
 	return (
 		<div className="w-screen min-h-screen flex flex-col gap-4 items-center p-4 pt-10 bg-gradient-to-t from-gray-300 via-gray-200 to-gray-50">
-			<StatusChangeDialog />
 			<div className="flex items-center mb-4">
 				{userData.photoURL ? (
 					<img
@@ -112,10 +111,10 @@ const UserPage = () => {
 				</Card>
 			</div>
 			<StatusList
-				speedPoint={10}
-				similarityPoint={40}
-				onClick={() => setIsOpen(true)}
-			/>
+                speedPoint={10}
+                similarityPoint={40}
+                onClick={() => setIsOpen(true)}
+            />
 			<Card className="flex flex-col items-center border-none p-8">
 				<h2 className="text-2xl font-bold mb-4">過去のチャレンジ</h2>
 				{myScore.length === 0 ? (

diff --git a/app/src/components/view/user/StatusChangeDialog.tsx b/app/src/components/view/user/StatusChangeDialog.tsx
@@ -8,39 +8,52 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "@/components/ui/dialog";
 import { Slider } from "@/components/ui/slider";
-import { useStatusChangeDialog } from "@/lib/atom";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+interface StatusChangeDialogProps {
+	isOpen: boolean;
+	onClose: () => void;
+	initialSpeed: number;
+	initialSimilarity: number;
+}
 
 interface PlayStyleSettings {
 	speed: number;
 	similarity: number;
 	total: number;
 }
 
-export default function StatusChangeDialog() {
+export default function StatusChangeDialog({
+	isOpen,
+	onClose,
+	initialSpeed,
+	initialSimilarity,
+}: StatusChangeDialogProps) {
 	const [settings, setSettings] = useState<PlayStyleSettings>({
-		speed: 12,
-		similarity: 70,
+		speed: initialSpeed,
+		similarity: initialSimilarity,
 		total: 100,
 	});
-	const [isOpen, setIsOpen] = useStatusChangeDialog();
 
-	// TODO APIの繋ぎ込みをおこなう。その際に値のバリデージョンも実装する。
+	useEffect(() => {
+		setSettings({
+			speed: initialSpeed,
+			similarity: initialSimilarity,
+			total: 100,
+		});
+	}, [initialSpeed, initialSimilarity]);
+
 	const handleSave = async () => {
-		setIsOpen(false);
+		onClose();
 	};
 
 	const remainingPoints =
 		settings.total - (settings.speed + settings.similarity);
 
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline">プレイスタイルの調整</Button>
-			</DialogTrigger>
+		<Dialog open={isOpen} onOpenChange={onClose}>
 			<DialogContent className="p-6 rounded-xl max-w-[90vw]">
 				<DialogHeader>
 					<DialogTitle className="text-xl font-semibold">
@@ -112,10 +125,12 @@ export default function StatusChangeDialog() {
 						</div>
 					</div>
 					<DialogFooter className="flex flex-row justify-end space-x-2">
-						<Button variant="outline" onClick={() => setIsOpen(false)}>
+						<Button variant="outline" onClick={onClose}>
 							キャンセル
 						</Button>
-						<Button className="px-9" onClick={handleSave}>保存</Button>
+						<Button className="px-9" onClick={handleSave}>
+							保存
+						</Button>
 					</DialogFooter>
 				</div>
 			</DialogContent>

diff --git a/app/src/components/view/user/StatusList.tsx b/app/src/components/view/user/StatusList.tsx
@@ -1,6 +1,8 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
+import StatusChangeDialog from "@/components/view/user/StatusChangeDialog";
 import { ChevronRight } from "lucide-react";
+import { useState } from "react";
 
 type StatusListProps = {
 	speedPoint: number;
@@ -13,46 +15,60 @@ export default function StatusList({
 	similarityPoint,
 	onClick,
 }: StatusListProps) {
+	const [isOpen, setIsOpen] = useState(false);
+
 	return (
-		<Card
-			className="flex flex-col w-[21rem] items-center border-none cursor-pointer"
-			onClick={onClick}
-		>
-			<CardHeader className="flex flex-row items-start justify-between w-full pb-1">
-				<CardTitle className="text-xl font-bold text-[#333333]">
-					プレイスタイル設定
-				</CardTitle>
-				<ChevronRight className="h-5 w-5 text-muted-foreground" />
-			</CardHeader>
-			<CardContent className="w-full pb-6">
-				<p className="text-start text-sm text-muted-foreground mb-4">
-					スピードと類似度のバランスを調整
-				</p>
-				<div className="flex gap-4">
-					<div className="w-1/2 space-y-2">
-						<div className="flex justify-between text-xs">
-							<span>スピード</span>
-							<span className="font-bold">{speedPoint}ポイント</span>
+		<>
+			<Card
+				className="flex flex-col w-[21rem] items-center border-none cursor-pointer"
+				onClick={() => {
+					setIsOpen(true);
+					onClick();
+				}}
+			>
+				<CardHeader className="flex flex-row items-start justify-between w-full pb-1">
+					<CardTitle className="text-xl font-bold text-[#333333]">
+						プレイスタイル設定
+					</CardTitle>
+					<ChevronRight className="h-5 w-5 text-muted-foreground" />
+				</CardHeader>
+				<CardContent className="w-full pb-6">
+					<p className="text-start text-sm text-muted-foreground mb-4">
+						スピードと類似度のバランスを調整
+					</p>
+					<div className="flex gap-4">
+						<div className="w-1/2 space-y-2">
+							<div className="flex justify-between text-xs">
+								<span>スピード</span>
+								<span className="font-bold">{speedPoint}ポイント</span>
+							</div>
+							<Progress
+								value={speedPoint}
+								className="bg-blue-100"
+								indicatorClassName="bg-blue-500"
+							/>
 						</div>
-						<Progress
-							value={speedPoint}
-							className="bg-blue-100"
-							indicatorClassName="bg-blue-500"
-						/>
-					</div>
-					<div className="w-1/2 space-y-2">
-						<div className="flex justify-between text-xs">
-							<span>類似度</span>
-							<span className="font-bold">{similarityPoint}ポイント</span>
+						<div className="w-1/2 space-y-2">
+							<div className="flex justify-between text-xs">
+								<span>類似度</span>
+								<span className="font-bold">{similarityPoint}ポイント</span>
+							</div>
+							<Progress
+								value={similarityPoint}
+								className="bg-green-100"
+								indicatorClassName="bg-green-500"
+							/>
 						</div>
-						<Progress
-							value={similarityPoint}
-							className="bg-green-100"
-							indicatorClassName="bg-green-500"
-						/>
 					</div>
-				</div>
-			</CardContent>
-		</Card>
+				</CardContent>
+			</Card>
+
+			<StatusChangeDialog
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				initialSpeed={speedPoint}
+				initialSimilarity={similarityPoint}
+			/>
+		</>
 	);
 }