From 164e0f8220d8caa30aaa85de4ab9a8710f8dafbc Mon Sep 17 00:00:00 2001
From: Bohdan Garchu <bohdan.garchu@gmail.com>
Date: Mon, 20 Jan 2025 21:14:44 +0100
Subject: [PATCH] feat: move adm0data request to client

---
 src/app/comparison-portal/loading.tsx | 12 ------------
 src/app/comparison-portal/page.tsx    | 23 ++++++++++++++++-------
 src/domain/hooks/globalHooks.ts       | 13 ++++++++++++-
 3 files changed, 28 insertions(+), 20 deletions(-)
 delete mode 100644 src/app/comparison-portal/loading.tsx

diff --git a/src/app/comparison-portal/loading.tsx b/src/app/comparison-portal/loading.tsx
deleted file mode 100644
index 0afb1abf..00000000
--- a/src/app/comparison-portal/loading.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
-import SelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
-
-export default function Loading() {
-  return (
-    <>
-      <h1>Comparison Portal</h1>
-      <SelectionSkeleton />
-      <ComparisonAccordionSkeleton nItems={5} />
-    </>
-  );
-}
diff --git a/src/app/comparison-portal/page.tsx b/src/app/comparison-portal/page.tsx
index 261df506..d480ba4b 100644
--- a/src/app/comparison-portal/page.tsx
+++ b/src/app/comparison-portal/page.tsx
@@ -1,15 +1,24 @@
+'use client';
+
+import ComparisonAccordionSkeleton from '@/components/ComparisonPortal/ComparisonAccordionSkeleton';
 import ComparisonPortal from '@/components/ComparisonPortal/CountryComparison';
-import container from '@/container';
-import { GlobalDataRepository } from '@/domain/repositories/GlobalDataRepository';
+import SelectionSkeleton from '@/components/ComparisonPortal/CountrySelectSkeleton';
+import { useFcsData, useMapDataForCountries } from '@/domain/hooks/globalHooks';
 
-export default async function Page() {
-  const globalRepo = container.resolve<GlobalDataRepository>('GlobalDataRepository');
-  const countryMapData = await globalRepo.getMapDataForCountries();
-  const globalFcsData = await globalRepo.getFcsData();
+export default function Page() {
+  const { data: countryMapData, isLoading: isCountryMapDataLoading } = useMapDataForCountries();
+  const { data: globalFcsData, isLoading: isFcsDataLoading } = useFcsData();
   return (
     <>
       <h1>Comparison Portal</h1>
-      <ComparisonPortal countryMapData={countryMapData} globalFcsData={globalFcsData} />
+      {isCountryMapDataLoading || isFcsDataLoading ? (
+        <>
+          <SelectionSkeleton />
+          <ComparisonAccordionSkeleton nItems={5} />
+        </>
+      ) : (
+        <ComparisonPortal countryMapData={countryMapData!} globalFcsData={globalFcsData!} />
+      )}
     </>
   );
 }
diff --git a/src/domain/hooks/globalHooks.ts b/src/domain/hooks/globalHooks.ts
index ffc03c3f..32a4f7f8 100644
--- a/src/domain/hooks/globalHooks.ts
+++ b/src/domain/hooks/globalHooks.ts
@@ -4,7 +4,9 @@ import { cachedQueryClient } from '@/config/queryClient';
 import container from '@/container';
 import { CountryNutrition } from '@/domain/entities/country/CountryNutrition';
 
+import { GlobalFcsData } from '../entities/country/CountryFcsData';
 import { CountryIpcData } from '../entities/country/CountryIpcData';
+import { CountryMapDataWrapper } from '../entities/country/CountryMapData';
 import { GlobalDataRepository } from '../repositories/GlobalDataRepository';
 
 const globalRepo = container.resolve<GlobalDataRepository>('GlobalDataRepository');
@@ -39,10 +41,19 @@ export const useNutritionQuery = (enabled: boolean) =>
   );
 
 export const useMapDataForCountries = () =>
-  useQuery(
+  useQuery<CountryMapDataWrapper>(
     {
       queryKey: ['fetchMapDataForCountry'],
       queryFn: globalRepo.getMapDataForCountries,
     },
     cachedQueryClient
   );
+
+export const useFcsData = () =>
+  useQuery<GlobalFcsData>(
+    {
+      queryKey: ['fetchFcsData'],
+      queryFn: globalRepo.getFcsData,
+    },
+    cachedQueryClient
+  );