Merge branch 'develop'

Open-Earth-Foundation · Apr 16, 2024 · 5ecc60d · 5ecc60d
2 parents 8c9f6b6 + 8cdd40b
commit 5ecc60d
Show file tree

Hide file tree

Showing 35 changed files with 2,146 additions and 812 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -35,15 +35,15 @@
     "@chakra-ui/react": "^2.8.2",
     "@huggingface/inference": "^2.6.4",
     "@react-email/components": "^0.0.11",
-    "@reduxjs/toolkit": "^1.9.7",
+    "@reduxjs/toolkit": "^2.2.3",
     "@storybook/cli": "^7.6.12",
     "@storybook/react": "^7.4.5",
     "@storybook/testing-library": "^0.2.2",
     "@types/bcrypt": "^5.0.2",
     "@types/geojson": "^7946.0.14",
     "@types/http-errors": "^2.0.4",
     "@types/js-cookie": "^3.0.6",
-    "@types/jsonwebtoken": "^9.0.4",
+    "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "20.11.5",
     "@types/nodemailer": "^6.4.14",
     "@types/pg": "^8.11.4",
@@ -73,8 +73,8 @@
     "next": "14.1.3",
     "next-auth": "^4.24.5",
     "nodemailer": "^6.9.13",
-    "openai": "^4.28.0",
-    "pg": "^8.11.3",
+    "openai": "^4.33.0",
+    "pg": "^8.11.5",
     "pg-hstore": "^2.3.4",
     "pigeon-maps": "^0.21.3",
     "pino": "^8.16.2",
@@ -83,15 +83,15 @@
     "react-circle-flags": "^0.0.20",
     "react-dom": "18.2.0",
     "react-email": "^2.1.0",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.51.3",
     "react-i18next": "^14.0.5",
     "react-icons": "^4.11.0",
     "react-intersection-observer": "^9.8.1",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.1.1",
     "redux-persist": "^6.0.0",
     "sequelize": "^6.37.1",
     "sequelize-cli": "^6.6.2",
-    "tailwindcss": "3.4.1",
+    "tailwindcss": "3.4.3",
     "tsx": "^4.7.0",
     "typescript": "5.3.3",
     "uuid": "^9.0.1",
@@ -103,9 +103,9 @@
     "@storybook/addon-interactions": "^7.4.5",
     "@storybook/addon-links": "^7.6.17",
     "@storybook/blocks": "^8.0.4",
-    "@storybook/nextjs": "^7.6.16",
+    "@storybook/nextjs": "^8.0.8",
     "@types/glob": "^8.1.0",
-    "cypress": "^13.6.4",
+    "cypress": "^13.7.3",
     "glob": "^10.3.10",
     "prettier": "3.2.5",
     "sequelize-auto": "^0.8.8",

