Merge pull request #398 from Open-Earth-Foundation/fix/invite-collabo…

…rators-to-invite-flow Fix/invite collaborators to invite flow
Open-Earth-Foundation · Mar 29, 2024 · dbd137b · dbd137b
2 parents cdcac71 + 0250b6c
commit dbd137b
Show file tree

Hide file tree

Showing 40 changed files with 1,425 additions and 76 deletions.
diff --git a/app/public/assets/not-found-background.svg b/app/public/assets/not-found-background.svg
diff --git a/app/src/app/[...not_found]/layout.tsx b/app/src/app/[...not_found]/layout.tsx
@@ -0,0 +1,38 @@
+import "../globals.css";
+import type { Metadata } from "next";
+import { Providers } from "../providers";
+import { dir } from "i18next";
+import { languages } from "@/i18n/settings";
+import { NavigationBar } from "@/components/navigation-bar";
+
+export const metadata: Metadata = {
+  title: "CityCatalyst",
+  description: "Make building a climate inventory a breeze",
+};
+
+export async function generateStaticParams() {
+  return languages.map((lng: string) => ({ lng }));
+}
+
+export default function RootLayout({
+  children,
+  params: { lng },
+}: {
+  children: React.ReactNode;
+  params: { lng: string };
+}) {
+  return (
+    <html lang="">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/assets/icon.svg" />
+        <link rel="icon" type="image/png" href="/assets/icon.png" />
+      </head>
+      <body>
+        <Providers>
+          <NavigationBar lng="" />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/app/src/app/[...not_found]/page.tsx b/app/src/app/[...not_found]/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+import { useTranslation } from "@/i18n/client";
+import { api } from "@/services/api";
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+import { Box, Text } from "@chakra-ui/layout";
+import { Button, IconButton } from "@chakra-ui/react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+const NotFound = ({ params: { lng } }: { params: { lng: string } }) => {
+  const { data: userInfo, isLoading: isUserInfoLoading } =
+    api.useGetUserInfoQuery();
+  const router = useRouter();
+  const { t } = useTranslation(lng, "not-found");
+
+  return (
+    <Box className="flex w-full justify-start relative h-[100vh] z-20">
+      <Image
+        src="/assets/not-found-background.svg"
+        layout="fill"
+        objectFit="cover"
+        sizes="100vw"
+        className="relative"
+        alt="not-found page background"
+      />
+      <Box
+        display="flex"
+        flexDir="column"
+        gap=""
+        alignItems="center"
+        justifyContent="center"
+        h="full"
+        w="full"
+        zIndex="10"
+      >
+        <Text
+          fontSize="display.xl"
+          fontWeight="bold"
+          fontFamily="heading"
+          color="content.alternative"
+        >
+          404
+        </Text>
+        <Text
+          mb="48px"
+          w="0px"
+          width="400px"
+          textAlign="center"
+          lineHeight="32px"
+          letterSpacing="wide"
+        >
+          {t("not-found-description")}
+        </Text>
+        <Button
+          onClick={() => router.push(`/${userInfo?.defaultInventoryId}`)}
+          gap="8px"
+          h="48px"
+          px="24px"
+          fontSize="body.md"
+          isLoading={isUserInfoLoading}
+          rightIcon={<ArrowForwardIcon />}
+        >
+          {t("goto-dashboard")}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default NotFound;
diff --git a/...app/[lng]/data/[step]/ActivityDataTab.tsx → ...nventory]/data/[step]/ActivityDataTab.tsx b/...app/[lng]/data/[step]/ActivityDataTab.tsx → ...nventory]/data/[step]/ActivityDataTab.tsx
diff --git a/...p/[lng]/data/[step]/DirectMeasureForm.tsx → ...entory]/data/[step]/DirectMeasureForm.tsx b/...p/[lng]/data/[step]/DirectMeasureForm.tsx → ...entory]/data/[step]/DirectMeasureForm.tsx
diff --git a/...c/app/[lng]/data/[step]/EmissionsForm.tsx → ...[inventory]/data/[step]/EmissionsForm.tsx b/...c/app/[lng]/data/[step]/EmissionsForm.tsx → ...[inventory]/data/[step]/EmissionsForm.tsx
diff --git a/...rc/app/[lng]/data/[step]/SourceDrawer.tsx → .../[inventory]/data/[step]/SourceDrawer.tsx b/...rc/app/[lng]/data/[step]/SourceDrawer.tsx → .../[inventory]/data/[step]/SourceDrawer.tsx
diff --git a/...app/[lng]/data/[step]/SubsectorDrawer.tsx → ...nventory]/data/[step]/SubsectorDrawer.tsx b/...app/[lng]/data/[step]/SubsectorDrawer.tsx → ...nventory]/data/[step]/SubsectorDrawer.tsx
diff --git a/app/src/app/[lng]/data/[step]/page.tsx → ...pp/[lng]/[inventory]/data/[step]/page.tsx b/app/src/app/[lng]/data/[step]/page.tsx → ...pp/[lng]/[inventory]/data/[step]/page.tsx
@@ -171,9 +171,9 @@ function NoDataSourcesMessage({
 }
 
 export default function AddDataSteps({
-  params: { lng, step },
+  params: { lng, step, inventory },
 }: {
-  params: { lng: string; step: string };
+  params: { lng: string; step: string; inventory: string };
 }) {
   const { t } = useTranslation(lng, "data");
   const router = useRouter();
@@ -428,7 +428,7 @@ export default function AddDataSteps({
     await new Promise((resolve) => setTimeout(resolve, 1000));
     setConfirming(false);
     if (activeStep >= steps.length - 1) {
-      router.push("/data/review");
+      router.push(`/${inventory}/data/review`);
     } else {
       window.scrollTo({ top: 0, behavior: "smooth" });
       goToNext();
@@ -437,7 +437,7 @@ export default function AddDataSteps({
 
   const onSkip = () => {
     if (activeStep >= steps.length - 1) {
-      router.push("/data/review");
+      router.push(`/${inventory}/data/review`);
     } else {
       window.scrollTo({ top: 0, behavior: "smooth" });
       goToNext();

diff --git a/...src/app/[lng]/data/[step]/subsectors.json → ...]/[inventory]/data/[step]/subsectors.json b/...src/app/[lng]/data/[step]/subsectors.json → ...]/[inventory]/data/[step]/subsectors.json
diff --git a/app/src/app/[lng]/data/[step]/types.d.ts → .../[lng]/[inventory]/data/[step]/types.d.ts b/app/src/app/[lng]/data/[step]/types.d.ts → .../[lng]/[inventory]/data/[step]/types.d.ts
diff --git a/app/src/app/[lng]/data/layout.tsx → ...src/app/[lng]/[inventory]/data/layout.tsx b/app/src/app/[lng]/data/layout.tsx → ...src/app/[lng]/[inventory]/data/layout.tsx
diff --git a/app/src/app/[lng]/data/page.tsx → app/src/app/[lng]/[inventory]/data/page.tsx b/app/src/app/[lng]/data/page.tsx → app/src/app/[lng]/[inventory]/data/page.tsx
@@ -14,7 +14,7 @@ import {
   Text,
 } from "@chakra-ui/react";
 import NextLink from "next/link";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { Trans } from "react-i18next/TransWithoutContext";
 import { MdOutlineHomeWork } from "react-icons/md";
 import { FiTrash2, FiTruck } from "react-icons/fi";
@@ -26,6 +26,7 @@ export default function AddDataIntro({
 }) {
   const { t } = useTranslation(lng, "data");
   const router = useRouter();
+  const { inventory } = useParams();
 
   return (
     <Box className="pt-16 pb-16 w-[1090px] max-w-full mx-auto px-4">
@@ -129,7 +130,7 @@ export default function AddDataIntro({
         </Flex>
       </Card>
       <div className="w-full text-right my-12">
-        <NextLink href="/data/1" passHref legacyBehavior>
+        <NextLink href={`/${inventory}/data/1`} passHref legacyBehavior>
           <Button
             as="a"
             h={16}

diff --git a/app/src/app/[lng]/data/review/page.tsx → ...pp/[lng]/[inventory]/data/review/page.tsx b/app/src/app/[lng]/data/review/page.tsx → ...pp/[lng]/[inventory]/data/review/page.tsx
@@ -21,9 +21,9 @@ import { appendFileToFormData } from "@/util/helpers";
 import { useState } from "react";
 
 export default function ReviewPage({
-  params: { lng },
+  params: { lng, inventoryId },
 }: {
-  params: { lng: string };
+  params: { lng: string; inventoryId: string };
 }) {
   const { t } = useTranslation(lng, "data");
   const router = useRouter();
@@ -36,7 +36,7 @@ export default function ReviewPage({
   };
   const onDiscard = () => {
     dispatch(clear());
-    router.push("/");
+    router.push(`/${inventoryId}`);
   };
 
   const stationaryEnergy = getAllSectorData.filter(
@@ -100,7 +100,7 @@ export default function ReviewPage({
       // TODO
       // Trigger notification to user
     } finally {
-      router.push("/");
+      router.push(`/${inventoryId}`);
       dispatch(clear());
       setIsConfirming(false);
     }
@@ -202,7 +202,7 @@ export default function ReviewPage({
                   variant="ghost"
                   w="181px"
                   gap="8px"
-                  onClick={() => router.push("/data/1")}
+                  onClick={() => router.push(`/${inventoryId}/data/1`)}
                 >
                   <MdOutlineEdit size="24px" />
                   <Heading
@@ -346,7 +346,7 @@ export default function ReviewPage({
                   variant="ghost"
                   w="181px"
                   gap="8px"
-                  onClick={() => router.push("/data/2")}
+                  onClick={() => router.push(`/${inventoryId}/data/2`)}
                 >
                   <MdOutlineEdit size="24px" />
                   <Heading
@@ -470,7 +470,7 @@ export default function ReviewPage({
                   variant="ghost"
                   w="181px"
                   gap="8px"
-                  onClick={() => router.push("/data/3")}
+                  onClick={() => router.push(`/${inventoryId}/data/3`)}
                 >
                   <MdOutlineEdit size="24px" />
                   <Heading

diff --git a/app/src/app/[lng]/page.tsx → app/src/app/[lng]/[inventory]/page.tsx b/app/src/app/[lng]/page.tsx → app/src/app/[lng]/[inventory]/page.tsx
@@ -38,7 +38,7 @@ import {
 } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
 import NextLink from "next/link";
-import { useRouter } from "next/navigation";
+import { useRouter, useParams } from "next/navigation";
 import { CircleFlag } from "react-circle-flags";
 import { Trans } from "react-i18next/TransWithoutContext";
 import { FiDownload } from "react-icons/fi";
@@ -76,31 +76,35 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
   const { t } = useTranslation(lng, "dashboard");
   const toast = useToast();
   const router = useRouter();
+  const { inventory: cityParam } = useParams();
+  const inventoryId = cityParam as string;
 
   // query API data
   // TODO maybe rework this logic into one RTK query:
   // https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query
-  let defaultInventoryId: string | null = null;
+
   const { data: userInfo, isLoading: isUserInfoLoading } =
     api.useGetUserInfoQuery();
+
+  let defaultInventoryId: string | null = null;
   if (!isUserInfoLoading && userInfo) {
     defaultInventoryId = userInfo.defaultInventoryId;
 
     // TODO also add this to login logic or after email verification to prevent extra redirect?
-    // if the user doesn't have a default inventory, redirect to onboarding page
-    if (!defaultInventoryId) {
+    // if the user doesn't have a default inventory or if path has a null inventory id, redirect to onboarding page
+    if (!inventoryId && !defaultInventoryId) {
       // fixes warning "Cannot update a component (`Router`) while rendering a different component (`Home`)"
-      setTimeout(() => router.push("/onboarding"), 0);
+      setTimeout(() => router.push(`/onboarding`), 0);
     }
   }
   const { data: inventory, isLoading: isInventoryLoading } =
-    api.useGetInventoryQuery(defaultInventoryId!, {
-      skip: !defaultInventoryId,
+    api.useGetInventoryQuery(inventoryId!, {
+      skip: !inventoryId,
     });
 
   const { data: inventoryProgress, isLoading: isInventoryProgressLoading } =
-    api.useGetInventoryProgressQuery(defaultInventoryId!, {
-      skip: !defaultInventoryId,
+    api.useGetInventoryProgressQuery(inventoryId!, {
+      skip: !inventoryId,
     });
 
   const { data: city } = api.useGetCityQuery(inventory?.cityId!, {
@@ -198,7 +202,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
       true, // animated gradient
     );
     const format = "csv";
-    fetch(`/api/v0/inventory/${defaultInventoryId}?format=${format}`)
+    fetch(`/api/v0/inventory/${inventoryId}?format=${format}`)
       .then((res) => {
         if (!res.ok) {
           throw new Error("Network response was not ok");
@@ -276,9 +280,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
                       >
                         {inventory?.city?.name}
                       </Heading>
-                      <InventorySelect
-                        currentInventoryId={defaultInventoryId}
-                      />
+                      <InventorySelect currentInventoryId={inventoryId} />
                     </>
                   ) : (
                     (isUserInfoLoading || isInventoryLoading) && (
@@ -426,7 +428,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
               </Box>
             </Box>
             <Box className="flex gap-[24px] relative justify-between top-[100px]">
-              <NextLink href="/data">
+              <NextLink href={`/${inventoryId}/data`}>
                 <Card
                   shadow="2dp"
                   backgroundColor="base.light"
@@ -627,6 +629,7 @@ export default function Home({ params: { lng } }: { params: { lng: string } }) {
                       sectorProgress={sectorProgress}
                       stepNumber={i + 1}
                       t={t}
+                      inventory={inventoryId}
                     />
                   ))
               )}

diff --git a/app/src/app/[lng]/settings/page.tsx → ...c/app/[lng]/[inventory]/settings/page.tsx b/app/src/app/[lng]/settings/page.tsx → ...c/app/[lng]/[inventory]/settings/page.tsx
@@ -11,6 +11,7 @@ import MyProfileTab from "@/components/Tabs/my-profile-tab";
 import MyFilesTab from "@/components/Tabs/my-files-tab";
 import MyInventoriesTab from "@/components/Tabs/my-inventories-tab";
 import { api } from "@/services/api";
+import { useParams } from "next/navigation";
 
 export type ProfileInputs = {
   name: string;
@@ -52,11 +53,13 @@ export default function Settings({
     skip: !userInfo,
   });
 
+  const { inventory: inventoryParam } = useParams();
+  const inventoryId = inventoryParam as string;
+
   // TODO cache current city ID or select it differently / create custom route
-  const { data: inventory } = api.useGetInventoryQuery(
-    userInfo?.defaultInventoryId!,
-    { skip: !userInfo },
-  );
+  const { data: inventory } = api.useGetInventoryQuery(inventoryId, {
+    skip: !userInfo,
+  });
   const cityId = inventory?.city.cityId;
   const { data: cityUsers } = api.useGetCityUsersQuery(
     { cityId: cityId! },

diff --git a/app/src/app/[lng]/auth/check-email/page.tsx b/app/src/app/[lng]/auth/check-email/page.tsx
@@ -44,14 +44,19 @@ export default function CheckEmail({
   params: { lng: string };
 }) {
   const { t } = useTranslation(lng, "auth");
-
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl");
   return (
     <>
       <Heading size="xl">{t("check-email-heading")}</Heading>
       <Suspense>
         <DynamicContent t={t} />
       </Suspense>
-      <NextLink href="/auth/login" passHref legacyBehavior>
+      <NextLink
+        href={`/auth/login?callbackUrl=${callbackUrl}`}
+        passHref
+        legacyBehavior
+      >
         <Button as="a" h={16} width="full" mt={4}>
           {t("back-to-login")}
         </Button>

diff --git a/app/src/app/[lng]/auth/login/page.tsx b/app/src/app/[lng]/auth/login/page.tsx
@@ -51,11 +51,11 @@ export default function Login({
   } = useForm<Inputs>();
 
   const searchParams = useSearchParams();
-  const [error, setError] = useState("");
 
+  const [error, setError] = useState("");
+  const defaultUrl = `https://${document.location.host}/${lng}`;
+  const callbackUrl = searchParams.get("callbackUrl") || defaultUrl;
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
-    const defaultUrl = `https://${document.location.host}/${lng}`;
-    const callbackUrl = searchParams.get("callbackUrl") || defaultUrl;
     try {
       const res = await signIn("credentials", {
         redirect: false,
@@ -108,7 +108,10 @@ export default function Login({
         color="content.tertiary"
       >
         {t("no-account")}{" "}
-        <Link href="/auth/signup" className="underline">
+        <Link
+          href={`/auth/signup?callbackUrl=${callbackUrl}`}
+          className="underline"
+        >
           {t("sign-up")}
         </Link>
       </Text>