added fetching data with socketio

src/components/Gameboard.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext, useCallback } from 'react';
-import { PlayerDataContext } from '../App'
+import { PlayerDataContext, SocketContext } from '../App';
 import axios from 'axios';
-import Map from './game-board-components/Map'
-import Dice from './game-board-components/Dice'
-import Navbar from './Navbar'
+import Map from './game-board-components/Map';
+import Dice from './game-board-components/Dice';
+import Navbar from './Navbar';
 
 const Gameboard = () => {
     // Context data
+    const socket = useContext(SocketContext);
     const context = useContext(PlayerDataContext);
     // Render data
     const [pawns, setPawns] = useState([]);
@@ -19,61 +20,60 @@ const Gameboard = () => {
 
     const checkWin = useCallback(() => {
         // Player wins when all pawns with same color are inside end base
-        if(pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4){
-            alert("Red Won")
-        }else if(pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4){
-            alert("Blue Won")
-        }else if(pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4){
-            alert("Green Won")
-        }else if(pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4){
-            alert("Yellow Won")
+        if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
+            alert('Red Won');
+        } else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
+            alert('Blue Won');
+        } else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
+            alert('Green Won');
+        } else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
+            alert('Yellow Won');
         }
-    },[pawns]);
+    }, [pawns]);
     // Fetching game data
     const fetchData = useCallback(() => {
-        axios.get('/room/',{
-            withCredentials:true,
-        }).then((response)=>{
+        socket.emit('room:data');
+    }, []);
+
+    useEffect(() => {
+        socket.on('room:data', data => {
+            data = JSON.parse(data);
             // Filling navbar with empty player nick container
-            while(response.data.players.length !== 4){
-                response.data.players.push({name: "...",});
-            };
+            while (data.players.length !== 4) {
+                data.players.push({ name: '...' });
+            }
             // Checks if client is currently moving player by session ID
-            const nowMovingPlayer = response.data.players.find(player => player.nowMoving === true);
-            if(nowMovingPlayer){
-                if(nowMovingPlayer._id === context.playerId){
+            const nowMovingPlayer = data.players.find(player => player.nowMoving === true);
+            if (nowMovingPlayer) {
+                if (nowMovingPlayer._id === context.playerId) {
                     setNowMoving(true);
-                }else{
+                } else {
                     setRolledNumber(null);
                     setNowMoving(false);
                 }
             }
             checkWin();
-            setPlayers(response.data.players);
-            setPawns(response.data.pawns);
-            setTime(response.data.nextMoveTime);
-            setStarted(response.data.started);
-        })
-    },[checkWin, context.playerId]);
-    
-    useEffect(() => {    
-        //sending ajax every 1 sec 
+            setPlayers(data.players);
+            setPawns(data.pawns);
+            setTime(data.nextMoveTime);
+            setStarted(data.started);
+        });
+        //sending ajax every 1 sec
         const interval = setInterval(fetchData, 1000);
         return () => clearInterval(interval);
-    },[fetchData]);
+    }, [fetchData]);
     // Callback to handle dice rolling between dice and map component
-    const rolledNumberCallback = (number) => {
+    const rolledNumberCallback = number => {
         setRolledNumber(number);
-    }
+    };
 
     return (
         <>
-            <Navbar players={players} started={started} time={time}/>
-            {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback}/> : null}
-            <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber}/>
+            <Navbar players={players} started={started} time={time} />
+            {nowMoving ? <Dice nowMoving={nowMoving} rolledNumberCallback={rolledNumberCallback} /> : null}
+            <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
         </>
-    )
+    );
+};
 
-}
-
-export default Gameboard;
+export default Gameboard;