From f1eeb65fe884bb9bea50fc242258ac32cd0a8fa3 Mon Sep 17 00:00:00 2001
From: Nik Afiq <nik.afiq98@ymail.com>
Date: Wed, 5 Nov 2025 17:48:09 +0900
Subject: [PATCH] Added delay in redirect

---
 frontend/src/pages/ShowsPage.tsx | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx
index 551046f..7b41bf9 100644
--- a/frontend/src/pages/ShowsPage.tsx
+++ b/frontend/src/pages/ShowsPage.tsx
@@ -13,7 +13,7 @@ type Show = {
 
 const GET_URL = "/api/v1/shows";
 const POST_URL = "/api/v1/current";
-const REDIRECT_DELAY_MS = 1200;
+const REDIRECT_DELAY_S = 3;
 
 const HHMM = /^(\d{1,2}):([0-5]\d)$/;
 
@@ -38,8 +38,10 @@ export default function ShowsPage() {
     const [loading, setLoading] = useState(true);
     const [posting, setPosting] = useState(false);
     const [error, setError] = useState<string | null>(null);
-    const navigate = useNavigate();
+    const [redirectIn, setRedirectIn] = useState<number | null>(null);
     const redirectTid = useRef<number | null>(null);
+    const isRedirecting = redirectIn !== null;
+    const navigate = useNavigate();
 
     // フォーム状態
     const [selectedId, setSelectedId] = useState<number | null>(null);
@@ -83,13 +85,16 @@ export default function ShowsPage() {
         })();
         return () => { cancelled = true; };
     }, []);
+    useEffect(() => {
+        return () => {
+            if (redirectTid.current) {
+                window.clearInterval(redirectTid.current);
+            }
+        };
+    }, []);
 
     const current = useMemo(() => shows.find(s => s.id === selectedId) || null, [shows, selectedId]);
 
-    useEffect(() => {
-        return () => { if (redirectTid.current) window.clearTimeout(redirectTid.current); };
-    }, []);
-
     async function submit() {
         setError(null);
         if (!selectedId) { setError("エピソードを選択してください。"); return; }
@@ -115,11 +120,13 @@ export default function ShowsPage() {
                 body: JSON.stringify(payload),
             });
             if (!res.ok) throw new Error(`POST 失敗 (${res.status})`);
-            setError("設定しました。少々お待ちください…");
-            redirectTid.current = window.setTimeout(
-                () => navigate("/", { replace: true }),
-                REDIRECT_DELAY_MS
-            );
+            setRedirectIn(REDIRECT_DELAY_S);
+            const start = Date.now();
+            redirectTid.current = window.setInterval(() => {
+                const left = REDIRECT_DELAY_S - Math.floor((Date.now() - start) / 1000);
+                if (left <= 0) { window.clearInterval(redirectTid.current!); navigate("/", { replace: true }); }
+                else setRedirectIn(left);
+            }, 250);
         } catch (e: any) {
             setError(e.message || "現在のエピソード設定に失敗しました。");
         } finally {
@@ -178,11 +185,12 @@ export default function ShowsPage() {
                     disabled={
                         posting ||
                         !selectedId ||
+                        isRedirecting ||
                         (!!startTime && !toHHMMSS(startTime))
                     }
                     onClick={submit}
                 >
-                    {posting ? "設定中…" : "現在のエピソードに設定"}
+                    {redirectIn !== null ? `設定しました（${redirectIn}）` : posting ? "設定中…" : "現在のエピソードに設定"}
                 </button>
             </div>