fix: 房间不存在时展示错误页面,替代无限加载转圈
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import TopNav from "@/components/TopNav";
|
||||
import SwipeDeck from "@/components/SwipeDeck";
|
||||
import { useRoomPolling } from "@/hooks/useRoomPolling";
|
||||
@@ -9,13 +9,15 @@ import { getUserId } from "@/lib/userId";
|
||||
|
||||
export default function RoomPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const roomId = params.id;
|
||||
|
||||
const [userId, setUserId] = useState("");
|
||||
const [joined, setJoined] = useState(false);
|
||||
const [joinFailed, setJoinFailed] = useState(false);
|
||||
|
||||
const {
|
||||
userCount, match, matchType, matchLikes, runnerUps, likeCounts, swipeCounts, restaurants, mutate,
|
||||
userCount, match, matchType, matchLikes, runnerUps, likeCounts, swipeCounts, restaurants, notFound, mutate,
|
||||
} = useRoomPolling(roomId);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -26,7 +28,10 @@ export default function RoomPage() {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId: id }),
|
||||
}).then(() => setJoined(true));
|
||||
}).then((res) => {
|
||||
if (res.ok) setJoined(true);
|
||||
else setJoinFailed(true);
|
||||
}).catch(() => setJoinFailed(true));
|
||||
}, [roomId]);
|
||||
|
||||
const handleReset = useCallback(async () => {
|
||||
@@ -43,6 +48,22 @@ export default function RoomPage() {
|
||||
await mutate();
|
||||
}, [roomId, mutate]);
|
||||
|
||||
if (notFound || joinFailed) {
|
||||
return (
|
||||
<div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
|
||||
<p className="text-4xl">🍜</p>
|
||||
<p className="text-base font-semibold text-zinc-700">房间不存在或已过期</p>
|
||||
<p className="text-sm text-zinc-400">房间号可能有误,或房间已超过 24 小时</p>
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="mt-2 h-10 rounded-xl bg-emerald-500 px-6 text-sm font-bold text-white shadow-sm transition-colors hover:bg-emerald-600"
|
||||
>
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const initialIndex = swipeCounts[userId] ?? 0;
|
||||
const ready = joined && userId && restaurants.length > 0;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user