Merge pull request #89 from skorphil/85-new-user-no-previous-records

implemented state when no previous records
skorphil · Mar 15, 2024 · 12ce0ce · 12ce0ce
2 parents f28f2f8 + 23526c5
commit 12ce0ce
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 21 deletions.
diff --git a/components/RecordForm/FetchingErrorState.jsx → components/RecordForm/FormStateOverlay.jsx b/components/RecordForm/FetchingErrorState.jsx → components/RecordForm/FormStateOverlay.jsx
@@ -12,20 +12,22 @@ import {
   AccordionPanel,
 } from "@chakra-ui/react";
 
-export function FetchingErrorState({ errorMessage }) {
+export function FormStateOverlay({ image, errorMessage, children }) {
+  /**
+   * Overlay to display errors or states in RecordForm
+   */
   return (
     <VStack justifyContent="space-between" h="100%">
       <Center flexGrow={1}>
         <VStack>
-          <Image
-            src="/server-down.svg"
-            alt="Server error illustration"
-            boxSize="240px"
-          />
-          <Heading as="h1" size="md">
-            Cannot check previos record
-          </Heading>
-          <Text>Try to reload the page</Text>
+          {image && (
+            <Image
+              src={image}
+              alt="Server error illustration"
+              boxSize="240px"
+            />
+          )}
+          {children}
         </VStack>
       </Center>
 

diff --git a/components/RecordForm/FormWarning.jsx b/components/RecordForm/FormWarning.jsx
@@ -9,8 +9,6 @@ import {
   Text,
 } from "@chakra-ui/react";
 
-import Link from "next/link";
-
 export function FormWarning({ heading, message, onHide }) {
   return (
     <Box bg="yellow.900" m={2} borderRadius="md">

diff --git a/components/RecordForm/RecordForm.jsx b/components/RecordForm/RecordForm.jsx
@@ -6,7 +6,7 @@ Root element of the form
 
 import { useForm, FormProvider, useFieldArray } from "react-hook-form";
 import classes from "./RecordForm.module.css";
-import { Button, Progress, useToast } from "@chakra-ui/react";
+import { Button, Progress, useToast, Heading, Text } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { InstitutionsList } from "components/InstitutionsList";
@@ -16,15 +16,15 @@ import { handleInstitution } from "handlers";
 import { useRouter } from "next/navigation";
 import { appendRecord } from "serverActions/appendRecord";
 // import { getLatestRecord } from "serverActions/getLatestRecord";
-import { FetchingErrorState } from "./FetchingErrorState";
+import { FormStateOverlay } from "./FormStateOverlay";
 import { getDefaultValues } from "./utils/getDefaultValues";
 import { isInCurrentMonth } from "./utils/isDateInCurrentMonth";
 import { FormWarning } from "./FormWarning";
 
 export function RecordForm() {
   const [isInstitutionOpen, setIsInstitutionOpen] = useState(false);
   const [selectedInstitutionIndex, setSelectedInstitutionIndex] = useState(0);
-  const [errorState, setErrorState] = useState(false);
+  const [formOverlay, setFormOverlay] = useState(false);
   const [warningState, setWarningState] = useState(null);
   const toast = useToast({ position: "top" });
   const router = useRouter();
@@ -35,7 +35,26 @@ export function RecordForm() {
       try {
         const initialValues = await getDefaultValues();
         if (initialValues === null) {
-          console.log("no def values");
+          setFormOverlay({
+            children: (
+              <>
+                <Heading as="h1" size="md">
+                  No institutions were added yet
+                </Heading>
+                <Text>Create your first institution</Text>
+                <Button
+                  mt={2}
+                  onClick={() => {
+                    formMethods.handlers.handleInstitutionCreate();
+                    setFormOverlay(null);
+                  }}
+                >
+                  Add institution
+                </Button>
+              </>
+            ),
+            image: "/empty.svg",
+          });
         } else if (isInCurrentMonth(initialValues.date)) {
           setWarningState({
             heading: `Record from ${new Date(
@@ -51,7 +70,18 @@ export function RecordForm() {
         }
         return initialValues;
       } catch (error) {
-        setErrorState(error.stack);
+        setFormOverlay({
+          children: (
+            <>
+              <Heading as="h1" size="md">
+                Cannot check previos record
+              </Heading>
+              <Text>Try to reload the page</Text>
+            </>
+          ),
+          errorMessage: error.stack,
+          image: "/server-down.svg",
+        });
       }
     },
   });
@@ -108,6 +138,7 @@ export function RecordForm() {
                   Cancel
                 </Button>
                 <Button
+                  isDisabled={form.formState.isLoading || formOverlay}
                   onClick={formMethods.handleSubmit(async (data) => {
                     try {
                       await appendRecord(data);
@@ -148,8 +179,13 @@ export function RecordForm() {
 
       {form.formState.isLoading ? (
         <Progress size="xs" isIndeterminate />
-      ) : errorState ? (
-        <FetchingErrorState errorMessage={errorState} />
+      ) : formOverlay ? (
+        <FormStateOverlay
+          image={formOverlay.image}
+          errorMessage={formOverlay.errorMessage}
+        >
+          {formOverlay.children}
+        </FormStateOverlay>
       ) : (
         <form className={classes.RecordForm}>
           <InstitutionsList

diff --git a/public/empty.svg b/public/empty.svg