fix: show area in onboarding confirm page

Open-Earth-Foundation · Apr 15, 2024 · f84c79f · f84c79f
1 parent cbad07f
commit f84c79f
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/app/src/app/[lng]/onboarding/setup/page.tsx b/app/src/app/[lng]/onboarding/setup/page.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from "@/i18n/client";
 import { useAppDispatch, useAppSelector } from "@/lib/hooks";
 import type { CityAttributes } from "@/models/City";
 import {
+  api,
   useAddCityMutation,
   useAddCityPopulationMutation,
   useAddInventoryMutation,
@@ -641,7 +642,7 @@ function ConfirmStep({
                   {area > 0 ? (
                     <>
                       {" "}
-                      {area}km<sup>2</sup>
+                      {Math.round(area)}km<sup>2</sup>
                     </>
                   ) : (
                     "N/A"
@@ -716,6 +717,10 @@ export default function OnboardingSetup({
   const regionPopulationYear = watch("regionPopulationYear");
   const countryPopulationYear = watch("countryPopulationYear");
 
+  const { data: cityArea, isLoading: isCityAreaLoading } = api.useGetCityBoundaryQuery(data.locode!, {
+    skip: !data.locode,
+  });
+
   const onConfirm = async () => {
     // save data in backend
     setConfirming(true);
@@ -831,7 +836,7 @@ export default function OnboardingSetup({
               cityName={getValues("city")}
               t={t}
               locode={data.locode}
-              area={ocCityData?.area!}
+              area={cityArea?.area!}
               population={cityPopulation}
             />
           )}