Fix(hall-of-fame): fix bug in dynamic imports

src/components/layout/header.jsx

@@ -77,9 +77,7 @@ const Header = ({ className }) => {
               className="hidden xsm:flex gap-2"
             >
               <div className="group flex gap-1.5 items-center">
-                <span className="link ml-8 xl:ml-0">
-                  {isHallOfFame ? "Leaderboard" : "Hall of Fame"}
-                </span>
+                <span className="link ml-8 xl:ml-0">{isHallOfFame ? "Leaderboard" : "Hall of Fame"}</span>
                 <LinkIcon className="transform -rotate-45 before:w-[1.2rem] xl:before:w-[0.6rem] before:group-hover:w-[1.45rem] xl:before:group-hover:w-[0.75rem] translate-y-[-0.1rem]" />
               </div>
             </Link>

src/hooks/past-data.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+const usePastData = ({ round, ghostLegion, year = 2023 }) => {
+  const [pastData, setPastData] = useState({});
+
+  useEffect(() => {
+    const fetchPastLeaderboadData = async () => {
+      let path = round == 1 ? "round1" : ghostLegion == true ? "ghost-legion" : "final";
+      const data = (await import(`../../data/annual-leaderboard/${year}/${path}.json`)).default;
+      //   console.log('Before mapping', data);
+      const transformedData = data.map((item, index) => ({ ...item, place: index + 1 }));
+      //   console.log('After mapping', data);
+      setPastData(transformedData);
+    };
+
+    fetchPastLeaderboadData();
+  }, [round, ghostLegion]);
+
+  return pastData;
+};
+
+export default usePastData;

src/pages/hall-of-fame.jsx

@@ -4,7 +4,7 @@ import { ScoreCardSkeleton } from "@/components";
 import { ScoreCard } from "@/components/home";
 import { filters as filterData, sorts as sortData } from "@/filters";
 import { useTitle } from "@/hooks";
-import { computePastLeaderboardDataPath } from "@/utils/compute-data-path";
+import usePastData from "@/hooks/past-data";
 import {
   AnimatedSwitcher,
   Filters,
@@ -22,20 +22,12 @@ const HallOfFame = () => {
   const [page, setPage] = useState(1);
   const [filters, setFilters] = useState(computeFilterQuery(filterData));
   const [sorts, setSorts] = useState(computeSortQuery(sortData));
-  const [scores, setScores] = useState({});
-
   const { rounds, round, roundKey, onRoundChange } = useRound();
   const { ghostLegion, toggleGhostLegion } = useGhostLegion();
-  const dataPath = computePastLeaderboardDataPath({ page, filters, sorts, round, ghostLegion, year: 2023 });
-
-  useEffect(() => {
-    const fetchPastLeaderboadData = async () => {
-      const data = (await import(`../../data/annual-leaderboard/${dataPath}.json`)).default;
-      setScores(data);
-    };
-
-    fetchPastLeaderboadData();
-  }, [dataPath]);
+  const scores = usePastData({
+    round,
+    ghostLegion
+  });
 
   useEffect(() => {
     if (page !== 1) setPage(1);