Solving Build Problem

src/components/Question.tsx

@@ -113,7 +113,7 @@ const sortedInitialAnswers = isMultipleChoice
   // Update parent with current question text
   useEffect(() => {
     onQuestionTextChange(localId, questionText);
-  }, [questionText]);
+  }, [questionText, localId, onQuestionTextChange]);
 
   const sortedQuestions = [...allQuestions].sort((a, b) => a.indexValue - b.indexValue);
   const currentQuestionIndexInSorted = sortedQuestions.findIndex(q => q.localId === localId);
@@ -133,7 +133,7 @@ const sortedInitialAnswers = isMultipleChoice
       return answer;
     });
     setAnswers(updatedAnswers);
-  }, [allQuestions, indexValue]);
+  }, [allQuestions, indexValue, answers]);
 
   // Use a ref to store the last sent data to avoid infinite loops
   const lastFullDataRef = useRef<FullQuestionData | null>(null);

src/pages/MessageCreationB.tsx

@@ -1,12 +1,11 @@
 import { useState, useRef} from 'react';
-import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import Navbar from '../components/Navbar';
 import '../styles/MessageCreationB.css';
 import { addMessage } from '../services/messageService';
 
 const MessageCreationB: React.FC = () => {
   const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
   const location = useLocation();
   const { answerID, answerText } = location.state || {};
 
@@ -84,7 +83,7 @@ const MessageCreationB: React.FC = () => {
       <div className="message-creationb-main-container">
         {/* Title */}
         <h1 className="message-creationb-page-title">
-          New Message for {answerText || 'Selected Answer'}
+          New Message for answer: {answerText || 'Selected Answer'}
         </h1>
         {/* Content Box */}
         <form

src/pages/MessageDashboard.tsx

@@ -387,7 +387,7 @@ const MessageDashboard: React.FC = () => {
                       <td onClick={() => handleMessageClick(msg)}>
                         {msg.species
                           ? `${msg.species.commonName} (${msg.species.name})`
-                          : 'Unknown Species'}
+                          : 'No Species'}
                       </td>
                       <td onClick={() => handleMessageClick(msg)}>
                         {msg.trigger}

src/pages/Questionnaire.tsx

@@ -36,7 +36,7 @@ const Questionnaire: React.FC = () => {
     };
 
     fetchQuestionnaire();
-  }, [questionnaire?.ID]);
+  }, [questionnaire]);
 
 
   if (!questionnaire) {
@@ -50,6 +50,28 @@ const Questionnaire: React.FC = () => {
     );
   }
 
+  if (loading) {
+    return (
+      <>
+        <Navbar />
+        <div className="loading">
+          <p>Loading questionnaire...</p>
+        </div>
+      </>
+    );
+  }
+
+  if (error) {
+    return (
+      <>
+        <Navbar />
+        <div className="error">
+          <p>{error}</p>
+        </div>
+      </>
+    );
+  }
+
   const navigateToCreateQuestions = () => {
     navigate('/questioncreation', { state: { questionnaire } });
   };