From d2c1e3edcc7d0067ea01ffab1b59472dd7f551f4 Mon Sep 17 00:00:00 2001 From: Felipe D'Abrantes <felidabrantes@gmail> Date: Fri, 21 Apr 2023 21:54:24 +0100 Subject: [PATCH] Add a status message --- .../components/questions/NewQuestionForm.tsx | 23 ++++++++++++++++- .../src/pages/questions.tsx | 25 ++++++++++++++++++- .../src/types/statusMessage.ts | 4 +++ 3 files changed, 50 insertions(+), 2 deletions(-) create mode 100644 daily-thought-frontend/src/types/statusMessage.ts diff --git a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx index 10237766..495fc917 100644 --- a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx +++ b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx @@ -1,12 +1,26 @@ import { Dispatch, FC, FormEvent, SetStateAction } from 'react'; +import { StatusMessage } from '@/types/statusMessage'; type NewQuestionFormProps = { newQuestion: string; setNewQuestion: Dispatch<SetStateAction<string>>; onSubmit: () => Promise<void>; + statusMessage: StatusMessage | undefined; }; -const NewQuestionForm: FC<NewQuestionFormProps> = ({ newQuestion, setNewQuestion, onSubmit }) => { +const NewQuestionForm: FC<NewQuestionFormProps> = ({ + newQuestion, + setNewQuestion, + onSubmit, + statusMessage +}) => { + // Set the colour of the status message + const statusTextColour = statusMessage + ? statusMessage.error + ? 'text-red-500' + : 'text-green-500' + : ''; + const onFormSubmit = (e: FormEvent<HTMLFormElement>): void => { e.preventDefault(); onSubmit(); @@ -34,6 +48,13 @@ const NewQuestionForm: FC<NewQuestionFormProps> = ({ newQuestion, setNewQuestion onChange={(e) => setNewQuestion(e.target.value)} /> + {/* Status Message */} + {statusMessage && ( + <p className={'mt-1 text-sm leading-6 text-center ' + statusTextColour}> + {statusMessage.message} + </p> + )} + {/* Submit Button */} <button type="submit" diff --git a/daily-thought-frontend/src/pages/questions.tsx b/daily-thought-frontend/src/pages/questions.tsx index bc163a95..8d0ef8b9 100644 --- a/daily-thought-frontend/src/pages/questions.tsx +++ b/daily-thought-frontend/src/pages/questions.tsx @@ -4,11 +4,13 @@ import { useUser } from '@/hooks/useUser'; import { useState } from 'react'; import NewQuestionForm from '@/components/questions/NewQuestionForm'; import QuestionList from '@/components/questions/QuestionList'; +import { StatusMessage } from '@/types/statusMessage'; const Questions = () => { const { user } = useUser(); const { questions, setRehydrateQuestions } = useQuestions(); const [newQuestion, setNewQuestion] = useState(''); + const [statusMessage, setStatusMessage] = useState<StatusMessage | undefined>(undefined); const insertNewQuestion = async (newQuestion: String): Promise<void> => { const JSONdata = JSON.stringify({ questionText: newQuestion }); @@ -21,7 +23,27 @@ const Questions = () => { }, body: JSONdata }; - await fetch(endpoint, options); + + var response = await fetch(endpoint, options); + var message = await response.text(); + + switch (response.status) { + case 201: + setStatusMessage({ + message: 'Question was successfully inserted!', + error: false + } as StatusMessage); + break; + case 400: + setStatusMessage({ message: message, error: true } as StatusMessage); + break; + default: + setStatusMessage({ + message: 'Unexpected error, please try again.', + error: true + } as StatusMessage); + break; + } }; const onQuestionSubmit = async (): Promise<void> => { @@ -41,6 +63,7 @@ const Questions = () => { newQuestion={newQuestion} setNewQuestion={setNewQuestion} onSubmit={onQuestionSubmit} + statusMessage={statusMessage} /> {/* List of Questions */} diff --git a/daily-thought-frontend/src/types/statusMessage.ts b/daily-thought-frontend/src/types/statusMessage.ts new file mode 100644 index 00000000..cdb5a524 --- /dev/null +++ b/daily-thought-frontend/src/types/statusMessage.ts @@ -0,0 +1,4 @@ +export type StatusMessage = { + message: string; + error: boolean; +}; -- GitLab