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 (