displays no more messages found message from server

client/src/components/chat/MessagesArea.tsx

@@ -31,6 +31,7 @@ type MessagesAreaProps = {
   messageHandler: (msg: ChatMessages) => void;
   setContactsList: React.Dispatch<React.SetStateAction<ContactsProps[]>>;
   fetchPreviousMessages: (contact: string | null) => Promise<void>;
+  errorMessage: string | null;
 };
 
 function MessagesArea({
@@ -40,6 +41,7 @@ function MessagesArea({
   setContactsList,
   messageHandler,
   fetchPreviousMessages,
+  errorMessage,
 }: MessagesAreaProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -56,7 +58,10 @@ function MessagesArea({
       setIsFetchingHistory(true);
       fetchPreviousMessages(currentContact)
         .then(() => setIsLoading(false))
-        .catch((e) => console.error('Failed to fetch messages: ', e));
+        .catch((e) => {
+          console.error('Failed to fetch messages: ', e);
+          setIsLoading(false);
+        });
     }
   };
 
@@ -128,6 +133,7 @@ function MessagesArea({
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto">
+      <p className="text-center text-gray-400">{errorMessage}</p>
       <ul className="flex-grow list-none">
         {isLoading ? <LoadingWheel /> : null}
         {messageList}

client/src/pages/Chat.tsx

@@ -31,6 +31,7 @@ function Chat() {
   const [currentContact, setCurrentContact] = useState<string | null>(null);
   const [cursor, setCursor] = useState<number>(0);
   const [messages, setMessages] = useState<ChatMessages[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   useEffect(() => {
     const token = Cookies.get('token');
@@ -62,18 +63,25 @@ function Chat() {
   }
 
   const fetchMessages = async (currentContact: string | null) => {
-    const messages = await getMessages(currentContact);
     console.log('Fetching messages for: ', currentContact);
+    try {
+      const messages = await getMessages(currentContact);
+
       setCursor(() => {
         return Math.min(
           ...messages.messages.map((message) => message.message_id),
         );
       });
+
       messages.messages.forEach(messageHandler);
+    } catch (e) {
+      setErrorMessage(e.response.data.message);
+    }
   };
 
   const fetchPreviousMessages = async (contact: string | null) => {
     console.log('Fetching messages for: ', contact, 'with cursor: ', cursor);
+    try {
       const messages = await getMessages(contact, cursor, 50);
       messages.messages.forEach((msg) => {
         setMessages((prevMessages) => {
@@ -88,6 +96,9 @@ function Chat() {
           ...messages.messages.map((message) => message.message_id),
         );
       });
+    } catch (e) {
+      setErrorMessage(e.response.data.message);
+    }
   };
 
   function messageHandler(msg: ChatMessages) {
@@ -152,6 +163,7 @@ function Chat() {
               messageHandler={messageHandler}
               setContactsList={setContactsList}
               fetchPreviousMessages={fetchPreviousMessages}
+              errorMessage={errorMessage}
             />
           </div>
           <div className="flex-shrink-0 mb-2 mt-0">

server/server.js

@@ -196,7 +196,7 @@ app.get("/api/chat/messages/:contact", authorizeUser, async (req, res) => {
     cursor,
   );
   if (messages && messages.length < limit) {
-    return res.status(404).json({ message: "No more messages" });
+    return res.status(404).json({ message: "No more messages found" });
   }
 
   console.log("MESSAGESLENGTH: ", messages.length, limit);