fix(chat ui):fixed ui for the chat

atlp-rwanda · Jul 11, 2024 · b8f1ea0 · b8f1ea0
1 parent 6f44a43
commit b8f1ea0
Show file tree

Hide file tree

Showing 12 changed files with 85 additions and 184 deletions.
diff --git a/src/__tests__/formatTime.test.tsx b/src/__tests__/formatTime.test.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -241,9 +241,9 @@ body {}
 }
 
 /* Scroll */
-.o-hidden{overflow: hidden !important;}
+/* .o-hidden{overflow: hidden !important;}
 .o-x-scroll{overflow-y: scroll !important;}
-.opacity-0{opacity: 0 !important;}
+.opacity-0{opacity: 0 !important;} */
 /* doubleshricked*/
 /* width */
 .scroll-double-shrinked::-webkit-scrollbar {
@@ -264,4 +264,4 @@ body {}
     margin-top: 4px !important ;
     margin-bottom: 4px !important ;
     height: 90% !important;
-}
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,15 +7,15 @@ import Header from '@/components/Header';
 import HeroSection from '@/components/HeroSection';
 import { LatestSection } from '@/components/LatestSection';
 import Footer from '@/components/Footer';
-import { MdOutlineChat } from 'react-icons/md';
-import { IoMdClose } from 'react-icons/io';
+
 import { HomeAds } from '@/components/HomeAds';
+
 import { ProductWithFilter } from '@/components/allProducts';
-import Link from 'next/link';
-import ChatRoomsList from '@/components/ChatRoomsList';
 import ChatPopUp from '@/hooks/ChatPopUp';
 import ChatWrapper from '@/components/chatWrapper';
