feat: move adm0data request to client

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!} />
+      )}
     </>
   );
 }

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
+  );