added displaying last message under contact, UI improvement

2025-01-01 22:09:19 +01:00
parent 8558b9ac90
commit 867e465a23
13 changed files with 194 additions and 134 deletions
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -14,9 +14,11 @@ import ProtectedRoutes from './utils/ProtectedRoutes.tsx';
 import PublicRoute from '@/utils/PublicRoute.tsx';
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 export const axiosClient = axios.create({
  baseURL: '/',
 });
+
 const router = createBrowserRouter([
  {
    path: '/',
@@ -55,17 +57,15 @@ const router = createBrowserRouter([
 ]);

 function App() {
+  // Check for token immediately and set initial states accordingly
+  const hasToken = Boolean(Cookies.get('token'));
  const [authorized, setAuthorized] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(hasToken); // Only start loading if there's a token

  useEffect(() => {
    async function validateToken() {
-      const token = Cookies.get('token');
-      if (!token) {
-        setAuthorized(false);
-        setIsLoading(false);
-        return;
-      }
+      // If there's no token, we're already in the correct state
+      if (!hasToken) return;

      try {
        await axiosClient.get('/api/auth/validate', {
@@ -81,7 +81,7 @@ function App() {
    }

    validateToken();
-  }, []);
+  }, [hasToken]);

  return (
    <AuthContext.Provider value={{ authorized, isLoading, setAuthorized }}>
@@ -89,4 +89,5 @@ function App() {
    </AuthContext.Provider>
  );
 }
+
 export default App;
--- a/client/src/components/chat/AddGroupMember.tsx
+++ b/client/src/components/chat/AddGroupMember.tsx
@@ -120,7 +120,7 @@ function AddGroupMember({ contact }: AddGroupMemberProps) {
    <>
      <div>
        <button
-          className="m-2 p-1 rounded-xl hover:bg-gray-800 border"
+          className="p-2 hover:bg-zinc-800 rounded-lg"
          onClick={() =>
            (
              document.getElementById('addMemberModal') as HTMLDialogElement
--- a/client/src/components/chat/ContactForm.tsx
+++ b/client/src/components/chat/ContactForm.tsx
@@ -4,6 +4,7 @@ import { axiosClient } from '../../App.tsx';
 import { AxiosResponse } from 'axios';
 import { useEffect, useState } from 'react';
 import LoadingWheel from './LoadingWheel.tsx';
+import { Search } from 'lucide-react';

 type Input = {
  contact: string;
@@ -117,18 +118,30 @@ function ContactForm({ InitializeContact, setContactsList }: ContactFormProps) {

  return (
    <>
-      <div className="text-center">
+      <div>
+        <h1 className="text-xl font-semibold text-gray-200 text-left p-4">
+          Chats
+        </h1>
+        <hr className="border-b border-zinc-800" />
        <form onSubmit={handleSubmit(submitContact)}>
-          <input
-            className="text-white bg-gray-800 pl-2 shadow-lg rounded-xl h-8 mb-2 mt-2 placeholder:text-gray-400 outline-none border-gray-600 focus:outline-none focus:ring-0"
-            type="text"
-            placeholder="Search for user"
-            onKeyDown={handleKeyDown}
-            {...register('contact', {
-              minLength: 4,
-              maxLength: 20,
-            })}
-          />
+          <div className="p-4">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Search chats..."
+                className="w-full bg-zinc-900 rounded-lg py-2 pl-10 outline-0 focus:ring-emerald-800"
+                onKeyDown={handleKeyDown}
+                {...register('contact', {
+                  minLength: 4,
+                  maxLength: 20,
+                })}
+              />
+              <Search
+                className="absolute left-3 top-2.5 text-gray-400"
+                size={18}
+              />
+            </div>
+          </div>
        </form>
        <div className="m-1">
          {suggestions?.length > 0 ? (
--- a/client/src/components/chat/ContactProfile.tsx
+++ b/client/src/components/chat/ContactProfile.tsx
@@ -10,7 +10,7 @@ type ContactProfileProps = {

 function ContactProfile({ contact }: ContactProfileProps) {
  return (
-    <div className="flex items-center">
+    <div className="flex items-center p-2">
      <div className="flex items-center p-2">
        {contact?.type === 'group' ? (
          <UsersRound className="w-5 mr-2" />
--- a/client/src/components/chat/ContactsList.tsx
+++ b/client/src/components/chat/ContactsList.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { getContactsList } from '../../api/contactsApi.tsx';
 import { ChatMessagesProps, ContactsProps } from '../../pages/Chat.tsx';
 import { socket } from '../../socket/socket.tsx';
 import GroupIcon from '../../../assets/group.svg';
@@ -14,6 +13,7 @@ import {
  AlertDialogTitle,
  AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { axiosClient } from '@/App.tsx';

 type ContactsListProps = {
  initializeContact: (contact: ContactsProps) => void;
@@ -56,10 +56,11 @@ function ContactsList({
  }, [socket]);

  const fetchContacts = async () => {
-    const contacts: ContactsProps[] = await getContactsList();
-    console.log('Fetching contacts list', contacts);
+    console.log('Fetching contacts list');
+    const response = await axiosClient.get(`/api/chat/contacts`);
+    console.log('Get contacts list response: ', response.data);

-    setContactsList(contacts);
+    setContactsList(response.data);
  };

  async function removeContact(contactId: number, conversation_id: string) {
@@ -102,20 +103,30 @@ function ContactsList({

  const ContactItem = ({ contact }: { contact: ContactsProps }) => (
    <li
-      className=" flex hover:bg-slate-700 p-2 rounded-2xl cursor-pointer justify-between items-center min-h-[40px]"
+      className="m-1 flex p-2 hover:bg-zinc-900 cursor-pointer transition-colors rounded-lg justify-between items-center min-h-[40px]"
      onClick={() => {
        initializeContact(contact);
        updateContactStatus(contact, true);
      }}
    >
-      <span className="flex-shrink-0">
-        {/*usrId:{contact.user_id} cnvId:{contact.conversation_id}*/}
-        {contact.username}
-      </span>
-      {contact.type === 'group' ? (
-        <img src={GroupIcon} alt="Group icon" className="ml-2 invert w-5" />
-      ) : null}
-      <div className="w-4 h-4 mx-2 flex items-center justify-center mr-auto">
+      <div className="flex flex-grow">
+        <div className=" flex flex-col">
+          <div className="flex items-center">
+            <span className="text-lg">{contact.username}</span>
+            {contact.type === 'group' && (
+              <img
+                src={GroupIcon}
+                alt="Group icon"
+                className="ml-2 invert w-5"
+              />
+            )}
+          </div>
+          <span className="text-sm text-gray-500 text-left">
+            {contact.last_message}
+          </span>
+        </div>
+      </div>
+      <div className="w-4 h-4 flex items-center justify-center ml-2">
        <p className="text-center text-2xl text-red-200 leading-none">
          {contact.read ? '' : '•'}
        </p>
@@ -131,7 +142,7 @@ function ContactsList({
              x
            </button>
          </AlertDialogTrigger>
-          <AlertDialogContent className="bg-[09090B]">
+          <AlertDialogContent className="bg-zinc-950">
            <AlertDialogHeader>
              <AlertDialogTitle className="text-white">
                Leave Group?
@@ -169,8 +180,8 @@ function ContactsList({
  );

  return (
-    <div className="flex-grow overflow-y-auto w-64">
-      <ul className="items-center text-center ml-1 mt-2 flex-grow-1">
+    <div className=" flex-grow overflow-y-auto w-full p-1">
+      <ul className="items-center text-center flex-grow-1">
        {sortedContacts.map((contact: ContactsProps) => (
          <ContactItem key={contact.conversation_id} contact={contact} />
        ))}
--- a/client/src/components/chat/CreateGroupButton.tsx
+++ b/client/src/components/chat/CreateGroupButton.tsx
@@ -2,6 +2,7 @@ import LoadingWheel from './LoadingWheel.tsx';
 import { useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { axiosClient } from '../../App.tsx';
+import { Plus } from 'lucide-react';

 type Inputs = {
  groupName: string;
@@ -40,14 +41,14 @@ function CreateGroupButton() {
    <>
      <div>
        <button
-          className="m-2 border p-1 rounded-xl"
+          className="p-2 hover:bg-zinc-800 rounded-lg"
          onClick={() =>
            (
              document.getElementById('createGroupModal') as HTMLDialogElement
            ).showModal()
          }
        >
-          Create group
+          <Plus />
        </button>
        <dialog id="createGroupModal" className="modal" ref={modalRef}>
          <div className="modal-box bg-gray-800 text-center relative p-1">
@@ -58,7 +59,7 @@ function CreateGroupButton() {
            </div>

            <div className="flex flex-col items-center justify-center pb-1 mt-6">
-              <h3 className="text-lg mb-4">Enter room name</h3>
+              <h3 className="text-lg mb-4">Enter group name</h3>
              <form
                onSubmit={handleSubmit(onSubmit)}
                className="w-full max-w-xs relative"
@@ -73,10 +74,10 @@ function CreateGroupButton() {
                  aria-invalid={errors.groupName ? 'true' : 'false'}
                />
                {errors.groupName?.type === 'minLength' && (
-                  <p className="text-gray-300">room name is too short</p>
+                  <p className="text-gray-300">group name is too short</p>
                )}
                {errors.groupName?.type === 'maxLength' && (
-                  <p className="text-gray-300">room name is too long</p>
+                  <p className="text-gray-300">group name is too long</p>
                )}
              </form>
            </div>
--- a/client/src/components/chat/MessageForm.tsx
+++ b/client/src/components/chat/MessageForm.tsx
@@ -228,7 +228,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                      />
                    ) : (
                      <div className="flex items-center justify-center text-center p-2">
-                        <File className="mr-2 text-gray-300" />
+                        <File className=" text-gray-300" />
                        <p className="text-sm">{file.file.name}</p>
                      </div>
                    )}
@@ -259,7 +259,7 @@ const MessageForm = ({ contact }: MessageFormProps) => {
                  ref(e);
                  textareaRef.current = e;
                }}
-                className={`ml-2 w-full overflow-y-hidden resize-none bg-gray-800 border-none text-white rounded-2xl p-2 min-h-[40px] max-h-96 placeholder:text-gray-400 focus:outline-none focus:ring-0
+                className={` ml-2 w-full overflow-y-hidden resize-none bg-zinc-900 rounded-lg text-white min-h-[40px] max-h-96 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-emerald-800
                ${isOverLimit ? 'border-2 border-red-500' : isNearLimit ? 'border-2 border-yellow-500' : ''} mx-auto`}
                autoFocus={!!contact}
                disabled={!contact}
@@ -281,12 +281,12 @@ const MessageForm = ({ contact }: MessageFormProps) => {
            </div>
          </div>
          {errorMessage ? <p className="text-red-200">{errorMessage}</p> : null}
-          <div className="flex mr-2">
+          <div className="flex">
            <label
              htmlFor="attachments"
-              className="flex items-center justify-center hover:cursor-pointer p-1 rounded-full hover:bg-gray-800"
+              className="flex items-center justify-center hover:cursor-pointer p-2 rounded-full hover:bg-zinc-800"
            >
-              <Paperclip />
+              <Paperclip className="text-gray-200" />
            </label>
            <input
              name="attachments"
@@ -303,11 +303,15 @@ const MessageForm = ({ contact }: MessageFormProps) => {
              <span className="text-gray-500 text-sm">Uploading...</span>
            )}
            <button
-              className="text-white hover:bg-gray-800 p-1 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed h-10 w-10"
+              className="text-white hover:bg-zinc-800 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed h-10 w-10"
              type="submit"
              disabled={isOverLimit || isSending || isUploading}
            >
-              {isSending ? <LoadingWheel /> : <Send />}
+              {isSending ? (
+                <LoadingWheel />
+              ) : (
+                <Send className="text-gray-200" />
+              )}
            </button>
          </div>
        </div>
--- a/client/src/components/chat/MessagesArea.tsx
+++ b/client/src/components/chat/MessagesArea.tsx
@@ -30,7 +30,6 @@ function MessagesArea({
  fetchPreviousMessages,
  errorMessage,
  setMessages,
-  contactsList,
  me,
 }: MessagesAreaProps) {
  const containerRef = useRef<HTMLDivElement>(null);
@@ -108,7 +107,7 @@ function MessagesArea({
        msg.sender !== user.username
      ) {
        setContactsList((prevContacts) => {
-          // Find if contact already exists
+          // Find if contact already exists1
          const existingContact = prevContacts.find(
            (c) => c.conversation_id === msg.conversation_id,
          );
@@ -125,42 +124,32 @@ function MessagesArea({
                conversation_id: msg.conversation_id,
                type: 'direct',
                last_active: new Date().toString(),
+                last_message: msg.message,
+                last_message_sender: msg.sender,
+                last_message_time: new Date().toString(),
              },
            ];
-          } else if (existingContact) {
+          } else {
            return prevContacts.map((contact) =>
              contact.conversation_id === msg.conversation_id
-                ? { ...contact, last_active: new Date().toString() }
+                ? {
+                    ...contact,
+                    last_active: new Date().toString(),
+                    last_message: msg.message,
+                    last_message_sender: msg.sender,
+                    last_message_time: new Date().toString(),
+                  }
                : contact,
            );
          }
-
-          return prevContacts;
        });

-        // Find the existing contact from contactsList
-        const existingContact = contactsList.find(
-          (c) => c.conversation_id === msg.conversation_id,
-        );
-
-        updateContactStatus(
-          {
-            username: msg.sender,
-            read: false,
-            id: existingContact ? existingContact.id : msg.message_id, // Use existing contact's ID if found
-            user_id: msg.sender_id,
-            type: 'direct',
-            conversation_id: msg.conversation_id,
-            last_active: new Date().toString(),
-          },
-          false,
-        );
+        // Update contact status...
      } else {
        if (msg.conversation_id == currentContact?.conversation_id) {
          messageHandler(msg);

          setContactsList((prevContacts) => {
-            // Find if contact already exists
            const existingContact = prevContacts.find(
              (c) => c.conversation_id === msg.conversation_id,
            );
@@ -177,16 +166,24 @@ function MessagesArea({
                  conversation_id: msg.conversation_id,
                  type: 'direct',
                  last_active: new Date().toString(),
+                  last_message: msg.message,
+                  last_message_sender: msg.sender,
+                  last_message_time: new Date().toString(),
                },
              ];
-            } else if (existingContact) {
+            } else {
              return prevContacts.map((contact) =>
                contact.conversation_id === msg.conversation_id
-                  ? { ...contact, last_active: new Date().toString() }
+                  ? {
+                      ...contact,
+                      last_active: new Date().toString(),
+                      last_message: msg.message,
+                      last_message_sender: msg.sender,
+                      last_message_time: new Date().toString(),
+                    }
                  : contact,
              );
            }
-            return prevContacts;
          });
        }
      }
--- a/client/src/components/chat/ParticipantsBar.tsx
+++ b/client/src/components/chat/ParticipantsBar.tsx
@@ -164,6 +164,9 @@ function ParticipantsBar({
          type: 'group',
          conversation_id: msg.group_id,
          last_active: new Date().toString(),
+          last_message: '',
+          last_message_sender: '',
+          last_message_time: '',
        });
      }

@@ -230,8 +233,8 @@ function ParticipantsBar({
    socket.on('left group', handleLeftGroup);

    return () => {
-      socket?.off('added to group', handleAddedToGroup);
-      socket?.off('left group', handleLeftGroup);
+      socket?.off('added to group');
+      socket?.off('left group');
    };
  }, [socket, currentContact, currentContact, user?.user_id]);

@@ -239,7 +242,7 @@ function ParticipantsBar({
    (participant: ParticipantsProps) => (
      <ContextMenu key={participant.user_id}>
        <ContextMenuTrigger>
-          <li className="p-2 hover:bg-slate-600 rounded-2xl flex items-center justify-between group bg-slate-700 m-2">
+          <li className="p-2 hover:bg-zinc-800 rounded-2xl flex items-center justify-between group m-2">
            <span className="flex items-center gap-2">
              <div className="flex items-center justify-center w-8 h-8  overflow-hidden rounded-full bg-gray-100">
                <img
@@ -305,8 +308,12 @@ function ParticipantsBar({
  }

  return (
-    <div className="bg-zinc-900 h-full w-full flex flex-col ml-auto">
-      <ul className="m-2 rounded">{ParticipantsList}</ul>
+    <div className="border-l border-zinc-800  bg-zinc-950 h-full w-full flex flex-col ml-auto">
+      <h1 className="text-xl font-semibold text-gray-200 text-left p-4 border-b border-zinc-800">
+        Members
+      </h1>
+
+      <ul className=" rounded">{ParticipantsList}</ul>
    </div>
  );
 }
--- a/client/src/components/chat/UserProfile.tsx
+++ b/client/src/components/chat/UserProfile.tsx
@@ -13,7 +13,7 @@ function UserProfile() {
    window.location.reload();
  }
  return (
-    <div className="dropdown dropdown-top">
+    <div className="dropdown dropdown-top border-t border-zinc-800">
      <div
        tabIndex={0}
        className="flex items-center cursor-pointer"
--- a/client/src/pages/Chat.tsx
+++ b/client/src/pages/Chat.tsx
@@ -36,6 +36,9 @@ export type ContactsProps = {
  type: 'direct' | 'group';
  conversation_id: string;
  last_active: string;
+  last_message: string;
+  last_message_time: string;
+  last_message_sender: string;
 };

 function Chat() {
@@ -203,38 +206,35 @@ function Chat() {
  }

  return (
-    <>
-      <div className="text-white flex h-screen">
-        {/* Sidebar */}
-        <div className="h-screen bg-[#1E1E1E] flex flex-col">
-          <ContactForm
-            setContactsList={setContactsList}
-            InitializeContact={initializeContact}
-          />
-          <ContactsList
-            initializeContact={initializeContact}
-            contactsList={contactsList}
-            setContactsList={setContactsList}
-            setCurrentContact={setCurrentContact}
-            updateContactStatus={updateContactStatus}
-            setMessages={setMessages}
-            currentContact={currentContact}
-            setErrorMessage={setErrorMessage}
-          />
-          <hr />
-          <UserProfile />
-        </div>
+    <div className="text-white flex h-screen">
+      {/* Left Sidebar */}
+      <div className="w-64 h-screen flex-shrink-0 flex flex-col bg-zinc-950 text-center border-r border-zinc-800">
+        <ContactForm
+          setContactsList={setContactsList}
+          InitializeContact={initializeContact}
+        />
+        <ContactsList
+          initializeContact={initializeContact}
+          contactsList={contactsList}
+          setContactsList={setContactsList}
+          setCurrentContact={setCurrentContact}
+          updateContactStatus={updateContactStatus}
+          setMessages={setMessages}
+          currentContact={currentContact}
+          setErrorMessage={setErrorMessage}
+        />
+        <UserProfile />
+      </div>

-        {/*Chat area */}
-        <div className="text-white bg-[#121212] flex flex-col h-screen flex-grow">
-          <div className="flex-shrink-0">
-            <ContactProfile contact={currentContact} />
-          </div>
-          <hr />
-          {/* Messages and Participants Container */}
-          <div className="flex flex-grow overflow-hidden">
-            {/* Messages Container */}
-            <div className="flex-grow overflow-x-hidden overflow-y-auto">
+      {/*Chat area */}
+      <div className="flex-grow flex flex-col h-screen bg-[#0a0a0a]">
+        <div className="flex flex-grow overflow-hidden">
+          {/* Messages Container and Participants Container */}
+          <div className="flex-grow flex flex-col overflow-hidden">
+            <div className="flex-shrink-0 border-b border-zinc-800 ">
+              <ContactProfile contact={currentContact} />
+            </div>
+            <div className="flex-grow overflow-y-auto">
              <MessagesArea
                messages={messages}
                setMessages={setMessages}
@@ -248,28 +248,27 @@ function Chat() {
                me={me}
              />
            </div>
-
-            {/* Participants Bar */}
-            {currentContact?.type == 'group' ? (
-              <div className="w-80 bg-[#1E1E1E] flex-shrink-0">
-                <ParticipantsBar
-                  setMe={setMe}
-                  me={me}
-                  initializeContact={initializeContact}
-                  currentContact={currentContact}
-                />
-              </div>
-            ) : null}
+            <div className="flex-shrink-0 p-3 border-t border-zinc-800">
+              {currentContact && currentContact.username?.length >= 4 ? (
+                <MessageForm contact={currentContact} messages={messages} />
+              ) : null}
+            </div>
          </div>

-          <div className="flex-shrink-0 mb-2 mt-0">
-            {currentContact && currentContact.username?.length >= 4 ? (
-              <MessageForm contact={currentContact} messages={messages} />
-            ) : null}
-          </div>
+          {/* Right Sidebar - Participants */}
+          {currentContact?.type === 'group' && (
+            <div className="w-64 flex-shrink-0 border-l border-zinc-800 bg-zinc-950">
+              <ParticipantsBar
+                setMe={setMe}
+                me={me}
+                initializeContact={initializeContact}
+                currentContact={currentContact}
+              />
+            </div>
+          )}
        </div>
      </div>
-    </>
+    </div>
  );
 }