split code to ChatArea.tsx and ContactProfile.tsx

client/src/components/ContactProfile.tsx

@@ -0,0 +1,22 @@
+import zdjecie from "../../assets/walter.png";
+
+function ContactProfile() {
+  return (
+    <>
+      <div className="m-3 rounded-full w-10 h-10 overflow-hidden ">
+        <img
+          className="w-full h-full object-cover"
+          src={zdjecie}
+          alt="walter"
+          draggable={false}
+        />
+      </div>
+      <div className="text-center text-gray-200">
+        <p>Walter White</p>
+      </div>
+
+      <hr />
+    </>
+  );
+}
+export default ContactProfile;

client/src/pages/Chat.tsx

@@ -1,11 +1,13 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import zdjecie from "../../assets/walter.png";
+import MessageForm from "../components/MessageForm.tsx";
 import {
   sendMessage,
   sendContact,
   sendRequestHistorical,
 } from "../socket/socket.tsx";
 import { useEffect, useState } from "react";
+import messageForm from "../components/MessageForm.tsx";
 type Input = {
   message: string;
   contact: string;
@@ -39,17 +41,6 @@ function Chat() {
     );
   }, [messageFocus, contactFocus]);
 
-  // Sending message
-  const submitMessage: SubmitHandler<Input> = (data) => {
-    // block sending empty message
-    if (!data.message || !contact) {
-      return;
-    }
-    console.log("sended message: " + data.message + " recipient: ", contact);
-    sendMessage(data.message, contact);
-    //reset({ message: "" });
-  };
-
   // Sending contact
   const submitContact: SubmitHandler<Input> = (data) => {
     setContactFocus(false);
@@ -126,29 +117,7 @@ function Chat() {
           </div>
           {/*Messages input*/}
           <div className="mt-auto mb-2">
-            <form onSubmit={handleSubmit(submitMessage)}>
-              <div className="flex">
-                <input
-                  className="bg-green-100 text-black rounded-md w-full ml-1 mr-1 size-10"
-                  type="text"
-                  autoFocus={messageFocus}
-                  placeholder="Enter message"
-                  {...register("message", {
-                    maxLength: 500,
-                    minLength: 1,
-                  })}
-                />
-                {errors?.message?.type === "maxLength" && (
-                  <p>Maximum length of the message is 500</p>
-                )}
-                <button
-                  className="text-black bg-green-500 hover:bg-green-400 font-bold py-2 px-4 rounded mr-1 w-24 "
-                  type="submit"
-                >
-                  Send
-                </button>
-              </div>
-            </form>
+            <MessageForm contact={contact} messageFocus={messageFocus} />
           </div>
         </div>
       </div>