sending contact and message

client/src/pages/Chat.tsx

@@ -1,6 +1,7 @@
 import { useForm, SubmitHandler } from "react-hook-form";
 import zdjecie from "../../assets/walter.png";
-import { sendMessage } from "../socket/socket.tsx";
+import { sendMessage, sendContact } from "../socket/socket.tsx";
+import { useEffect, useState } from "react";
 type Input = {
   message: string;
   contact: string;
@@ -13,22 +14,34 @@ function Chat() {
     reset,
     formState: { errors },
   } = useForm<Input>();
+  const [contact, setContact] = useState<string>("");
+
+  useEffect(() => {
+    const storedContact = localStorage.getItem("contact");
+    if (storedContact) {
+      setContact(storedContact);
+    }
+  }, []);
 
   // Sending message
   const submitMessage: SubmitHandler<Input> = (data) => {
+    // block sending empty message
     if (!data.message) {
       return;
     }
-    console.log("message: " + data.message + " was sent");
-    sendMessage(data.message);
-    reset();
-    console.log("form reset");
+    console.log("sended message: " + data.message + " recipient: ", contact);
+    sendMessage(data.message, contact);
+    reset({ message: "" });
   };
 
   // Sending contact
   const submitContact: SubmitHandler<Input> = (data) => {
-    console.log("Kontakt: " + data.contact + "zostal wyslany");
-    reset();
+    // store current contact in localstorage to load it after page reload
+    localStorage.setItem("contact", data.contact);
+    setContact(data.contact);
+    sendContact(data.contact); //TODO zapisz w bazie danych te kontakty
+    console.log("Kontakt: " + data.contact + " zostal wyslany");
+    reset({ contact: "" });
   };
 
   return (
@@ -40,7 +53,7 @@ function Chat() {
           <div className="text-center">
             <form onSubmit={handleSubmit(submitContact)}>
               <input
-                className="bg-green-100 pl-2 rounded-md shadow-lg h-8 mb-2"
+                className="text-black bg-green-100 pl-2 rounded-md shadow-lg h-8 mb-2"
                 type="text"
                 placeholder="Enter contact"
                 {...register("contact", {
@@ -82,7 +95,7 @@ function Chat() {
         <div className="text-white bg-[#121212] flex flex-col h-screen w-full">
           {/*Messages*/}
           <div>
-            <p>wiadomosci</p>
+            <p>{contact}</p>
             <ul className="ml-5">
               {/*{messagesArray.map((message, index) => (*/}
               {/*  <li key={index}>*/}

client/src/socket/socket.tsx

@@ -11,8 +11,11 @@ socket.on("disconnect", () => {
   console.log("Disconnected from server");
 });
 
-function sendMessage(message: string) {
-  socket.emit("chat message", message);
+function sendMessage(message: string, recipient: string | null) {
+  socket.emit("chat message", { message: message, recipient: recipient });
 }
 
-export { sendMessage };
+function sendContact(recipient: string) {
+  socket.emit("contact", { recipient: recipient });
+}
+export { sendMessage, sendContact };

server/db/db.js

@@ -44,7 +44,7 @@ async function createTables() {
     await client.query(`
       CREATE TABLE IF NOT EXISTS messages (
         sender VARCHAR(128),
-        recipient VARCHAR(128),
+        recipient VARCHAR(128) NOT NULL,
         message VARCHAR(500),
         message_id SERIAL PRIMARY KEY
       );
@@ -76,14 +76,14 @@ async function insertUser(username, password, user_id, created_at) {
   }
 }
 
-async function insertMessage(sender, receiver_id, message) {
+async function insertMessage(sender, recipient, message) {
   const query = `
-  INSERT INTO messages (sender, receiver_id, message)
+  INSERT INTO messages (sender, recipient, message)
   VALUES ($1, $2, $3) 
-  RETURNING id;
+  RETURNING message_id;
   `;
   try {
-    await client.query(query, [sender, receiver_id, message]);
+    await client.query(query, [sender, recipient, message]);
   } catch (e) {
     console.error("Failed to insert message ", e);
   }

server/socket/socket.js

@@ -3,10 +3,7 @@ const { insertMessage, getMessages } = require("../db/db");
 const { verifyJwtToken } = require("../auth/jwt");
 
 function initializeSocket(io) {
-  console.log(
-    "sdfklsdfjklsdfjklasdfjkl;asdfjkljkasdfl;asjkldf;asdfjkl;jklasdfjklasdf;jkl;asdfjkl;asdf",
-  );
-  //TODO authorization
+  //TODO socket authorization
 
   io.on("connection", (socket) => {
     console.log("connected");
@@ -15,8 +12,13 @@ function initializeSocket(io) {
     const { username } = verifyJwtToken(token);
 
     socket.on("chat message", (msg) => {
-      insertMessage(username, "na razie nie ma ", msg);
-      console.log("message", msg);
+      const { message, recipient } = msg;
+      // checks if message is empty or recipient is null
+      if (!message || !recipient) {
+        return;
+      }
+      insertMessage(username, recipient, message);
+      console.log("received from chat message", msg);
     });
     socket.on("disconnect", () => {
       console.log("User disconnected");