bs-p2/app/routes/quiz.result.tsx

import React, { useState, useEffect } from "react";
import QuizHeader from '~/components/QuizHeader';

interface ResultData {
    totalQuestions: number;
    correctAnswers: number;
    message:        string;

}
let performersData = [
    {
        id: "1",
        name: "Eiden",
        score: "48/50",
        points: "999",
        rank: "1",
        program: "Graduate Program",
        avatar: "/assets/avatar1.png"
    },
    {
        id: "2",
        name: "Jackson",
        score: "45/50",
        points: "997",
        rank: "2",
        program: "Graduate Program",
        avatar: "/assets/avatar2.png"
    },
    {
        id: "3",
        name: "Emma Aria",
        score: "43/50",
        points: "994",
        rank: "3",
        program: "Graduate Program",
        avatar: "/assets/avatar3.png"
    },
    {
        id: "4",
        name: "John Doe",
        score: "40/50",
        points: "990",
        rank: "4",
        program: "Graduate Program",
        avatar: "/assets/avatar4.png"
    },
    {
        id: "5",
        name: "Jane Cooper",
        score: "37/50",
        points: "987",
        rank: "5",
        program: "Graduate Program",
        avatar: "/assets/avatar5.png"
    },
    {
        id: "6",
        name: "John Doe",
        score: "35/50",
        points: "982",
        rank: "6",
        program: "Graduate Program",
        avatar: "/assets/avatar6.png"
    },
    {
        id: "7",
        name: "Alice",
        score: "33/50",
        points: "980",
        rank: "7",
        program: "Graduate Program",
        avatar: "/assets/avatar1.png"
    },
    {
        id: "8",
        name: "Bob",
        score: "32/50",
        points: "978",
        rank: "8",
        program: "Graduate Program",
        avatar: "/assets/avatar2.png"
    },
    {
        id: "9",
        name: "Charlie",
        score: "30/50",
        points: "975",
        rank: "9",
        program: "Graduate Program",
        avatar: "/assets/avatar3.png"
    },
    {
        id: "10",
        name: "Diana",
        score: "28/50",
        points: "972",
        rank: "10",
        program: "Graduate Program",
        avatar: "/assets/avatar4.png"
    }
];
export default function QuizResult(){
    const [resultData, setResultData] = useState<ResultData | null>(null);

    useEffect(() => {
        let urlParams = new URLSearchParams(window.location.search);
        let quizIdValue = urlParams.get('id');
        console.log(quizIdValue);
        
        fetch(`https://api.teachertrainingkolkata.in/api/quizresult-aftersubmit?id=${quizIdValue}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log(data.totalQuestions);
                setResultData(data);
            })
            .catch(error => {
                console.error('There was a problem with the fetch operation:', error);
            });
    }, []); // Empty dependency array to run only once on mount

    return (
        <div>
            <QuizHeader />

            <div className='container mx-auto max-w-[890px] shadow-xl rounded-xl  py-8 mb-8 border-[1px] border-[#DCDCDC] rounded-[10px] mt-[50px]'>
                <button className="float-right absolute right-0 2xl:right-80 top-32 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
                <div className='flex flex-col justify-center place-items-center space-y-4 py-6 px-10'>
                    <img src="/assets/celebration-icon.png" alt="" />
                    {resultData && (
                        <div className="flex flex-col justify-center place-items-center">
                            <p className='text-[24px] font-[700]'>{`You scored ${resultData.correctAnswers}/${resultData.totalQuestions}`}</p>
                            <p className='text-[20px] font-[500] text-[#525252]'>{resultData.message}</p>
                        </div>
                    )}
                    <a href="#" className='bg-[#000] text-[20px] font-[600] text-[#FFF] inline-flex place-items-center px-[50px] py-[15px] rounded-[10px]'><img src="/assets/reload.svg" alt="" /> &nbsp;Another Quiz</a>
                </div>
                <p className="text-[20px] font-[700] py-3 border-y-[1px] border-y-[#CFCFCF] px-10">Top Performers of this Quiz</p>
                <div className="flex flex-col">
                    {
                        performersData.map((data) => (
                            <div key={data.id} className="flex flex-row justify-between place-items-center px-10 py-2.5 hover:bg-[#FDF2E7] duration-500">
                                <div className="flex flex-row space-x-6 place-items-center justify-center">
                                    <p className="text-[14px] font-[700]"># {data.id}</p>
                                    <img className="w-[50px] h-[50px]" src={data.avatar} alt="" />
                                    <div className="flex flex-col">
                                        <p className="text-[16px] font-[700]">{data.name}</p>
                                        <p className="text-[12px] font-[500] text-[#6E6E6E]">{data.program}</p>
                                    </div>
                                </div>
                                <div className="flex flex-col justify-center place-items-center">
                                    <img className="w-[26px] h-[30px]" src="/assets/batch-icon.svg" alt="" />
                                    <p className="text-[14px] font-[700]">{data.score}</p>
                                </div>
                            </div>
                        ))
                    }
                    
                    
                </div>
            </div>
        </div>
    )
}