-
+import Link from 'next/link';
+import { MdOutlineChat } from 'react-icons/md';
+import { checkUserLoggedIn } from '@/components/isLogged';
 
 export interface FormDataType {
   confirmPassword: string;
@@ -24,9 +24,8 @@ export interface FormDataType {
 }
 
 export default function Home() {
-  // const [isOpen, setIsOpen] = useState(false);
-  const [showlModal, setShowmodal] = useState(false);
   const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
+  const [showlModal, setShowmodal] = useState(false);
   const {
     register,
     handleSubmit,
@@ -43,42 +42,12 @@ export default function Home() {
     reset();
   };
 
-  // function handlePopUp(): void {
-  //   setIsOpen(!isOpen);
-  // }
-
   return (
     <div className="sm:flex sm:justify-center sm:items-center sm:flex-col">
       <Header />
       <HeroSection />
-      <main className="flex flex-col items-center justify-between ">
-        {/* <div className="sm:flex h-[20px] gap-10">
-          <div>
-            <button
-              className=" w-auto"
-              onClick={() => setShowmodal(!showlModal)}
-            >
-              change password
-            </button>
-          </div>
-        </div> */}
-      </main>
-      {/* Startttttttt */}
-      <div className='absolute right-5 w-full flex justify-end items-end'>
-        <div className="fixed bottom-20 z-50 h-[30rem] w-full max-w-[20%] ">
-          <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
-            <MdOutlineChat
-              className="text-4xl cursor-pointer z-20"
-              onClick={toggleChatPopUp}
-            />
-          </div>
-          {isChatPopUpOpen && (
-            // <ChatRoomsList chatrooms= {chatrooms} currentUser = {currentUser as string}/>
-            <ChatWrapper />
-          )}
-        </div>
-      </div>
-      {/* Enddddddddd */}
+      <main className="flex   flex-col items-center justify-between "></main>
+
       {/* The Image adds */}
       <HomeAds />
       {/* LAtest Product */}
@@ -98,6 +67,26 @@ export default function Home() {
           </Link>
         </div>
       </div>
+      {/* Startttttttt */}
+      <div className="absolute right-5 w-full flex justify-end items-end">
+        {checkUserLoggedIn() && (
+          <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
+            <MdOutlineChat
+              className="text-4xl cursor-pointer z-20"
+              onClick={toggleChatPopUp}
+            />
+          </div>
+        )}
+        <div
+          className={`${isChatPopUpOpen ? 'block fixed bottom-24' : 'hidden'} h-[30rem] w-full max-w-[20%]`}
+        >
+          {isChatPopUpOpen && (
+            // <ChatRoomsList chatrooms= {chatrooms} currentUser = {currentUser as string}/>
+            <ChatWrapper />
+          )}
+        </div>
+      </div>
+      {/* Enddddddddd */}
       {/* Footer Sections  */}
       <Footer />
     </div>

diff --git a/src/components/ChatConversation.tsx b/src/components/ChatConversation.tsx
@@ -70,7 +70,7 @@ const allMessagesList = messages.map((message:Message)=>{
            toogleDislay={toogleDislay}
           />
         </div>
-        <div className="h-[78%] w-full p-2 o-x-hidden o-x-scroll scroll-double-shrinked">
+        <div className="h-[78%] w-full p-2 overflow-hidden overflow-y-auto scroll-double-shrinked">
           {allMessagesList}
         </div>
         <div className="h-[10%] w-full border">

diff --git a/src/components/ChatRoomsList.tsx b/src/components/ChatRoomsList.tsx
@@ -23,16 +23,10 @@ const ChatRoomsList:React.FC<chatroomsLists>=({chatrooms, currentUser, toogleDis
     ))
   return (
     <>
-        <h2 className="flex justify-center self-center text-bold text-2xl py-3">
+        <h2 className="flex justify-center self-center text-bold text-2xl py-5 bg-gray-100">
           Messages
         </h2>
-        <div className="w-full flex justify-center items-center">
-          <input
-            type="text"
-            className="rounded-full border bg-gray-200 h-10 w-full max-w-[70%]"
-          />
-        </div>
-        <hr className="my-3" />
+        <hr />
         <div>
           {ListOfChatRooms}
         </div>

diff --git a/src/components/DashboardHeader.tsx b/src/components/DashboardHeader.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { CiBellOn } from 'react-icons/ci';
 import { GiHamburgerMenu } from 'react-icons/gi';
 import { useQuery } from '@tanstack/react-query';
@@ -32,41 +32,6 @@ const DashboardHeader: React.FC<HeaderInterface> = ({ pageName }) => {
     setOverlayComponent('notification');
   };
   const user = data?.User as userData;
-  // const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
-  // const [currentUser, setCurrentUser] = useState(getCurrentUser());
-  // const [currentUserToken, setCurrentUserToken] = useState('');
-  // const [chatrooms, setChatrooms] = useState([]);
-
-
-  //  useEffect(() => {
-  //   const token = localStorage.getItem('token');
-  //   if (token) {
-  //     const trimmedToken = token.split(' ')[1];
-  //     setCurrentUserToken(trimmedToken);
-
-  //     socket = io(`${process.env.URL__CHAT}`, {
-  //       auth: { token: trimmedToken },
-  //     });
-
-  //     socket.on('connect', () => {
-  //       socket.emit('fetch all chatrooms');
-  //     });
-
-  //     socket.on('connect_error', (err) => {
-  //       console.error('Socket connection error:', err);
-
-  //     });
-
-  //      socket.on('all chatrooms', (receivedChatrooms) => {
-  //     setChatrooms(receivedChatrooms);
-  //   });
-
-  //     return () => {
-  //       socket.off('all chatrooms');
-  //       socket.disconnect();
-  //     };
-  //   }
-  // }, [currentUserToken]);
 
   const handleCloseOverlay = () => {
     setOverlayComponent(null);

diff --git a/src/components/LayoutDashboard.tsx b/src/components/LayoutDashboard.tsx
@@ -3,9 +3,9 @@ import React, { FC, useEffect, useState } from 'react';
 import DashNavbar from '@/components/DashNavbar';
 import HeaderDash from '@/components/headerDash';
 import { useRouter } from 'next/navigation';
+import ChatWrapper from './chatWrapper';
 import { MdOutlineChat } from 'react-icons/md';
 import ChatPopUp from '@/hooks/ChatPopUp';
-import ChatWrapper from './chatWrapper';
 interface Properties {
   children: React.ReactNode;
   pageName: string;
@@ -16,6 +16,7 @@ const LayoutDashboard: React.FC<Properties> = ({
   pageName,
   isLoading,
 }) => {
+  const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
   const [user, setUser] = useState<any>();
   const router = useRouter();
   useEffect(() => {
@@ -33,46 +34,48 @@ const LayoutDashboard: React.FC<Properties> = ({
     };
     categ();
   }, []);
-  const { isChatPopUpOpen, setIsChatPopUpOpen, toggleChatPopUp } = ChatPopUp();
+
   return (
-    <div className="w-full flex sm:flex-row flex-col fixed ">
-      <div className="z-50">
-        <DashNavbar role={user?.Role?.name} />
-      </div>
-      <div className="flex-1 sm:pt-5   h-screen  sm:relative w-full   z-10 ">
-        <div className="mb-1  ">
-          <HeaderDash pageName={pageName} />
+    <>
+      <div className="w-full flex sm:flex-row flex-col fixed ">
+        <div className="z-50">
+          <DashNavbar role={user?.Role?.name} />
         </div>
-        <div className="flex justify-center sm:justify-start sm:items-start   overflow-auto h-[90vh] fixed sm:relative w-full sm:pb-10  pb-20   z-0">
-          {/* Statistic section  */}
-          <div className="w-full  relative flex flex-col gap-5 items-center sm:px-7  sm:justify-start sm:items-start z-10">
-            {!isLoading ? (
-              children
-            ) : (
-              <div className="min-h-screen w-full justify-center items-center flex">
-                <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
-              </div>
-            )}
+        <div className="flex-1 sm:pt-5   h-screen  sm:relative w-full   z-10 ">
+          <div className="mb-1  ">
+            <HeaderDash pageName={pageName} />
+          </div>
+          <div className="flex justify-center sm:justify-start sm:items-start   overflow-auto h-[90vh] fixed sm:relative w-full sm:pb-10  pb-20   z-0">
+            {/* Statistic section  */}
+            <div className="w-full  relative flex flex-col gap-5 items-center sm:px-7  sm:justify-start sm:items-start z-10">
+              {!isLoading ? (
+                children
+              ) : (
+                <div className="min-h-screen w-full justify-center items-center flex">
+                  <div className="border-t-4 border-b-4 border-blue-600 rounded-full w-20 h-20 animate-spin m-auto"></div>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
       {/* Startttttttt */}
       <div className='absolute right-5 w-full flex justify-end items-end'>
-        <div className="fixed bottom-20 z-50 h-[30rem] w-full max-w-[20%] ">
-          <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
+      <div className="fixed bottom-5 right-0 z-10 p-4 bg-green-300 rounded-full">
             <MdOutlineChat
               className="text-4xl cursor-pointer z-20"
               onClick={toggleChatPopUp}
             />
           </div>
+          <div className={`${isChatPopUpOpen?"block fixed bottom-24" : "hidden"} h-[30rem] w-full max-w-[20%]`}>
           {isChatPopUpOpen && (
             // <ChatRoomsList chatrooms= {chatrooms} currentUser = {currentUser as string}/>
             <ChatWrapper />
           )}
         </div>
       </div>
       {/* Enddddddddd */}
-    </div>
+    </>
   );
 };
 

diff --git a/src/components/Product/AddProducts.tsx b/src/components/Product/AddProducts.tsx
@@ -91,6 +91,7 @@ const ProductPopup: React.FC<ProductPopupProps> = ({
       console.log(result.message);
       onClose();
     } catch (error: any) {
+      console.error('Failed to create product:', error);
       let errorMessage = 'An unknown error occurred';
       if (error.response) {
         if (error.response.data && error.response.data.error) {

diff --git a/src/components/chatWrapper.tsx b/src/components/chatWrapper.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React,{useState, useEffect} from 'react'
 import ChatConversation from './ChatConversation'
 import ChatRoomsList from './ChatRoomsList'
@@ -16,9 +18,8 @@ export interface msgObject {
 }
 
 let socket: Socket;
-
 const ChatWrapper= () => {
-
+  const chatUrl = process.env.NEXT_PUBLIC_URL_CHAT as string;
   //socket connect
 
   const [chatrooms, setChatrooms] = useState([]);
@@ -43,14 +44,14 @@ const ChatWrapper= () => {
     }
   },[]);
 
-
   useEffect(() => {
     const token = localStorage.getItem('token');
     if (token) {
       const trimmedToken = token.split(' ')[1];
       setCurrentUserToken(trimmedToken);
-
-      socket = io('http://localhost:9090/chats', {
+      // const chatUrl = process.env.URL_CHAT as string
+      console.log("Chatttttt urllllllll",chatUrl);
+      socket = io(chatUrl, {
         auth: { token: trimmedToken },
       });
 

diff --git a/src/components/isLogged.tsx b/src/components/isLogged.tsx
@@ -0,0 +1,8 @@
+'use client'
+
+export const checkUserLoggedIn = (): boolean => {
+    const userLocalStorage = localStorage.getItem("profile");
+    const userParse =JSON.parse( userLocalStorage as string);
+    return (userParse?.User)? true : false;
+  };
+