clearing messages on new contact

client/src/components/chat/ContactForm.tsx

@@ -5,29 +5,33 @@ import { Dispatch, SetStateAction, useEffect } from "react";
 type Input = {
   contact: string;
 };
-
+type ChatMessages = {
+  sender: string;
+  message: string;
+  recipient: string;
+  message_id: number;
+  timestamp: string;
+};
 interface ContactInputProps {
   contact: string;
   setContact: Dispatch<SetStateAction<string>>;
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
 }
 
-function ContactForm({ contact, setContact }: ContactInputProps) {
+function ContactForm({ contact, setContact, setMessages }: ContactInputProps) {
   const { register, handleSubmit, reset } = useForm<Input>();
 
   let storedContact: string | null = "";
   useEffect(() => {
-    let isMounted = true;
     storedContact = storedContact = localStorage.getItem("contact");
     if (storedContact) {
       setContact(storedContact);
       sendRequestHistorical(storedContact);
     }
-    return () => {
-      isMounted = false;
-    };
   }, [setContact]);
 
   const submitContact: SubmitHandler<Input> = (data) => {
+    setMessages([]);
     sendRequestHistorical(data.contact);
     localStorage.setItem("contact", data.contact);
     setContact(data.contact);

client/src/components/chat/MessagesArea.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { socket } from "../../socket/socket.tsx";
-
 type ChatMessages = {
   sender: string;
   message: string;
@@ -8,9 +7,12 @@ type ChatMessages = {
   message_id: number;
   timestamp: string;
 };
+type MessagesAreaProps = {
+  messages: ChatMessages[];
+  setMessages: React.Dispatch<React.SetStateAction<ChatMessages[]>>;
+};
 
-function MessagesArea() {
-  const [messages, setMessages] = useState<ChatMessages[]>([]);
+function MessagesArea({ messages, setMessages }: MessagesAreaProps) {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -42,7 +44,7 @@ function MessagesArea() {
   }, []);
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    messagesEndRef.current?.scrollIntoView();
   }, [messages]);
 
   const messageList = messages.map((msg) => (

client/src/pages/Chat.tsx

@@ -4,16 +4,28 @@ import UserProfile from "../components/chat/UserProfile.tsx";
 import ContactForm from "../components/chat/ContactForm.tsx";
 import MessagesArea from "../components/chat/MessagesArea.tsx";
 import { useState } from "react";
+type ChatMessages = {
+  sender: string;
+  message: string;
+  recipient: string;
+  message_id: number;
+  timestamp: string;
+};
 
 function Chat() {
   const [contact, setContact] = useState<string>("");
+  const [messages, setMessages] = useState<ChatMessages[]>([]);
   return (
     <>
       <div className="text-white flex h-screen">
         {/*Sidebar*/}
         <div className="h-screen bg-[#1E1E1E] flex flex-col">
           {/*Contact input*/}
-          <ContactForm contact={contact} setContact={setContact} />
+          <ContactForm
+            contact={contact}
+            setContact={setContact}
+            setMessages={setMessages}
+          />
           {/*Contact list*/}
           <div className="flex-grow overflow-y-auto w-64">
             <ul className="ml-2">
@@ -37,9 +49,9 @@ function Chat() {
           </div>
           <hr className="flex-shrink-0" />
           <div className="flex-grow overflow-x-hidden overflow-y-auto m-2">
-            <MessagesArea />
+            <MessagesArea messages={messages} setMessages={setMessages} />
           </div>
-          <div className="flex-shrink-0 mb-2">
+          <div className="flex-shrink-0 mb-2 mt-0">
             {contact && contact.length >= 4 ? (
               <MessageForm contact={contact} />
             ) : null}