Merge pull request #446 from Open-Earth-Foundation/fix/area-not-showing

Fix/area not showing
Open-Earth-Foundation · Apr 16, 2024 · 704bfa2 · 704bfa2
2 parents 9854655 + f8d7695
commit 704bfa2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 18 deletions.
diff --git a/app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/[inventory]/page.tsx
@@ -384,25 +384,25 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
                     />
                     <Box>
                       <Box className="flex gap-1">
-                        {!city?.area ? (
-                          <Text
-                            fontFamily="heading"
-                            color="border.neutral"
-                            fontSize="headline.sm"
-                            fontWeight="semibold"
-                            lineHeight="32"
-                          >
-                            N/A
-                          </Text>
+                        {inventory?.city.area! == 0 || inventory?.city.area === null ? (
+                           <Text
+                           fontFamily="heading"
+                           color="border.neutral"
+                           fontSize="headline.sm"
+                           fontWeight="semibold"
+                           lineHeight="32"
+                         >
+                           N/A
+                         </Text>
                         ) : (
                           <Text
                             fontFamily="heading"
                             color="base.light"
                             fontSize="headline.sm"
                             fontWeight="semibold"
                             lineHeight="32"
-                          >
-                            {city?.area}
+                            >
+                            {Math.round(inventory?.city.area!)}
                             <span className="text-[16px]">km2</span>
                           </Text>
                         )}

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,
@@ -638,10 +639,10 @@ function ConfirmStep({
               <Icon as={MdOutlineAspectRatio} boxSize={6} mt={1} mr={2} />
               <Box>
                 <Text fontSize="xl">
-                  {area > 0 ? (
+                  {area && 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);
@@ -734,7 +739,7 @@ export default function OnboardingSetup({
       city = await addCity({
         name: data.name,
         locode: data.locode!,
-        area,
+        area: Math.round(cityArea?.area!),
         region,
         country,
       }).unwrap();
@@ -831,7 +836,7 @@ export default function OnboardingSetup({
               cityName={getValues("city")}
               t={t}
               locode={data.locode}
-              area={ocCityData?.area!}
+              area={cityArea?.area!}
               population={cityPopulation}
             />
           )}

diff --git a/app/src/app/api/v0/city/[city]/boundary/route.ts b/app/src/app/api/v0/city/[city]/boundary/route.ts
@@ -29,7 +29,7 @@ export const GET = apiHandler(async (_req, { params }) => {
       data.bbox_north,
     ];
 
-    return NextResponse.json({ data: geoJson, boundingBox });
+    return NextResponse.json({ data: geoJson, boundingBox, area: data.area });
   } catch (error: any) {
     logger.error(error);
     return NextResponse.json({ error: error.message });

diff --git a/app/src/services/api.ts b/app/src/services/api.ts
@@ -42,13 +42,14 @@ export const api = createApi({
       transformResponse: (response: { data: CityAttributes }) => response.data,
     }),
     getCityBoundary: builder.query<
-      { data: GeoJSON; boundingBox: BoundingBox },
+      { data: GeoJSON; boundingBox: BoundingBox; area: number },
       string
     >({
       query: (cityId) => `city/${cityId}/boundary`,
       transformResponse: (response: {
         data: GeoJSON;
         boundingBox: BoundingBox;
+        area: number
       }) => response,
     }),
     getInventory: builder.query<InventoryResponse, string>({