From 88e269de876daf53980bc96fad4300acc388a05e Mon Sep 17 00:00:00 2001
From: Thulina Wickramasinghe <thulinawickramasinghe@gmail.com>
Date: Sat, 17 Aug 2024 21:42:38 +0530
Subject: [PATCH] wip(hall-of-fame): add dynamic data import

---
 src/pages/hall-of-fame.jsx     | 23 ++++++++++++++---------
 src/utils/compute-data-path.js |  5 +++++
 src/utils/fetch-old-data.js    |  7 -------
 3 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/compute-data-path.js
 delete mode 100644 src/utils/fetch-old-data.js

diff --git a/src/pages/hall-of-fame.jsx b/src/pages/hall-of-fame.jsx
index 81efe67..ec24738 100644
--- a/src/pages/hall-of-fame.jsx
+++ b/src/pages/hall-of-fame.jsx
@@ -4,6 +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 {
   AnimatedSwitcher,
   Filters,
@@ -16,22 +17,26 @@ import { useGhostLegion, useRound } from "@sliit-foss/bashaway-ui/hooks";
 import { Ghost } from "@sliit-foss/bashaway-ui/icons";
 import { Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
 import { computeFilterQuery, computeSortQuery } from "@sliit-foss/bashaway-ui/utils";
-import { fetchPastLeaderboardData } from "@/utils/fetch-old-data";
 
 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 { data: scores, isFetching } = fetchPastLeaderboardData({ page, filters, sorts, round, ghostLegion, year: 2023 });
+  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]);
 
-  }, [])
   useEffect(() => {
     if (page !== 1) setPage(1);
   }, [filters, sorts, round, ghostLegion]);
@@ -75,13 +80,13 @@ const HallOfFame = () => {
           </div>
         </div>
         <AnimatedSwitcher
-          show={isFetching}
+          show={false}
           className={`w-full flex flex-col gap-5 min-h-[150px] xl:min-h-[250px] 2xl:min-h-[350px]`}
           component={<ScoreCardSkeleton />}
           alternateComponent={
-            scores?.data?.docs?.length ? (
+            scores?.length ? (
               <>
-                {scores.data.docs.map((item, index) => (
+                {scores.map((item, index) => (
                   <ScoreCard item={item} round={round} key={`score-card-${index}`} />
                 ))}
               </>
diff --git a/src/utils/compute-data-path.js b/src/utils/compute-data-path.js
new file mode 100644
index 0000000..e4e732b
--- /dev/null
+++ b/src/utils/compute-data-path.js
@@ -0,0 +1,5 @@
+export const computePastLeaderboardDataPath = ({ page, filters, sorts, round, ghostLegion, year }) => {
+  const round2Path = ghostLegion == true ? "/ghost-legion" : "/final";
+  const path = `${year}/round${round}${round == 1 ? "" : round2Path}`;
+  return path;
+};
diff --git a/src/utils/fetch-old-data.js b/src/utils/fetch-old-data.js
deleted file mode 100644
index 1614c46..0000000
--- a/src/utils/fetch-old-data.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const fetchPastLeaderboardData = async ({ page, filters, sorts, round, ghostLegion, year }) => {
-    const round2Path = ghostLegion == true ? '/ghost-legion' : '/final';
-    const path = `${year}/round${round}${round == 1 ? '': round2Path}`
-    const data = await import(`../../data/annual-leaderboard/${path}.json`)
-    console.log('HOF data', data);
-    console.log('Unused yet', page, filters, sorts);
-};
\ No newline at end of file