Implemented fetching error state in RecordForm

- added new error component
- added new state to record form

components/RecordForm/FetchingErrorState.jsx

@@ -0,0 +1,57 @@
+import {
+  VStack,
+  Image,
+  Heading,
+  Text,
+  Center,
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionIcon,
+  Box,
+  AccordionPanel,
+} from "@chakra-ui/react";
+
+export function FetchingErrorState({ errorMessage }) {
+  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>
+        </VStack>
+      </Center>
+
+      {errorMessage && (
+        <Accordion w="100%" allowToggle>
+          <AccordionItem borderBottomStyle="none">
+            <h2>
+              <AccordionButton>
+                <Box as="span" flex="1" textAlign="left">
+                  System error message
+                </Box>
+                <AccordionIcon />
+              </AccordionButton>
+            </h2>
+            <AccordionPanel
+              fontFamily="mono"
+              fontSize="xs"
+              maxH="240px"
+              overflow="auto"
+              pb={4}
+            >
+              {errorMessage}
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </VStack>
+  );
+}

components/RecordForm/RecordForm.jsx

@@ -16,15 +16,23 @@ import { handleInstitution } from "handlers";
 import { useRouter } from "next/navigation";
 import { appendRecord } from "serverActions/appendRecord";
 import { getLatestRecord } from "serverActions/getLatestRecord";
+import { FetchingErrorState } from "./FetchingErrorState";
 
 export function RecordForm() {
   const [isInstitutionOpen, setIsInstitutionOpen] = useState(false);
   const [selectedInstitutionIndex, setSelectedInstitutionIndex] = useState(0);
+  const [errorState, setErrorState] = useState(false);
   const router = useRouter();
   const arrayName = "institutions";
 
   const { control, ...form } = useForm({
-    defaultValues: async () => getLatestRecord(),
+    defaultValues: async () => {
+      try {
+        await getLatestRecord();
+      } catch (error) {
+        setErrorState(error.stack);
+      }
+    },
   });
   const institutionsFieldArray = useFieldArray({
     control,
@@ -90,6 +98,8 @@ export function RecordForm() {
       )}
       {form.formState.isLoading ? (
         <Progress size="xs" isIndeterminate />
+      ) : errorState ? (
+        <FetchingErrorState errorMessage={errorState} />
       ) : (
         <form className={classes.RecordForm}>
           <InstitutionsList
@@ -98,6 +108,7 @@ export function RecordForm() {
           />
         </form>
       )}
+
       {/* <DevTool control={formMethods.control} /> */}
     </FormProvider>
   );

components/RecordForm/docs.md

@@ -23,10 +23,14 @@ stateDiagram-v2
 [*] --> loadingState
 loadingState --> preFilled : fetched previousRecord
 loadingState --> empty : fetched previousRecord == null
+loadingState --> errorFetching
 preFilled --> openedInstitution : BUTTON_PRESS
 empty --> openedInstitution : BUTTON_PRESS
 openedInstitution --> empty : BUTTON_PRESS
 openedInstitution --> preFilled : BUTTON_PRESS
+empty --> edited
+preFilled --> edited
+edited --> errorSubmitting
 ```
 
 ## See also