code refactor, getContacts function return conversation_id

client/src/components/chat/ContactForm.tsx

@@ -27,12 +27,12 @@ function ContactForm({ InitializeContact, setContactsList }: ContactFormProps) {
       });
 
       const response: AxiosResponse<{
-        contact_user_id: number;
-        contact_id: number;
+        user_id: number;
+        id: number;
       }> = await axiosClient.post(`/api/chat/contact/${contact}`);
 
       console.log(response.data);
-      const { contact_user_id, contact_id } = response.data;
+      const { user_id, id } = response.data;
       console.log('sdfjkljklsdfjklfdjklsdfjklsdf', response.data);
       InitializeContact(contact);
 
@@ -43,8 +43,8 @@ function ContactForm({ InitializeContact, setContactsList }: ContactFormProps) {
             {
               username: contact,
               read: true,
-              user_id: contact_user_id,
-              id: contact_id,
+              user_id: user_id,
+              id: id,
             },
           ];
         }

client/src/components/chat/ContactProfile.tsx

@@ -1,110 +1,19 @@
-import { useForm, SubmitHandler } from 'react-hook-form';
 import profile from '../../../assets/profile.svg';
-import { useRef, useState } from 'react';
-import LoadingWheel from './LoadingWheel.tsx';
-import { axiosClient } from '../../App.tsx';
-type Contact = {
-  contact: string | null;
-};
+import CreateGroupButton from './CreateGroupButton.tsx';
 
