game_page: Implement api error handling.

Showing toasts and returning to homepage if there is a problem in creating/joining game.
shivansh-bhatnagar18 · Jun 15, 2024 · a1244c0 · a1244c0
1 parent 4a87a43
commit a1244c0
Showing 1 changed file with 48 additions and 26 deletions.
diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx
@@ -3,6 +3,7 @@ import React, { createContext, useContext, useState, useEffect } from 'react';
 import Game from '../pages/Game';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from './AuthContext';
+import { useToast } from '../library/toast/toast-context';
 
 interface GameState {
     players: { id: number; name: string; cards: string[] }[];
@@ -35,42 +36,63 @@ export const GameProvider = () => {
 
     const location = useLocation();
     const navigate = useNavigate();
+    const toast = useToast();
     const auth = useAuth();
     const backendUrl = process.env.REACT_APP_BACKEND_URL;
 
     useEffect(() => {
         const queryParams = new URLSearchParams(location.search);
         const gameType = queryParams.get('type');
-        try {
-            if (gameType === 'join') {
-                const gameCode = queryParams.get('code');
-                fetch(`${backendUrl}/game/join`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ code: gameCode, token: auth.jwt }),
-                })
-                    .then((response) => response.json())
-                    .then((data) => {
-                        setGameState(data.gameState);
+        async function setupGame() {
+            try {
+                if (gameType === 'join') {
+                    const gameCode = queryParams.get('code');
+                    const res = await fetch(`${backendUrl}/game/join`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({
+                            code: gameCode,
+                            token: auth.jwt,
+                        }),
                     });
-            } else if (gameType === 'create') {
-                fetch(`${backendUrl}/game/create`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ token: auth.jwt }),
-                })
-                    .then((response) => response.json())
-                    .then((data) => {
-                        setGameState(data.gameState);
+                    if (!res.ok) {
+                        //todo: more systematic error sending from backend
+                        throw new Error((await res.json()).error);
+                    }
+                    const data = await res.json();
+                    if (!data.gameState) {
+                        throw new Error('Game state not received');
+                    }
+                    setGameState(data.gameState);
+                } else if (gameType === 'create') {
+                    const res = await fetch(`${backendUrl}/game/create`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ token: auth.jwt }),
                     });
+                    if (!res.ok) {
+                        throw new Error((await res.json()).error);
+                    }
+                    const data = await res.json();
+                    if (!data.gameState) {
+                        throw new Error('Game state not received');
+                    }
+                    setGameState(data.gameState);
+                    console.log(data.gameState.id);
+                }
+            } catch (e) {
+                toast.open({
+                    message: (e as Error).message,
+                    color: 'error',
+                });
+                navigate('/');
             }
-        } catch (e) {
-            navigate('/');
         }
+        setupGame();
     }, [location.search]);
 
     return (