📱 chating page responsiveness issue solved

sinanptm · Oct 6, 2024 · b7e5bb0 · b7e5bb0
1 parent b71e1d7
commit b7e5bb0
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 29 deletions.
diff --git a/client/app/(patient)/chats/@chatList/page.tsx b/client/app/(patient)/chats/@chatList/page.tsx
@@ -8,26 +8,27 @@ import { useEffect, useState } from "react";
 const Page = () => {
   const { data } = useGetDoctorsList();
   const [isNewChatModalOpen, setNewChatModalOpen] = useState(false);
-  const [isLoading, setLoading] = useState(true)
-  const { chats, createChat, error, joinChatRoom } = useChats({ role: "patient", messagePath: "/chats" })
-  const doctors: ChatModelUser[] = data?.items.map(({ _id, image, name }) => ({ _id, name, profilePicture: image })) || [];
+  const [isLoading, setLoading] = useState(true);
+  const { chats, createChat, error, joinChatRoom } = useChats({ role: "patient", messagePath: "/chats" });
+  const [doctors, setDoctors] = useState<ChatModelUser[] | []>([])
 
   useEffect(() => {
     if (chats) {
       setLoading(false)
     }
-  }, [chats]);
+    setDoctors(prev => data?.items.map(({ _id, image, name }) => ({ _id, name, profilePicture: image })) || [])
+  }, [chats, data]);
 
   const handleCloseModal = () => {
     setNewChatModalOpen(false)
   }
-  
+
 
   const handleJoinChat = (chatId: string) => {
     joinChatRoom(chatId);
   }
 
-  
+
   const handleAddDoctorChat = (doctorId: string) => {
     setNewChatModalOpen(false);
     createChat(doctorId);

diff --git a/client/app/doctor/chats/@chatList/page.tsx b/client/app/doctor/chats/@chatList/page.tsx
@@ -7,15 +7,17 @@ import useChats from "@/lib/hooks/useChats";
 const Page = () => {
   const [isNewChatModalOpen, setNewChatModalOpen] = useState(false);
   const [isLoading, setLoading] = useState(true)
-  const { chats, createChat, error, joinChatRoom, patients, getPatients } = useChats({ role: "doctor", messagePath: "/doctor/chats" })
+  const {
+    chats, createChat, error, joinChatRoom, patients, getPatients
+  } = useChats({ role: "doctor", messagePath: "/doctor/chats" })
+
 
-
   useEffect(() => {
     if (chats && patients) {
       setLoading(false)
     }
   }, [chats, patients]);
-  
+
   const handleJoinChat = (chatId: string) => {
     joinChatRoom(chatId);
   }
@@ -29,7 +31,7 @@ const Page = () => {
     createChat(patientId);
   }
 
-  const handleClickNewChat = ()=>{
+  const handleClickNewChat = () => {
     getPatients();
     setNewChatModalOpen(true);
   }

diff --git a/client/components/page-components/chat/ChatLayout.tsx b/client/components/page-components/chat/ChatLayout.tsx
@@ -2,34 +2,39 @@
 
 import { ReactNode, useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
-import { useAuth } from '@/lib/hooks/useAuth';
-import ChatLayoutSkeleton from '@/components/skeletons/ChatSkelton';
-import NotAuthenticated from './NotAuthenticated';
+import { useAuth } from '@/lib/hooks/useAuth'
+import ChatLayoutSkeleton from '@/components/skeletons/ChatSkelton'
+import NotAuthenticated from './NotAuthenticated'
 
 export default function ChatLayout({
   chatList,
   chat,
   isPatient
 }: {
-  chatList: ReactNode;
-  chat: ReactNode;
-  isPatient: boolean;
+  chatList: ReactNode
+  chat: ReactNode
+  isPatient: boolean
 }) {
   const pathname = usePathname();
   const [isLoading, setLoading] = useState(true);
-  const isInChatView = pathname.startsWith('/chats/');
+  const [isInChatView, setIsInChatView] = useState(false)
   const { patientToken } = useAuth();
 
+  useEffect(() => {
+    setIsInChatView(pathname.includes('/chats/'))
+  }, [pathname])
+
   useEffect(() => {
     if (isPatient) {
       const timer = setTimeout(() => {
-        setLoading(false);
-      }, 0);
-      return () => clearTimeout(timer);
+        setLoading(false)
+      }, 0)
+      return () => clearTimeout(timer)
     } else {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [isPatient ]);
+  }, [isPatient]);
+
 
   if (isLoading) {
     return <ChatLayoutSkeleton />
@@ -40,7 +45,7 @@ export default function ChatLayout({
   }
 
   return (
-    <div className={`flex h-[calc(100vh-4rem)] ${!isPatient ? 'border border-border border-r m-0' : ''}`}>
+    <div className={`flex flex-col sm:flex-row h-[calc(100vh-4rem)] ${!isPatient ? 'border border-border border-r m-0' : ''}`}>
       <aside
         className={`${isInChatView ? 'hidden sm:block' : 'block'
           } w-full sm:w-64 md:w-80 border-r border-border overflow-hidden flex-shrink-0`}

diff --git a/server/src/presentation/socket/socketManagers/ChatSocketManager.ts b/server/src/presentation/socket/socketManagers/ChatSocketManager.ts
@@ -109,7 +109,7 @@ export default class ChatSocketManager {
     }
 
     async updateReceived(chatId: string, receiverId: string) {
-        await this.getChatUseCase.markAsReceived(chatId, receiverId);
+        await this.getChatUseCase.markReceived(chatId, receiverId);
         this.io.to(chatId).emit("received", { chatId })
     }
 

diff --git a/server/src/use_case/chat/GetChatUseCase.ts b/server/src/use_case/chat/GetChatUseCase.ts
@@ -30,13 +30,13 @@ export default class GetChatUseCase {
             return false;
         }
     }
-
+    
     async getAllChatsWithPatientId(patientId: string): Promise<IChat[] | []> {
         this.validatorService.validateIdFormat(patientId);
         const chats = await this.chatRepository.findAllChatsForPatient(patientId);
         return await this.getChatsWithNotSeenMessages(patientId, chats);
     }
-
+    
     async getAllChatsWithDoctorId(doctorId: string): Promise<IChat[] | []> {
         this.validatorService.validateIdFormat(doctorId);
         const chats = await this.chatRepository.findAllChatsForDoctor(doctorId);
@@ -56,10 +56,11 @@ export default class GetChatUseCase {
         const messages = await this.messageRepository.findByChatId(chatId);
         return { messages, chat }
     }
-
-    async markAsReceived(chatId:string,receiverId:string):Promise<void>{
+
+    async markReceived(chatId:string,receiverId:string):Promise<void>{
+        this.validatorService.validateMultipleIds([receiverId,chatId])
         await this.messageRepository.markAsReadByReceiverAndChatId(receiverId, chatId);
-    }   
+    }
 
     private async getChatsWithNotSeenMessages(
         receiverId: string,