From 23526c5b9d3b44990766d5cc093e6b0f6fcba955 Mon Sep 17 00:00:00 2001 From: Philipp Rich Date: Fri, 15 Mar 2024 16:39:37 +0400 Subject: [PATCH] implemented state when no previous records - resolves #85 --- ...ingErrorState.jsx => FormStateOverlay.jsx} | 22 ++++---- components/RecordForm/FormWarning.jsx | 2 - components/RecordForm/RecordForm.jsx | 50 ++++++++++++++++--- public/empty.svg | 1 + public/server-down.svg | 2 +- utils/mongooseConnect.js | 2 +- 6 files changed, 58 insertions(+), 21 deletions(-) rename components/RecordForm/{FetchingErrorState.jsx => FormStateOverlay.jsx} (74%) create mode 100644 public/empty.svg diff --git a/components/RecordForm/FetchingErrorState.jsx b/components/RecordForm/FormStateOverlay.jsx similarity index 74% rename from components/RecordForm/FetchingErrorState.jsx rename to components/RecordForm/FormStateOverlay.jsx index e7eef1c..aec63d8 100644 --- a/components/RecordForm/FetchingErrorState.jsx +++ b/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 (
- Server error illustration - - Cannot check previos record - - Try to reload the page + {image && ( + Server error illustration + )} + {children}
diff --git a/components/RecordForm/FormWarning.jsx b/components/RecordForm/FormWarning.jsx index 6e13780..6e4b925 100644 --- 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 ( diff --git a/components/RecordForm/RecordForm.jsx b/components/RecordForm/RecordForm.jsx index 1a4d854..6daae56 100644 --- 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,7 +16,7 @@ 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"; @@ -24,7 +24,7 @@ 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: ( + <> + + No institutions were added yet + + Create your first institution + + + ), + 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: ( + <> + + Cannot check previos record + + Try to reload the page + + ), + errorMessage: error.stack, + image: "/server-down.svg", + }); } }, }); @@ -108,6 +138,7 @@ export function RecordForm() { Cancel