From a1244c0cffec14dd21054e2114cd962b4155f551 Mon Sep 17 00:00:00 2001
From: Kislay <kislayudbhav.verma.cd.eee22@itbhu.ac.in>
Date: Sat, 15 Jun 2024 17:31:17 +0530
Subject: [PATCH] game_page: Implement api error handling.

Showing toasts and returning to homepage if
there is a problem in creating/joining game.
---
 frontend/src/contexts/GameContext.tsx | 74 +++++++++++++++++----------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx
index aeb5adf..1da36f7 100644
--- 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 (