-type Inputs = {
-  groupName: string;
-};
-function ContactProfile({ contact }: Contact) {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const modalRef = useRef<HTMLDialogElement | null>(null);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<Inputs>();
-
-  const onSubmit: SubmitHandler<Inputs> = async (data) => {
-    try {
-      setIsLoading(true);
-      const response = await axiosClient.post(
-        `/api/chat/creategroup/${data.groupName}`,
-      );
-      console.log(response.data);
-      if (response.data.group_id) {
-        setIsLoading(false);
-        if (modalRef.current) {
-          modalRef.current.close();
-        }
-      }
-    } catch (e) {
-      console.error('Failed to create group: ', e);
-      setIsLoading(false);
-    }
-  };
+function ContactProfile({ contact }: { contact: string | null }) {
   return (
-    <>
-      <div className="flex">
-        <div className="m-2 flex items-center">
-          <div className="text-center text-gray-200 flex">
-            <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
-            <p>{contact ? contact : null}</p>
-          </div>
-        </div>
-
-        <div className="ml-auto">
-          <button
-            className="m-2 border p-1 rounded-md"
-            onClick={() =>
-              (
-                document.getElementById('my_modal_1') as HTMLDialogElement
-              ).showModal()
-            }
-          >
-            Create group
-          </button>
-          <dialog id="my_modal_1" className="modal" ref={modalRef}>
-            <div className="modal-box bg-gray-800 text-center relative p-1">
-              <div className="absolute right-2 top-2">
-                <form method="dialog">
-                  <button className="btn btn-sm btn-circle btn-ghost">✕</button>
-                </form>
-              </div>
-
-              <div className="flex flex-col items-center justify-center pb-1 mt-6">
-                <h3 className="text-lg mb-4">Enter room name</h3>
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="w-full max-w-xs relative"
-                >
-                  <input
-                    className="input input-bordered bg-green-50 w-full text-black rounded-md text-center"
-                    {...register('groupName', {
-                      required: true,
-                      minLength: 4,
-                      maxLength: 20,
-                    })}
-                    aria-invalid={errors.groupName ? 'true' : 'false'}
-                  />
-                  {errors.groupName?.type === 'minLength' && (
-                    <p className="text-gray-300">room name is too short</p>
-                  )}
-                  {errors.groupName?.type === 'maxLength' && (
-                    <p className="text-gray-300">room name is too long</p>
-                  )}
-                </form>
-              </div>
-
-              <div className="mt-4 flex justify-center">
-                <button
-                  type="submit"
-                  onClick={handleSubmit(onSubmit)}
-                  className="btn btn-sm bg-green-500 text-black hover:bg-green-600"
-                >
-                  {isLoading ? <LoadingWheel /> : 'Create'}
-                </button>
-              </div>
-            </div>
-          </dialog>
-        </div>
+    <div className="flex items-center">
+      <div className="flex items-center p-2">
+        <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
+        <p>{contact ? contact : null}</p>
       </div>
-    </>
+      <div className="flex-grow"></div>
+
+      <div>
+        <CreateGroupButton />
+      </div>
+    </div>
   );
 }
 

client/src/components/chat/CreateGroupButton.tsx

@@ -0,0 +1,100 @@
+import LoadingWheel from './LoadingWheel.tsx';
+import { useRef, useState } from 'react';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { axiosClient } from '../../App.tsx';
+
+type Inputs = {
+  groupName: string;
+};
+
+function createGroupButton() {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const modalRef = useRef<HTMLDialogElement | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    try {
+      setIsLoading(true);
+      const response = await axiosClient.post(
+        `/api/chat/creategroup/${data.groupName}`,
+      );
+      console.log(response.data);
+      if (response.data.group_id) {
+        setIsLoading(false);
+        if (modalRef.current) {
+          modalRef.current.close();
+        }
+      }
+    } catch (e) {
+      console.error('Failed to create group: ', e);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <div>
+        <button
+          className="m-2 border p-1 rounded-md"
+          onClick={() =>
+            (
+              document.getElementById('my_modal_1') as HTMLDialogElement
+            ).showModal()
+          }
+        >
+          Create group
+        </button>
+        <dialog id="my_modal_1" className="modal" ref={modalRef}>
+          <div className="modal-box bg-gray-800 text-center relative p-1">
+            <div className="absolute right-2 top-2">
+              <form method="dialog">
+                <button className="btn btn-sm btn-circle btn-ghost">✕</button>
+              </form>
+            </div>
+
+            <div className="flex flex-col items-center justify-center pb-1 mt-6">
+              <h3 className="text-lg mb-4">Enter room name</h3>
+              <form
+                onSubmit={handleSubmit(onSubmit)}
+                className="w-full max-w-xs relative"
+              >
+                <input
+                  className="input input-bordered bg-green-50 w-full text-black rounded-md text-center"
+                  {...register('groupName', {
+                    required: true,
+                    minLength: 4,
+                    maxLength: 20,
+                  })}
+                  aria-invalid={errors.groupName ? 'true' : 'false'}
+                />
+                {errors.groupName?.type === 'minLength' && (
+                  <p className="text-gray-300">room name is too short</p>
+                )}
+                {errors.groupName?.type === 'maxLength' && (
+                  <p className="text-gray-300">room name is too long</p>
+                )}
+              </form>
+            </div>
+
+            <div className="mt-4 flex justify-center">
+              <button
+                type="submit"
+                onClick={handleSubmit(onSubmit)}
+                className="btn btn-sm bg-green-500 text-black hover:bg-green-600"
+              >
+                {isLoading ? <LoadingWheel /> : 'Create'}
+              </button>
+            </div>
+          </div>
+        </dialog>
+      </div>
+    </>
+  );
+}
+
+export default createGroupButton;

server/db/db.js

@@ -360,8 +360,7 @@ async function getMessages(user_id, receiverUsername, limit = 50, cursor = 0) {
   try {
     const results = await client.query(query, params);
     console.log(
-      `Get messages for user_id: ${user_id}, receiverUsername: ${receiverUsername}: `,
-      results.rows,
+      `Get messages for user_id: ${user_id}, receiverUsername: ${receiverUsername}`,
     );
     let messages = results.rows;
     if (!cursor) {
@@ -496,12 +495,27 @@ async function getContacts(user_id) {
   const contactsQuery = `
     SELECT 
       c.contact_id AS id,
-      c.contact_user_id AS user_id,
+      c.contact_user_id AS contact_user_id,
       a.username AS username,
       c.last_active,
-      'direct' AS conversation_type
+      'direct' AS type,
+      COALESCE(m.conversation_id, NULL) AS conversation_id
     FROM Contacts c
     JOIN Accounts a ON a.user_id = c.contact_user_id
+    LEFT JOIN Memberships m ON m.user_id = c.contact_user_id AND m.conversation_id = (
+      SELECT conv.conversation_id 
+      FROM Conversations conv 
+      JOIN Memberships mem ON conv.conversation_id = mem.conversation_id 
+      WHERE mem.user_id = $1 
+      AND conv.conversation_type = 'direct'
+      AND EXISTS (
+        SELECT 1 
+        FROM Memberships mem2 
+        WHERE mem2.conversation_id = mem.conversation_id 
+        AND mem2.user_id = c.contact_user_id
+      )
+      LIMIT 1
+    )
     WHERE c.user_id = $1
     ORDER BY c.last_active DESC;
   `;
@@ -511,7 +525,8 @@ async function getContacts(user_id) {
       m.conversation_id AS user_id,
       c.name AS username,
       c.created_at AS last_active,
-      c.conversation_type
+      c.conversation_type AS type,
+      c.conversation_id AS conversation_id
     FROM Memberships m
     JOIN Conversations c ON m.conversation_id = c.conversation_id
     WHERE m.user_id = $1 AND c.conversation_type = 'group'
@@ -525,7 +540,7 @@ async function getContacts(user_id) {
     const contacts = contactsResult.rows;
     const groups = groupsResult.rows.map((group) => ({
       ...group,
-      user_id: group.user_id,
+      user_id: group.conversation_id, // Ensure user_id is correctly mapped
     }));
 
     // Combine contacts and groups