better errors and refactoring

frontend/src/GameDetails.tsx

@@ -12,38 +12,32 @@ export function GameDetails({ onShowToast }: Props) {
   const { title } = useParams<{ title: string }>();
   const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(!!title);
+  const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
 
   const isAdmin = get_is_admin();
 
   useEffect(() => {
-    if (!title) {
-      setError("Game title is missing");
-      setLoading(false);
-      return;
-    }
+    if (!title) return;
 
-    setLoading(true);
-    setError(null);
-    apiFetch(`/api/game/${encodeURIComponent(title)}`)
-      .then(async (res) => {
+    (async () => {
+      try {
+        const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
         if (!res.ok) {
           if (res.status === 404) {
             throw new Error("Game not found");
           }
           throw new Error("Failed to load game");
         }
-        return Game.decode(new Uint8Array(await res.arrayBuffer()));
-      })
-      .then((data) => {
-        setGame(data);
-      })
-      .catch((err) => {
+        const buffer = await res.arrayBuffer();
+        setGame(Game.decode(new Uint8Array(buffer)));
+      } catch (err) {
         console.error(err);
-        setError(err.message || "Failed to load game");
-      })
-      .finally(() => setLoading(false));
+        setError(err instanceof Error ? err.message : "Failed to load game");
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, [title]);
 
   const handleDelete = async () => {