prop types added

frontend/src/App.jsx

@@ -9,7 +9,7 @@ import Themes from './pages/Settings/Themes'
 import PlayLayout from './pages/Play/Layout'
 import PlayFriend from './pages/Play/PlayFriend'
 import Play from './pages/Play/Play'
-import AuthenticationPage, { loginAction, signupAction } from './pages/Authentication/Authentication'
+import AuthenticationPage from './pages/Authentication/Authentication'
 import ChallengeFriend, { playFriendAction } from './pages/Play/ChallengeFriend'
 import ChessGame from './pages/Chess/ChessGame'
 import Profile, { action as profileAction } from './pages/Settings/Profile'
@@ -52,9 +52,9 @@ const router = createBrowserRouter([{
   ]
 },
 {
-  path: '/login', element: <AuthenticationPage isLogin={true} />, action: loginAction, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; }
+  path: '/login', element: <AuthenticationPage isLogin={true} />, loader: () => { if (getAuthToken()) return redirect('/home'); else return null; }
 }, {
-  path: '/signup', element: <AuthenticationPage isLogin={false} />, action: signupAction, loader: () => { if (getAuthToken()) return redirect('/signup'); else return null; }
+  path: '/signup', element: <AuthenticationPage isLogin={false} />, loader: () => { if (getAuthToken()) return redirect('/signup'); else return null; }
 }, {
   path: '/logout', loader: () => { getAuthToken() || redirect('/home') }
 }]);

frontend/src/components/Cell.jsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 
+import PropTypes from 'prop-types';
 import { socket } from '../socket';
 import { Box, Flex } from '@mantine/core';
 import { useDroppable } from '@dnd-kit/core'
@@ -10,7 +11,6 @@ import { ChessGameContext } from '../context/chess-game-context';
 import { SOCKET_EVENTS } from '../constants';
 const { CHESS_MOVE } = SOCKET_EVENTS
 
-
 const Cell = ({ cell }) => {
     let roomID = localStorage.getItem('roomID');
     let { square, type } = cell;
@@ -57,5 +57,13 @@ const Mark = () => {
     )
 }
 
+Cell.propTypes = {
+    cell: PropTypes.shape({
+        square: PropTypes.string.isRequired,
+        type: PropTypes.oneOf(['p', 'r', 'n', 'b', 'q', 'k']),
+        color: PropTypes.oneOf(['w', 'b'])
+    })
+}
+
 
 export default Cell

frontend/src/components/MainLoader.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { createPortal } from 'react-dom'
 import { Loader, Title } from '@mantine/core'
+import PropTypes from 'prop-types';
 
 import loaderImage from '../assets/images/chess_board_loader.png'
 
@@ -27,4 +28,9 @@ const MainLoader = ({ errorMessage }) => {
     )
 }
 
+MainLoader.propTypes = {
+    errorMessage: PropTypes.string
+}
+
+
 export default MainLoader

frontend/src/components/NavbarLinks.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types';
 import { NavLink, Text, ThemeIcon } from '@mantine/core'
 import { GearIcon, HomeIcon, PlayIcon } from '@radix-ui/react-icons'
 
@@ -13,7 +14,6 @@ const NavbarLinks = () => {
 }
 
 const NavbarLink = ({ label, icon, to, index, active, setActive }) => {
-
     return (
         <NavLink
             sx={(theme) => ({
@@ -46,6 +46,15 @@ const NavbarLink = ({ label, icon, to, index, active, setActive }) => {
     )
 }
 
+NavbarLink.propTypes = {
+    label: PropTypes.string,
+    icon: PropTypes.func,
+    to: PropTypes.string,
+    index: PropTypes.number,
+    active: PropTypes.number,
+    setActive: PropTypes.func
+}
+
 const linksList = [
     { label: 'Home', icon: <HomeIcon />, to: "/home" },
     { label: 'Play Chess', icon: <PlayIcon />, to: "/play" },

frontend/src/components/Piece.jsx

@@ -2,8 +2,9 @@ import { Image, createStyles } from '@mantine/core';
 import React, { useContext, useEffect } from 'react';
 import { useDraggable } from '@dnd-kit/core'
 import { ChessGameContext } from '../context/chess-game-context';
+import PropTypes from 'prop-types';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles(() => ({
     'chess-piece': {
         outlineStyle: 'none',
         boxShadow: 'none',
@@ -79,4 +80,12 @@ const Piece = ({ cell }) => {
     }
 }
 
+Piece.propTypes = {
+    cell: PropTypes.shape({
+        square: PropTypes.string.isRequired,
+        type: PropTypes.oneOf(['p', 'r', 'n', 'b', 'q', 'k']),
+        color: PropTypes.oneOf(['w', 'b'])
+    })
+}
+
 export default Piece

frontend/src/pages/Authentication/Authentication.jsx

@@ -1,6 +1,7 @@
 import React, { useContext, useState } from 'react';
 
-import { redirect, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import PropTypes from 'prop-types';
 import { Button, Card, Container, Text, TextInput, Title } from '@mantine/core';
 import { useForm } from 'react-hook-form'
 import { ZodError, z } from 'zod';
@@ -54,6 +55,10 @@ const AuthenticationPage = (props) => {
     );
 };
 
+AuthenticationPage.propTypes = {
+    isLogin: PropTypes.bool
+}
+
 const LoginForm = () => {
     const { setIsLoggedIn } = useContext(UserDataContext)
     const { register, handleSubmit, setError, formState: { errors } } = useForm();

frontend/src/pages/Chess/ChessBoard.jsx

@@ -37,7 +37,7 @@ const useStyles = createStyles((theme) => ({
 
 const ChessBoard = () => {
     const { classes } = useStyles();
-    const { getChessBoard, handleOpponentMove, handleDrop, hasGameEnded, gameEndedReason } = useContext(ChessGameContext)
+    const { getChessBoard, handleOpponentMove, handleDrop } = useContext(ChessGameContext)
     const roomID = localStorage.getItem('roomID');
     const chessBoard = getChessBoard();
     const myColor = localStorage.getItem('myColor')

frontend/src/pages/Chess/Timer.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import PropTypes from 'prop-types';
 import { Box } from '@mantine/core';
 
 import useCountDown from '../../hooks/useCountDown'
@@ -15,4 +16,8 @@ const Timer = ({ on }) => {
     )
 }
 
+Timer.propTypes = {
+    on: PropTypes.bool
+}
+
 export default Timer

frontend/src/pages/Play/Play.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Link } from 'react-router-dom'
+import PropTypes from 'prop-types';
 import { Card, Flex, Image, NavLink, Title } from '@mantine/core'
 
 const Play = () => {
@@ -35,6 +36,13 @@ const CardItem = ({ label, description, src, to }) => {
     )
 }
 
+CardItem.propTypes = {
+    label: PropTypes.string,
+    description: PropTypes.string,
+    src: PropTypes.string,
+    to: PropTypes.string
+}
+
 const dataList = [
     { label: 'Play Online', description: 'Play vs a person of similar skill', src: 'https://www.chess.com/bundles/web/images/color-icons/blitz.a0e36339.svg', to: "/play/online" },
     { label: 'Computer', description: 'Challenge a bot from easy to master', src: 'https://www.chess.com/bundles/web/images/color-icons/computer.2318c3b4.svg', to: "/play/computer" },