Solved bug and fixed #30

src/pages/Experiment.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Navbar from '../components/Navbar';
 import '../styles/Experiment.css';
-import { getMessagesByExperimentID } from '../services/messageService';
 import { Experiment as ExperimentType } from '../types/experiment';
 import { updateExperiment } from '../services/experimentService'; // Import the update function
 
@@ -30,8 +29,7 @@ const Experiment: React.FC = () => {
   const handleMessageOverviewClick = async () => {
     if (!experiment) return;
     try {
-      const messages = await getMessagesByExperimentID(experiment.ID);
-      navigate(`/messagedashboard/${experiment.ID}`, { state: { messages, experiment } });
+      navigate(`/messagedashboard/${experiment.ID}`);
     } catch (error) {
       console.error('Error fetching messages:', error);
       // Optionally display an error message to the user

src/pages/MessageCreation.tsx

@@ -300,6 +300,7 @@ const MessageCreation: React.FC = () => {
                             setSelectedSpeciesID(species.ID);
                             setSelectedSpeciesName(species.commonName);
                             setIsSpeciesDropdownOpen(false);
+                            speciesDropdownRef.current?.setCustomValidity('');
                           }}
                         >
                           {species.commonName} ({species.name})

src/pages/MessageDashboard.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import Navbar from '../components/Navbar';
 import '../styles/MessageDashboard.css';
+import { getMessagesByExperimentID } from '../services/messageService';
 
 // Import types
 import { Message } from '../types/message';
+import { Experiment } from '../types/experiment';
 
 interface InteractionType {
   ID: string;
@@ -13,12 +15,12 @@ interface InteractionType {
 
 const MessageDashboard: React.FC = () => {
   const navigate = useNavigate();
-  const location = useLocation();
   const { id } = useParams<{ id: string }>();
 
-  const { messages = [], experiment } = location.state || {};
 
   const [interactionTypes, setInteractionTypes] = useState<InteractionType[]>([]);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [experiment] = useState<Experiment | null>(null);
   const [filteredMessages, setFilteredMessages] = useState<Message[]>([]);
   const [selectedInteractionType, setSelectedInteractionType] = useState<string>('All');
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -30,6 +32,24 @@ const MessageDashboard: React.FC = () => {
   // State for dropdown open/close
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
+  // Fetch messages on component mount
+  useEffect(() => {
+    const fetchMessages = async () => {
+      if (!id) return;
+      try {
+        setIsLoading(true);
+        const fetchedMessages = await getMessagesByExperimentID(id);
+        setMessages(fetchedMessages);
+        setIsLoading(false);
+      } catch (error) {
+        console.error('Error fetching messages:', error);
+        setIsLoading(false);
+      }
+    };
+
+    fetchMessages();
+  }, [id]);
+
   // Fetch interaction types on component mount
   useEffect(() => {
     const fetchData = async () => {