diff --git a/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx b/daily-thought-frontend/src/components/questions/NewQuestionForm.tsx index 1023776689afc4e9469a0fa0d6847dd656b90adf..495fc91767e75408a33b9c6b9ed00db5a3f80a7c 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 bc163a956681c6048503eec307910d5417b749d1..8d0ef8b946d8a94d65ba6b5cc22dcf8416b57706 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 0000000000000000000000000000000000000000..cdb5a5244ce8f4bc45f75a4b4a4bcb458bf90f21 --- /dev/null +++ b/daily-thought-frontend/src/types/statusMessage.ts @@ -0,0 +1,4 @@ +export type StatusMessage = { + message: string; + error: boolean; +};