dynamic data

app/components/TopPerformers.tsx

@@ -1,254 +1,99 @@
-let performersData = [
-    {
-        id: "1",
-        name: "Eiden",
-        score: "48/50",
-        points: "999",
-        rank: "1",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "2",
-        name: "Jackson",
-        score: "45/50",
-        points: "997",
-        rank: "2",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "3",
-        name: "Emma Aria",
-        score: "43/50",
-        points: "994",
-        rank: "3",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "4",
-        name: "John Doe",
-        score: "40/50",
-        points: "990",
-        rank: "4",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "5",
-        name: "Jane Cooper",
-        score: "37/50",
-        points: "987",
-        rank: "5",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "6",
-        name: "John Doe",
-        score: "35/50",
-        points: "982",
-        rank: "6",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "7",
-        name: "Alice",
-        score: "33/50",
-        points: "980",
-        rank: "7",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "8",
-        name: "Bob",
-        score: "32/50",
-        points: "978",
-        rank: "8",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "9",
-        name: "Charlie",
-        score: "30/50",
-        points: "975",
-        rank: "9",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "10",
-        name: "Diana",
-        score: "28/50",
-        points: "972",
-        rank: "10",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "11",
-        name: "Edward",
-        score: "27/50",
-        points: "970",
-        rank: "11",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "12",
-        name: "Fiona",
-        score: "26/50",
-        points: "968",
-        rank: "12",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "13",
-        name: "George",
-        score: "25/50",
-        points: "965",
-        rank: "13",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "14",
-        name: "Hannah",
-        score: "23/50",
-        points: "962",
-        rank: "14",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "15",
-        name: "Ian",
-        score: "22/50",
-        points: "960",
-        rank: "15",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    },
-    {
-        id: "16",
-        name: "Julia",
-        score: "20/50",
-        points: "957",
-        rank: "16",
-        program: "Graduate Program",
-        avatar: "avatar4.png"
-    },
-    {
-        id: "17",
-        name: "Kyle",
-        score: "19/50",
-        points: "955",
-        rank: "17",
-        program: "Graduate Program",
-        avatar: "avatar5.png"
-    },
-    {
-        id: "18",
-        name: "Laura",
-        score: "18/50",
-        points: "953",
-        rank: "18",
-        program: "Graduate Program",
-        avatar: "avatar6.png"
-    },
-    {
-        id: "19",
-        name: "Michael",
-        score: "17/50",
-        points: "950",
-        rank: "19",
-        program: "Graduate Program",
-        avatar: "avatar1.png"
-    },
-    {
-        id: "20",
-        name: "Nancy",
-        score: "16/50",
-        points: "947",
-        rank: "20",
-        program: "Graduate Program",
-        avatar: "avatar2.png"
-    },
-    {
-        id: "21",
-        name: "Oliver",
-        score: "15/50",
-        points: "945",
-        rank: "21",
-        program: "Graduate Program",
-        avatar: "avatar3.png"
-    }
-];
+import React, { useEffect, useState } from 'react';
 
-const sortedData = performersData.sort((a, b) => parseInt(a.rank) - parseInt(b.rank));
+interface Performer {
+  id: number;
+  name: string;
+  rank: number;
+  avatar: string;
+  score: number;
+  program: string;
+  points: number;
+}
 
