New component Challenges.jsx added which lists all the challenges

sent to the user and allow the user to accept or decline it.
TODO:
- Add API for fetching challenges.
- Implement onClick for Decline button in Challenges component

frontend/src/components/Challenges.jsx

@@ -0,0 +1,70 @@
+import { Button, Group, Stack, Text, Title } from '@mantine/core';
+import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom';
+
+const Challenges = () => {
+    const navigate = useNavigate();
+    const dummyChallenges = [
+        { challenger: 'moonpatel', roomID: 'sgnkjsdbnojsnvjsdnkl' },
+        { challenger: 'user1', roomID: 'sgnkjsdbnojsnvjsdnkl' }
+    ]
+    const [challenges, setChallenges] = useState(dummyChallenges);
+
+    useEffect(() => {
+        const abortController = new AbortController();
+        let response = null;
+
+        const fetchData = async () => {
+            let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/challenges`;
+            try {
+                response = await fetch(url, { signal: abortController.signal })
+                const data = await response.json();
+                if (data.success) {
+                    setChallenges(data.challenges);
+                } else {
+                    throw data.error;
+                }
+            } catch (error) {
+                if (error.message === 'The user aborted a request.');
+                else {
+                    console.log('Error fetching data');
+                    throw error;
+                }
+            }
+        }
+    })
+
+    if (!challenges || challenges.length === 0) {
+        return (
+            <>
+                <Title mt="20px" mb="10px" order={3}>Challenges</Title>
+                <Text>No challenges found</Text>
+            </>
+        )
+    }
+
+    return (
+        <div>
+            <Title mt="20px" mb="10px" order={3}>Challenges</Title>
+            <Stack>
+                {
+                    challenges.map(({ challenger, roomID }) => {
+                        return (
+                            <Group position='apart'>
+                                <Text>Challenge by {challenger}</Text>
+                                <Group position='center'>
+                                    <Button color='lime' onClick={() => navigate(`/game/friend/${roomID}`)}>Accept</Button>
+                                    <Button color='gray'>Decline</Button>
+                                </Group>
+                            </Group>
+                        )
+                    })
+                }
+            </Stack>
+        </div>
+    )
+}
+
+
+
+export default Challenges

frontend/src/pages/Play/PlayFriend.jsx

@@ -3,6 +3,8 @@ import { Button, Card, CopyButton, Flex, Group, Image, Modal, NativeSelect, NavL
 import { useDisclosure } from '@mantine/hooks'
 import { IconSearch, IconUserCircle } from '@tabler/icons-react'
 import FriendsList from '../../components/FriendsList'
+import { Form } from 'react-router-dom'
+import Challenges from '../../components/Challenges'
 
 const createChallengeLink = (color) => {
     let challengeLink = Math.floor(Math.random() * 100_000_000).toString();
@@ -16,23 +18,24 @@ const createChallengeLink = (color) => {
 
 const PlayFriend = () => {
     const [opened, { open, close }] = useDisclosure(false);
-    const [color, setColor] = useState('W');
+    const [joinChallengeModalState, modalFunctions] = useDisclosure(false);
     return (
         <>
             <Modal zIndex={10} opened={opened} onClose={close} title={<Text mx="auto" size="xl">Create Challenge Link</Text>} centered>
                 <Text>Start a game with anyone</Text>
                 <div>
-                    <NativeSelect value={color} onChange={(evt) => setColor(evt.target.value)} my="20px" label={<Text mx="auto" order={3}>I play as</Text>} placeholder='choose your color' data={[
+                    <NativeSelect onChange={(evt) => setColor(evt.target.value)} my="20px" label={<Text mx="auto" order={3}>I play as</Text>} placeholder='choose your color' data={[
                         { value: 'W', label: 'White' },
                         { value: 'B', label: 'Black' },
                         { value: 'RANDOM', label: 'Random' }
                     ]} />
                 </div>
-                <CopyButton value={createChallengeLink(color)} timeout={1000000}>
+                {/* TODO: update createChallengeLink function */}
+                {/* <CopyButton>
                     {
-                        ({ copied, copy }) => <Button onClick={copy} color={copied ? 'gray' : 'lime'}> {copied ? 'Copied' : 'Copy Link'} </Button>
+                        ({ copied, copy }) => <Button disabled onClick={copy} color={copied ? 'gray' : 'lime'}> {copied ? 'Copied' : 'Copy Link'} </Button>
                     }
-                </CopyButton>
+                </CopyButton> */}
             </Modal>
             <Card
                 sx={{
@@ -51,6 +54,7 @@ const PlayFriend = () => {
                     <Button color='lime' onClick={open}>Create Challenge Link</Button>
                     <Button color='lime'>Join using Challenge Link</Button>
                 </Flex>
+                <Challenges />
             </Card>
         </>
     )