Merge branch 'main' into dev

.circleci/config.yml

@@ -0,0 +1,34 @@
+version: 2.1
+
+jobs:
+    build_and_test:
+        docker:
+            - image: circleci/node:14
+
+        working_directory: ~/app
+
+        steps:
+            - checkout
+            - run:
+                  name: Install Frontend Dependencies
+                  command: |
+                      npm install
+            - run:
+                  name: Install Backend Dependencies
+                  command: |
+                      cd backend
+                      npm install
+            - run:
+                  name: Build Frontend
+                  command: |
+                      npm run build
+            - run:
+                  name: Test Frontend
+                  command: |
+                      npm test
+
+workflows:
+    version: 2
+    build:
+        jobs:
+            - build_and_test

src/components/Gameboard/Gameboard.jsx

@@ -58,6 +58,7 @@ const Gameboard = () => {
         socket.on('redirect', () => {
             window.location.reload();
         });
+
     }, [socket, context.playerId, context.roomId, setRolledNumber]);
 
     return (

src/components/LoginPage/NameInput/NameInput.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, useCallback } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { SocketContext } from '../../../App';
 import useInput from '../../../hooks/useInput';
 import useKeyPress from '../../../hooks/useKeyPress';

src/hooks/useKeyPress.js

@@ -1,10 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
 export default function useKeyPress(targetKey, callback) {
-    const keyPressHandler = ({ key }) => {
+    const keyPressHandler = useCallback(
-        if (key === targetKey) {
+        ({ key }) => {
-            callback();
+            if (key === targetKey) {
-        }
+                callback();
-    };
+            }
+        },
+        [targetKey, callback]
+    );
 
     useEffect(() => {
         window.addEventListener('keydown', keyPressHandler);