Untitled

import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Box, Button, Text } from '@chakra-ui/react';

const Result = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const { name, score, totalQuestions } = location.state;

  useEffect(() => {
    const storedLeaders = JSON.parse(localStorage.getItem('leaders')) || [];
    const newLeader = { name, score, totalQuestions };

    // Check for existing entry and update it if found
    const leaderIndex = storedLeaders.findIndex(leader => leader.name === name);
    if (leaderIndex >= 0) {
      storedLeaders[leaderIndex] = newLeader;
    } else {
      storedLeaders.push(newLeader);
    }

    localStorage.setItem('leaders', JSON.stringify(storedLeaders.sort((a, b) => b.score - a.score)));
  }, [name, score, totalQuestions]);

  const handleRetry = () => {
    navigate('/');
  };

  return (
    <Box p={5} w="660px" m="auto" mt="20vh">
      <Text mb={4}>Quiz Result</Text>
      <Text mb={4}>Name: {name}</Text>
      <Text mb={4}>Score: {score} / {totalQuestions}</Text>
      <Text mb={4}>Percentage: {((score / totalQuestions) * 100).toFixed(2)}%</Text>
      <Button onClick={handleRetry}>Retry</Button>
      <Button onClick={() => navigate('/leaderboard')}>Leaderboard</Button>
    </Box>
  );
};

export default Result;