Cleaning up ChatView.js main view.

diff --git a/src/app/views/Messages/ChatView.js b/src/app/views/Messages/ChatView.js
index b482e59146362b87684edd07f79c45721170af69..5e37fe931feb3b3e3ac2be7487017c495e28a002 100644 (file)
--- a/src/app/views/Messages/ChatView.js
+++ b/src/app/views/Messages/ChatView.js
@@ -2,45 +2,62 @@
  * @file View for displaying messages in a chat-like interface
  */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { TextField, Button, Typography } from '@mui/material';
 import { useSnackbar } from 'notistack';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { MessageService } from '../../services';
 import { getFormattedDate, truncateContent } from '../../utils';
 
+/**
+ *
+ * @typedef {Object} Message
+ * @property {number} id
+ * @property {number} sender_id
+ * @property {number} recipient_id
+ * @property {number} group_id
+ * @property {string} content
+ * @property {boolean} read
+ * @property {Date|string} read_at
+ * @property {Date|string} created_at
+ */
+
 const ChatView = () => {
   const { group_id, recipient_id } = useParams();
   const { enqueueSnackbar } = useSnackbar();
-  const navigate = useNavigate();
   const [messages, setMessages] = useState([]);
   const [newMessage, setNewMessage] = useState('');
   const messagesEndRef = useRef(null);
 
+  const fetchMessages = useMemo(() => async () => {
+    try {
+      let response;
+      if (group_id) {
+        /**
+         *
+         * @type {Message[]}
+         */
+        response = await MessageService.getMessagesByGroupId(group_id);
+      } else if (recipient_id) {
+        response = await MessageService.getMessagesByRecipientId(recipient_id);
+      }
+      setMessages(response.data);
+    } catch (error) {
+      enqueueSnackbar(`Error fetching messages: ${error.message}`, { variant: 'error' });
+    }
+  }, [group_id, recipient_id, enqueueSnackbar] );
+
   // Fetch messages
   useEffect(() => {
-    const fetchMessages = async () => {
-      try {
-        let response;
-        if (group_id) {
-          response = await MessageService.getMessagesByGroupId(group_id);
-        } else if (recipient_id) {
-          response = await MessageService.getMessagesByRecipientId(recipient_id);
-        }
-        setMessages(response.data);
-      } catch (error) {
-        enqueueSnackbar(`Error fetching messages: ${error.message}`, { variant: 'error' });
-      }
-    };
-    fetchMessages();
-  }, [group_id, recipient_id, enqueueSnackbar]);
+    fetchMessages().catch();
+  }, [group_id, recipient_id, enqueueSnackbar, fetchMessages]);
 
   // Scroll to bottom on new messages
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [messages]);
 
-  // Send message
+  // Send a message
   const handleSendMessage = async () => {
     if (!newMessage.trim()) return;
     try {
@@ -59,7 +76,7 @@ const ChatView = () => {
     }
   };
 
-  // Mark message as read
+  // Mark a message as read
   const handleMarkAsRead = async (messageId) => {
     try {
       const user = JSON.parse(localStorage.getItem('user')) || { id: 1 }; // Adjust based on auth