import React, { useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom'; import { Button, Group, Stack, Text, Title } from '@mantine/core'; const Challenges = () => { const navigate = useNavigate(); const [challenges, setChallenges] = useState([]); const [error, setError] = useState(null); useEffect(() => { if (error) return; const fetchData = async () => { let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/challenges`; try { const response = await fetch(url, { credentials: 'include' }); const data = await response.json(); if (response.ok) { setChallenges(data); } else { setError('Cannot fetch challenges') } } catch (error) { console.log(error); setError("Something went wrong") } } fetchData(); }, [error]) if (!challenges || challenges.length === 0) { return ( Challenges No challenges found ) } if (error) { return ( <> Challenges {error} setError(null)} fw={800} sx={{ cursor: 'pointer' }}>Retry ) } return (
Challenges { challenges.map(({ id, challenger, roomID, color, timeLimit }, index) => { console.log(challenger, roomID, color, timeLimit); return ( Challenge by {challenger} ) }) }
) } export default Challenges