fix(chat): users should be able to receive messages in real time

atlp-rwanda · Jul 30, 2024 · e2001e3 · e2001e3
1 parent 968b444
commit e2001e3
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 33 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -50,7 +50,7 @@ const App: React.FC = () => {
         && location.pathname !== "/login"
         && location.pathname !== "/register" && (
           <Link to="/chat">
-            <div className="fixed bg-primary text-white shadow-md rounded px-3 py-3 z-50 right-6 bottom-6 cursor-pointer group">
+            <div className="fixed bg-[#DB4444] text-white shadow-md rounded px-3 py-3 z-50 right-6 bottom-6 cursor-pointer group">
               <IoChatbubbleEllipsesOutline className="text-[30px] text-white" />
             </div>
           </Link>

diff --git a/src/__test__/userList.test.tsx b/src/__test__/userList.test.tsx
@@ -6,8 +6,17 @@ import MockAdapter from "axios-mock-adapter";
 import UserList from "../page-sections/UserList";
 import chatSlice from "../redux/reducers/chatSlice";
 import api from "../redux/api/api";
+import { socket } from "../config/socket";
 
 const mockApi = new MockAdapter(api);
+
+jest.mock("../config/socket", () => ({
+  socket: {
+    on: jest.fn(),
+    off: jest.fn(),
+  },
+}));
+
 const mockStore = (initialState) =>
   configureStore({
     reducer: {

diff --git a/src/components/dashboard/Header.tsx b/src/components/dashboard/Header.tsx
@@ -4,6 +4,7 @@ import { FaAngleDown } from "react-icons/fa6";
 import { BiSolidMessageDetail } from "react-icons/bi";
 import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
+
 import { getProfile } from "../../redux/reducers/profileSlice";
 import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { RootState } from "../../redux/store";
@@ -52,12 +53,10 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
 
   return (
     <>
-      <header className="flex lg:w-[80%] lg:ml-[5%] px-8 fixed z-30 top-0 items-center w-full justify-between py-4 bg-white dark:bg-secondary-black">
+      <header className="flex lg:w-[80%] lg:ml-[5%] px-8 fixed z-30 top-0 items-center w-full justify-between py-4 bg-white">
         <div className="relative flex items-center justify-between w-full lg:hidden">
           <FiMenu className="text-black w-6 h-6 mr-3" onClick={toggleSidebar} />
-          <div className="flex items-center gap-4">
-
-        </div>
+          <div className="flex items-center gap-4" />
         </div>
         <div className="flex items-center justify-end lg:justify-between  w-full">
           <div className="hidden lg:block relative">
@@ -67,7 +66,7 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
             <input
               type="text"
               placeholder="Search..."
-              className="pl-10 pr-10 py-2 rounded-md dark:border-[0.3px] outline-none bg-[#F7F8FA] focus:outline-none"
+              className="pl-10 pr-10 py-2 rounded-md border-[0.3px] outline-none bg-[#F7F8FA] focus:outline-none"
             />
           </div>
           <div className="flex items-center gap-6">
@@ -82,19 +81,22 @@ const Header: React.FC<HeaderProps> = ({ toggleSidebar }) => {
             </div>
 
             <div
-            className="flex items-center space-x-1 h-full relative cursor-pointer"
-            ref={profileDropdownRef}
-          >
-            <img
-              src={profileImage}
-              alt="User Avatar"
-              className="w-10 h-10 object-cover rounded-full"
-              onClick={() => setShowDropdown(!showDropdown)}
-            />
-            <h4>{profile?.fullName}</h4>
-            <FaAngleDown className="hidden lg:block" onClick={() => setShowDropdown(!showDropdown)} />
-            {showDropdown && <ProfileDropdown userInfo={userInfo} />}
-          </div>
+              className="flex items-center space-x-1 h-full relative cursor-pointer"
+              ref={profileDropdownRef}
+            >
+              <img
+                src={profileImage}
+                alt="User Avatar"
+                className="w-10 h-10 object-cover rounded-full"
+                onClick={() => setShowDropdown(!showDropdown)}
+              />
+              <h4>{profile?.fullName}</h4>
+              <FaAngleDown
+                className="hidden lg:block"
+                onClick={() => setShowDropdown(!showDropdown)}
+              />
+              {showDropdown && <ProfileDropdown userInfo={userInfo} />}
+            </div>
           </div>
         </div>
       </header>

diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
@@ -25,7 +25,7 @@ const SideBar: React.FC<SidebarProps> = ({ isOpen }) => {
          isOpen ? "translate-x-0" : "-translate-x-full"
        } lg:translate-x-0`}
     >
-      <div className="flex flex-col justify-between py-6 dark:bg-secondary-black min-h-screen">
+      <div className="flex flex-col justify-between py-6 min-h-screen">
         <div className="flex flex-col justify-center items-center">
           <Link to="/">
             <div className="text-black font-bold justify-center py-2 flex items-center gap-1">

diff --git a/src/components/dashboard/Spinner.tsx b/src/components/dashboard/Spinner.tsx
@@ -1,5 +1,5 @@
 const Spinner = () => (
-  <span className="inline-block dark:text-white">
+  <span className="inline-block">
     <svg
       width="20"
       height="20"

diff --git a/src/components/dashboard/admin/AdminSideBar.tsx b/src/components/dashboard/admin/AdminSideBar.tsx
@@ -54,7 +54,7 @@ const AdminSideBar: React.FC<SidebarProps> = ({ isOpen }) => {
          isOpen ? "translate-x-0" : "-translate-x-full"
        } lg:translate-x-0`}
     >
-      <div className="flex flex-col justify-between min-h-screen py-6 dark:bg-secondary-black">
+      <div className="flex flex-col justify-between min-h-screen py-6">
         <div className="flex flex-col items-center justify-center">
           <div className="flex items-center justify-center gap-1 py-2 font-bold text-black">
             <span className="font-[550] text-2xl">eagles</span>

diff --git a/src/components/dashboard/products/ProductsTable.tsx b/src/components/dashboard/products/ProductsTable.tsx
@@ -162,10 +162,7 @@ const ProductsTable: React.FC = () => {
               </tr>
             ) : products.length === 0 ? (
               <tr>
-                <td
-                  colSpan={6}
-                  className="text-center py-10 text-dark-gray dark:text-white"
-                >
+                <td colSpan={6} className="text-center py-10 text-dark-gray">
                   No products found.
                 </td>
               </tr>

diff --git a/src/page-sections/UserList.tsx b/src/page-sections/UserList.tsx
@@ -8,6 +8,7 @@ import { HiMiniUserGroup } from "react-icons/hi2";
 import { useAppDispatch } from "../redux/hooks";
 import Spinner from "../components/dashboard/Spinner";
 import { fetchChats, fetchUsers } from "../redux/reducers/chatSlice";
+import { socket } from "../config/socket";
 
 interface UserListProps {
   onUserSelect: (chat: any | null, user: any) => void;
@@ -38,6 +39,17 @@ const UserList: React.FC<UserListProps> = ({
   useEffect(() => {
     dispatch(fetchChats());
     dispatch(fetchUsers());
+
+    const handlePrivateMessage = () => {
+      dispatch(fetchChats());
+      dispatch(fetchUsers());
+    };
+
+    socket.on("private message recieved", handlePrivateMessage);
+
+    return () => {
+      socket.off("private message recieved", handlePrivateMessage);
+    };
   }, [dispatch]);
 
   useEffect(() => {
@@ -114,7 +126,7 @@ const UserList: React.FC<UserListProps> = ({
         <input
           type="text"
           placeholder="Search..."
-          className="px-10 py-2 rounded-md dark:border-[1px] text-gray-500 w-full outline-none bg-bg-gray dark:bg-transparent dark:border-dark-gray focus:outline-none"
+          className="px-10 py-2 rounded-md border-[1px] text-gray-500 w-full outline-none bg-bg-gray bg-transparent border-dark-gray focus:outline-none"
           value={searchTerm}
           onChange={handleSearchChange}
         />
@@ -193,7 +205,7 @@ const UserList: React.FC<UserListProps> = ({
                       {chat.messages.length > 0
                         ? chat.messages[
                           chat.messages.length - 1
-                        ].message.substring(0, 20)
+                        ].message.substring(0, 15)
                         : "No messages yet"}
                       ...
                     </p>

diff --git a/src/pages/ChatPage.tsx b/src/pages/ChatPage.tsx
@@ -43,10 +43,6 @@ const ChatPage: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    const handleConnect = () => {
-      socket.emit("private chats");
-    };
-
     const handleChatMessage = (msg: any) => {
       if (!publicMessageIds.current.has(msg.id)) {
         setPublicMessages((prevMessages) => [...prevMessages, msg]);
@@ -65,11 +61,17 @@ const ChatPage: React.FC = () => {
       );
     };
 
-    socket.on("connect", handleConnect);
     socket.on("chat message", handleChatMessage);
     socket.on("past messages", handlePastMessages);
   }, [publicMessages]);
 
+  useEffect(() => {
+    const handleConnect = () => {
+      socket.emit("private chats");
+    };
+    socket.on("connect", handleConnect);
+  }, []);
+
   useEffect(() => {
     const handlePrivateMessage = (message: any) => {
       if (!processedMessageIds.current.has(message.id)) {
@@ -191,6 +193,12 @@ const ChatPage: React.FC = () => {
       }));
 
       try {
+        socket.emit("private chat message", {
+          sender: profile?.username,
+          userId: profile?.id,
+          receiverId: newChatUser.id,
+          message: text,
+        });
         await dispatch(
           sendMessage({ message: text, id: newChatUser.id }),
         ).unwrap();