added deleteContact api

client/src/components/chat/ContactsList.tsx

@@ -1,5 +1,6 @@
 import { sendRequestContactsList, socket } from '../../socket/socket.tsx';
 import { useEffect } from 'react';
+import axios from 'axios';
 
 type ContactsProps = {
   usernamecontact: string;
@@ -48,13 +49,37 @@ function ContactsList({
     };
   }, []);
 
+  function deleteContact(usernamecontact: string) {
+    axios
+      .delete(`http://localhost:5173/api/chat/contacts/${usernamecontact}`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        console.log(res.data.message);
+        // remove contact from list
+        setContactsList((prevContacts) =>
+          prevContacts.filter(
+            (contact) => contact.usernamecontact !== usernamecontact,
+          ),
+        );
+      });
+  }
   const addContactsList = contactsList.map((contact: ContactsProps, index) => (
     <li
-      className="hover:bg-green-700 p-2 rounded cursor-pointer"
+      className="flex hover:bg-green-700 p-2 rounded cursor-pointer"
       onClick={() => InitializeContact(contact.usernamecontact)}
       key={index}
     >
-      {contact.usernamecontact}
+      {contact.usernamecontact}{' '}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          deleteContact(contact.usernamecontact);
+        }}
+        className="ml-auto mr-2 text-gray-400 w-6 h-6 rounded-full hover:text-red-500 flex items-center justify-center"
+      >
+        x
+      </button>
     </li>
   ));
 

client/src/pages/Login.tsx

@@ -12,14 +12,13 @@ type Inputs = {
 
 export default function Login() {
   const { setAuthorized } = useContext(AuthContext);
+  const [message, setMessage] = useState('');
+  const navigate = useNavigate();
+
   const { register, handleSubmit } = useForm<Inputs>({
     mode: 'onChange',
   });
 
-  //const [validPassword, setValidPassword] = useState(true);
-  const [message, setMessage] = useState('');
-
-  const navigate = useNavigate();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     axios
       .post('http://localhost:5173/api/auth/login', data, {

server/db/db.js

@@ -68,7 +68,6 @@ async function createTables() {
 }
 
 async function insertUser(username, password) {
-  username = username.trim();
   const user_id = crypto.randomUUID();
   const created_at = new Date().toLocaleString("pl-PL");
 
@@ -84,7 +83,6 @@ async function insertUser(username, password) {
 }
 
 async function getUserId(username) {
-  username = username.trim();
   const query = `
     SELECT user_id FROM accounts
     WHERE username = $1;
@@ -204,16 +202,22 @@ async function getContacts(username) {
   }
 }
 
-async function removeContact(username, usernameContact) {
-  username = username.trim();
-  usernameContact = usernameContact.trim();
-
+async function deleteContact(username, usernamecontact) {
   const query = `
     DELETE FROM contacts 
-    WHERE (username = $1 AND contact = $2);
+    WHERE (LOWER(username) = LOWER($1) AND LOWER(usernamecontact) = LOWER($2))
+    RETURNING *;
   `;
   try {
-    await client.query(query, [username, usernameContact]);
+    const result = await client.query(query, [username, usernamecontact]);
+    if (result.rowCount === 0) {
+      console.log("No matching contact found with:", {
+        username,
+        usernamecontact,
+      });
+    } else {
+      console.log("Successfully deleted contact");
+    }
   } catch (e) {
     console.error("Failed to remove contact ", e);
   }
@@ -226,7 +230,7 @@ module.exports = {
   changePassword,
   getPassword,
   insertContact,
-  removeContact,
+  deleteContact,
   getMessages,
   getUserId,
   getContacts,

server/server.js

@@ -21,7 +21,9 @@ const {
   changePassword,
   getPassword,
   getUserId,
+  deleteContact,
 } = require("./db/db.js");
+const filter = require("./utils/filter");
 const { generateJwtToken, verifyJwtToken } = require("./auth/jwt");
 const { initializeSocket } = require("./socket/socket");
 
@@ -130,7 +132,24 @@ app.get("/api/auth/validate", (req, res) => {
   if (username) {
     return res.status(200).json({ message: "Authorized", username: username });
   }
-  return res.status(401).json({ message: "Unauthorized" });
+});
+
+app.delete("/api/chat/contacts/:contact", async (req, res) => {
+  const token = req.cookies.token;
+
+  if (!req.params.contact) {
+    return res.status(400).json({ message: "Missing usernamecontact" });
+  }
+  const usernamecontact = filter(req.params.contact);
+  if (!token) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  const { username } = verifyJwtToken(token);
+  if (!username) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  await deleteContact(username, usernamecontact);
+  return res.status(200).json({ message: "Successfully deleted contact" });
 });
 
 initializeSocket(io);

server/socket/socket.js

@@ -5,6 +5,7 @@ const {
   insertContact,
   getContacts,
 } = require("../db/db");
+const filter = require("../utils/filter");
 const { verifyJwtToken } = require("../auth/jwt");
 const console = require("node:console");
 
@@ -109,10 +110,4 @@ function initializeSocket(io) {
   });
 }
 
-function filter(text) {
-  if (typeof text !== "string" || text.length < 4 || text.length > 20) {
-    return null;
-  }
-  return text.replace(/[^a-zA-Z0-9]/g, "");
-}
 module.exports = { initializeSocket };

server/utils/filter.js

@@ -0,0 +1,9 @@
+function filter(text) {
+  if (text) {
+    if (text.length < 4 || text.length > 20) {
+      return null;
+    }
+    return text.replace(/[^a-zA-Z0-9]/g, "");
+  }
+}
+module.exports = filter;