diff --git a/app/src/app/[lng]/[inventory]/data/[step]/SubsectorDrawer.tsx b/app/src/app/[lng]/[inventory]/data/[step]/SubsectorDrawer.tsx
@@ -242,7 +242,7 @@ export function SubsectorDrawer({
   const {
     register,
     handleSubmit,
-    formState: { errors, isSubmitting, isDirty },
+    formState: { errors, isSubmitting, isDirty, isValid },
     watch,
     reset,
     control,
@@ -510,21 +510,23 @@ export function SubsectorDrawer({
                         <h2>
                           <AccordionButton px="16px">
                             <HStack w="full" p={0} m={0}>
-                              {isScopeCompleted(scope.value, scopeData) ? (
-                                <Tag color="interactive.tertiary" border="none">
-                                  <BsCheckCircle
-                                    color="interactive.tertiary"
-                                    size="32px"
-                                  />
-                                </Tag>
-                              ) : (
-                                <Tag
-                                  color="sentiment.negativeDefault"
-                                  border="none"
-                                >
-                                  <RiErrorWarningLine size="32px" />
-                                </Tag>
-                              )}
+                              {
+                                !isDirty && !isScopeCompleted(scope.value, scopeData) ? "": isScopeCompleted(scope.value, scopeData) && isValid && !isDirty? (
+                                  <Tag color="interactive.tertiary" border="none">
+                                    <BsCheckCircle
+                                      color="interactive.tertiary"
+                                      size="32px"
+                                    />
+                                  </Tag>
+                                ) : (
+                                  <Tag
+                                    color="sentiment.negativeDefault"
+                                    border="none"
+                                  >
+                                    <RiErrorWarningLine size="32px" />
+                                  </Tag>
+                                )
+                              }
                               <Box as="span" flex="1" textAlign="left" w="full">
                                 <Heading
                                   size="title.md"
@@ -543,9 +545,7 @@ export function SubsectorDrawer({
                                 >
                                   {scope.label}
                                 </Text>
-                                {isScopeCompleted(scope.value, scopeData) ? (
-                                  ""
-                                ) : (
+                                {!isDirty && isScopeCompleted(scope.value, scopeData) ? null : isScopeCompleted(scope.value, scopeData) && isValid && !isDirty? (
                                   <Text
                                     color="sentiment.negativeDefault"
                                     size="body.md"
@@ -555,7 +555,7 @@ export function SubsectorDrawer({
                                   >
                                     {t("save-missing-scope-info")}
                                   </Text>
-                                )}
+                                ): ""}
                               </Box>
 
                               <AccordionIcon

diff --git a/app/src/app/[lng]/[inventory]/data/[step]/page.tsx b/app/src/app/[lng]/[inventory]/data/[step]/page.tsx
@@ -33,7 +33,9 @@ import {
   Button,
   Card,
   Center,
+  CircularProgress,
   Flex,
+  HStack,
   Heading,
   Icon,
   IconButton,
@@ -483,24 +485,30 @@ export default function AddDataSteps({
     {},
   );
 
+  const [disconnectingDataSourceId, setDisconnectingDataSourceId] = useState<
+    string | null
+  >(null);
   const [disconnectThirdPartyData, { isLoading: isDisconnectLoading }] =
     api.useDisconnectThirdPartyDataMutation();
 
   const onDisconnectThirdPartyData = async (
     source: DataSourceWithRelations,
   ) => {
     if (isSourceConnected(source)) {
-      source.inventoryValues!.forEach(
-        async (inventoryValue: InventoryValueAttributes) => {
-          await disconnectThirdPartyData({
-            inventoryId: inventoryValue.inventoryId,
-            subCategoryId: inventoryValue.subCategoryId,
-          }).then((res: any) => {
-            // Todo show alert
-            onSearchDataSourcesClicked();
-          });
-        },
+      setDisconnectingDataSourceId(source.datasourceId);
+      await Promise.all(
+        source.inventoryValues!.map(
+          async (inventoryValue: InventoryValueAttributes) => {
+            return await disconnectThirdPartyData({
+              inventoryId: inventoryValue.inventoryId,
+              subCategoryId: inventoryValue.subCategoryId,
+            });
+          },
+        ),
       );
+      // TODO show alert
+      setDisconnectingDataSourceId(null);
+      onSearchDataSourcesClicked();
     } else {
       console.log("Something went wrong");
     }
@@ -751,7 +759,10 @@ export default function AddDataSteps({
                         px={6}
                         py={4}
                         onClick={() => onDisconnectThirdPartyData(source)}
-                        isLoading={isDisconnectLoading}
+                        isLoading={
+                          isDisconnectLoading &&
+                          source.datasourceId === disconnectingDataSourceId
+                        }
                         onMouseEnter={() => onButtonHover(source)}
                         onMouseLeave={() => onMouseLeave(source)}
                         leftIcon={<Icon as={MdCheckCircle} />}
@@ -824,18 +835,34 @@ export default function AddDataSteps({
                 onClick={() => onSubsectorClick(subSector)}
                 key={subSector.subsectorId}
               >
-                <Flex direction="row" className="space-x-4 items-center h-full">
-                  <Icon
-                    as={
-                      subSector.completed ? MdOutlineCheckCircle : DataAlertIcon
-                    }
-                    boxSize={8}
-                    color={
-                      subSector.completed
-                        ? "interactive.tertiary"
-                        : "sentiment.warningDefault"
-                    }
-                  />
+                <HStack align="center" height="120px" justify="space-between">
+                  {subSector.completedCount > 0 &&
+                  subSector.completedCount < subSector.totalCount ? (
+                    <CircularProgress
+                      size="36px"
+                      thickness="12px"
+                      mr="4"
+                      color="interactive.secondary"
+                      trackColor="background.neutral"
+                      value={
+                        (subSector.completedCount / subSector.totalCount) * 100
+                      }
+                    />
+                  ) : (
+                    <Icon
+                      as={
+                        subSector.completed
+                          ? MdOutlineCheckCircle
+                          : DataAlertIcon
+                      }
+                      boxSize={9}
+                      color={
+                        subSector.completed
+                          ? "interactive.tertiary"
+                          : "sentiment.warningDefault"
+                      }
+                    />
+                  )}
                   <Stack w="full">
                     <Heading size="xs" noOfLines={3} maxWidth="200px">
                       {t(nameToI18NKey(subSector.subsectorName!))}
@@ -856,7 +883,7 @@ export default function AddDataSteps({
                       />
                     }
                   />
-                </Flex>
+                </HStack>
               </Card>
             ))
           )}

diff --git a/app/src/app/[lng]/[inventory]/data/[step]/types.d.ts b/app/src/app/[lng]/[inventory]/data/[step]/types.d.ts
@@ -119,6 +119,8 @@ type DataSourceData = {
 
 type SubSectorWithRelations = SubSectorAttributes & {
   completed: boolean;
+  completedCount: number;
+  totalCount: number;
   scope: ScopeAttributes;
   subCategories: SubCategoryAttributes[];
 };
diff --git a/app/src/app/[lng]/[inventory]/data/review/page.tsx b/app/src/app/[lng]/[inventory]/data/review/page.tsx
@@ -570,7 +570,7 @@ export default function ReviewPage({
               <Box className="grow w-full md:w-0">
                 <Text fontSize="sm">{t("review-data-label")}</Text>
                 <Text fontSize="2xl" as="b">
-                  2023 {t("emissions-inventory-title")}
+                  {inventory?.year} {t("emissions-inventory-title")}
                 </Text>
               </Box>
               <Button

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]/[inventory]/settings/page.tsx b/app/src/app/[lng]/[inventory]/settings/page.tsx
@@ -149,6 +149,7 @@ export default function Settings({
                   t={t}
                   userInfo={userInfo!}
                   userFiles={userFiles!}
+                  inventory={inventory!}
                 />
                 <MyInventoriesTab
                   lng={lng}

diff --git a/app/src/app/[lng]/auth/signup/page.tsx b/app/src/app/[lng]/auth/signup/page.tsx
@@ -90,7 +90,11 @@ export default function Signup({
       if (!res.ok) {
         const data = await res.json();
         logger.error("Failed to sign up", data);
-        setError(data.error.message);
+        let message = data.error.message;
+        if (message === "Entity exists already.") {
+          message = t("user-exists-already");
+        }
+        setError(message);
         return;
       }
 
@@ -140,7 +144,12 @@ export default function Signup({
           </FormErrorMessage>
         </FormControl>
         <EmailInput register={register} error={errors.email} t={t} />
-        <PasswordInput register={register} error={errors.password} t={t}>
+        <PasswordInput
+          register={register}
+          error={errors.password}
+          shouldValidate={true}
+          t={t}
+        >
           <FormHelperText>
             <InfoOutlineIcon
               color="interactive.secondary"

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