Add a status message

daily-thought-frontend/src/components/questions/NewQuestionForm.tsx

 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"

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 */}

daily-thought-frontend/src/types/statusMessage.ts

+export type StatusMessage = {
+  message: string;
+  error: boolean;
+};