-const highestRank = sortedData[0];
-const secondHighestRank = sortedData[1];
-const thirdHighestRank = sortedData[2];
+export default function TopPerformers() {
+  const [data, setData] = useState<Performer[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
-// console.log('The highest rank is:', highestRank);
-// console.log('The second highest rank is:', secondHighestRank);
-// console.log('The Third highest rank is:', thirdHighestRank);
+  useEffect(() => {
+    fetch('https://iimtt-api.s38.siliconpin.com/api/top-performers')
+      .then(res => {
+        if (!res.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return res.json();
+      })
+      .then(data => {
+        const sortedData: Performer[] = data.sort((a: Performer, b: Performer) => a.rank - b.rank);
+        setData(sortedData);
+        setLoading(false);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
 
+  if (loading) {
+    return <div>Loading...</div>;
+  }
 
-export default function(){
-    return(
-        <div className=''>
-            <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>Top Performers <img src="../../assets/right-arrow.svg" alt="" /></h2>
-            <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
-            <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
-                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='mx-auto h-[52px] w-[60px] ' src={`../../assets/${secondHighestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
-                </div>
-                <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='-mt-10' src="../../assets/crown.png" alt="" />
-                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${highestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
-                </div>
-                <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
-                    <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
-                        <img className='mx-auto h-[52px] w-[60px]' src={`../../assets/${thirdHighestRank.avatar}`} alt="" />
-                        <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
-                    </div>
-                    <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
-                    <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
-                </div>
-            </div>
-            <div className='flex flex-col'>
-                {sortedData.slice(3).map(data => (
-                    <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
-                        <p className='text-[11px] font-[700]'># {data.rank}</p>
-                        <img className='w-[35px] h-[35px]' src={`../../assets/${data.avatar}`} alt="" />
-                        <div>
-                            <p className='text-[14px] font-[700]'>{data.name}</p>
-                            <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
-                        </div>
-                        <div className='flex flex-col justify-center place-items-center'>
-                            <img src="../../assets/points-icon.svg" alt="" />
-                            <p className='text-[10px] font-[700]'>{data.points} Points</p>
-                        </div>
-                    </div>
-                ))}
-            </div>
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  const [highestRank, secondHighestRank, thirdHighestRank, ...sortedData] = data;
+
+  return (
+    <div className=''>
+      <h2 className='text-[20px] font-[700] inline-flex px-4 pt-4'>
+        Top Performers <img src="../../assets/right-arrow.svg" alt="" />
+      </h2>
+      <p className='text-[16px] font-[700] text-[#6E6E6E] px-4 pb-4 mb-28'>Knowledge Quest</p>
+      <div className='flex flex-row justify-between place-items-center space-x-2 border-b-[1px] border-[#CFCFCF]'>
+        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='mx-auto h-[52px] w-[60px]' src={secondHighestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth2.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{secondHighestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{secondHighestRank.score}</p>
         </div>
-    )
-}
+        <div className='w-full mx-auto h-[130px] -mt-[42px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='-mt-10' src="../../assets/crown.png" alt="" />
+            <img className='mx-auto h-[52px] w-[60px]' src={highestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth1.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{highestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{highestRank.score}</p>
+        </div>
+        <div className='w-full mx-auto h-[88px] border-x-[1px] border-t-[1px] border-[#CFCFCF] rounded-t-[10px] justify-center place-items-center mx-auto py-4'>
+          <div className='-mt-10 relative flex flex-col justify-center place-items-center'>
+            <img className='mx-auto h-[52px] w-[60px]' src={thirdHighestRank.avatar} alt="" />
+            <img className='absolute mt-12' src="../../assets/bacth3.svg" alt="" />
+          </div>
+          <p className='text-[12px] font-[700] text-center mt-4'>{thirdHighestRank.name}</p>
+          <p className='text-[12px] font-[700] text-center'>{thirdHighestRank.score}</p>
+        </div>
+      </div>
+      <div className='flex flex-col'>
+        {sortedData.map(data => (
+          <div key={data.id} className='flex flex-row justify-between place-items-center border-b-[1px] border-[#CFCFCF] p-2'>
+            <p className='text-[11px] font-[700]'># {data.rank}</p>
+            <img className='w-[35px] h-[35px]' src={data.avatar} alt="" />
+            <div>
+              <p className='text-[14px] font-[700]'>{data.name}</p>
+              <p className='text-[10px] font-[700] text-[#6E6E6E]'>{data.program}</p>
+            </div>
+            <div className='flex flex-col justify-center place-items-center'>
+              <img src="../../assets/points-icon.svg" alt="" />
+              <p className='text-[10px] font-[700]'>{data.points} Points</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}