added useSocketData hook

src/components/Gameboard/Dice/Dice.jsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useContext } from 'react';
-import { SocketContext } from '../../../App';
-import one from '../../../images/dice/1.png';
-import two from '../../../images/dice/2.png';
-import three from '../../../images/dice/3.png';
-import four from '../../../images/dice/4.png';
-import five from '../../../images/dice/5.png';
-import six from '../../../images/dice/6.png';
-import roll from '../../../images/dice/roll.png';
-
-const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlayer }) => {
-    const socket = useContext(SocketContext);
-
-    const images = [one, two, three, four, five, six, roll];
-
-    const handleRoll = () => {
-        socket.emit('game:roll');
-    };
-
-    useEffect(() => {
-        socket.on('game:roll', number => {
-            rolledNumberCallback(number);
-        });
-    }, [socket, rolledNumberCallback]);
-
-    return (
-        <div className={`dice-container dice-${color}`}>
-            {movingPlayer === color ? (
-                rolledNumber ? (
-                    <img src={images[rolledNumber - 1]} alt={rolledNumber} width='100' height='100' />
-                ) : nowMoving ? (
-                    <img src={images[6]} className='roll' alt='roll' width='100' height='100' onClick={handleRoll} />
-                ) : null
-            ) : null}
-        </div>
-    );
-};
-export default Dice;

src/components/Gameboard/Gameboard.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import ReactLoading from 'react-loading';
 import { PlayerDataContext, SocketContext } from '../../App';
+import useSocketData from '../../hooks/useSocketData';
 import Map from './Map/Map';
 import Navbar from '../Navbar/Navbar';
 
@@ -11,7 +12,7 @@ const Gameboard = () => {
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
 
-    const [rolledNumber, setRolledNumber] = useState(null);
+    const [rolledNumber, setRolledNumber] = useSocketData('game:roll');
     const [time, setTime] = useState();
     const [isReady, setIsReady] = useState();
     const [nowMoving, setNowMoving] = useState(false);
@@ -48,10 +49,6 @@ const Gameboard = () => {
         });
     }, [socket]);
 
-    const rolledNumberCallback = number => {
-        setRolledNumber(number);
-    };
-
     return (
         <>
             {(players[0] && !started) || (time && started) ? (
@@ -64,7 +61,6 @@ const Gameboard = () => {
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}
                         nowMoving={nowMoving}
-                        rolledNumberCallback={rolledNumberCallback}
                     />
                     <Map pawns={pawns} nowMoving={nowMoving} rolledNumber={rolledNumber} />
                 </div>