From 4a617d300856a311791616d745d7c72d5a5d4d16 Mon Sep 17 00:00:00 2001 From: Philipp Rich Date: Tue, 12 Mar 2024 13:13:53 +0400 Subject: [PATCH] Implemented fetching error state in RecordForm - added new error component - added new state to record form --- components/RecordForm/FetchingErrorState.jsx | 57 ++++++++++++++++++++ components/RecordForm/RecordForm.jsx | 13 ++++- components/RecordForm/docs.md | 4 ++ public/server-down.svg | 1 + serverActions/getLatestRecord.js | 2 +- utils/mongooseConnect.js | 6 +-- 6 files changed, 78 insertions(+), 5 deletions(-) create mode 100644 components/RecordForm/FetchingErrorState.jsx create mode 100644 public/server-down.svg diff --git a/components/RecordForm/FetchingErrorState.jsx b/components/RecordForm/FetchingErrorState.jsx new file mode 100644 index 0000000..e7eef1c --- /dev/null +++ b/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 ( + +
+ + Server error illustration + + Cannot check previos record + + Try to reload the page + +
+ + {errorMessage && ( + + +

+ + + System error message + + + +

+ + {errorMessage} + + + + )} + + ); +} diff --git a/components/RecordForm/RecordForm.jsx b/components/RecordForm/RecordForm.jsx index feb6e17..5945e13 100644 --- a/components/RecordForm/RecordForm.jsx +++ b/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 ? ( + ) : errorState ? ( + ) : (
)} + {/* */} ); diff --git a/components/RecordForm/docs.md b/components/RecordForm/docs.md index 009f0a8..0d09fff 100644 --- a/components/RecordForm/docs.md +++ b/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 diff --git a/public/server-down.svg b/public/server-down.svg new file mode 100644 index 0000000..1ca3754 --- /dev/null +++ b/public/server-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/serverActions/getLatestRecord.js b/serverActions/getLatestRecord.js index ddecc32..24450fb 100644 --- a/serverActions/getLatestRecord.js +++ b/serverActions/getLatestRecord.js @@ -35,6 +35,6 @@ export async function getLatestRecord() { return initialValues; } catch (error) { - throw new Error("Error saving document:", error); + throw error; } } diff --git a/utils/mongooseConnect.js b/utils/mongooseConnect.js index 1d80703..28be661 100644 --- a/utils/mongooseConnect.js +++ b/utils/mongooseConnect.js @@ -1,12 +1,12 @@ import mongoose from "mongoose"; -const connect = async () => { +async function connect() { try { await mongoose.connect(process.env.MONGO_URI); console.log("Database connected!"); } catch (error) { - throw new Error("Connection failed!"); + throw ("MongooseConnect error:", error); } -}; +} export default connect;