From 9240253c0b3466146aba088fb1938d82f359ac3b Mon Sep 17 00:00:00 2001
From: Sinan <muhammedsinan7749@gmail.com>
Date: Wed, 25 Sep 2024 12:17:26 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=ACchat=20completed=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../page-components/chat/ChatSection.tsx      | 96 ++++++-------------
 .../page-components/chat/Messages.tsx         | 70 ++++++++++++++
 client/lib/hooks/chat/useChatDoctor.ts        |  2 +-
 server/package.json                           |  2 +-
 .../controllers/chat/ChatControllers.ts       |  2 +-
 5 files changed, 104 insertions(+), 68 deletions(-)
 create mode 100644 client/components/page-components/chat/Messages.tsx

diff --git a/client/components/page-components/chat/ChatSection.tsx b/client/components/page-components/chat/ChatSection.tsx
index 4ecde7f0..73f75010 100644
--- a/client/components/page-components/chat/ChatSection.tsx
+++ b/client/components/page-components/chat/ChatSection.tsx
@@ -1,18 +1,18 @@
 "use client"
 
 import { useRef, useEffect, useState } from "react"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Input } from "@/components/ui/input"
-import { ArrowLeft, Send, AlertCircle, Smile, LogIn } from "lucide-react"
+import { ArrowLeft, Send, AlertCircle, Smile } from "lucide-react"
 import { IChat, IMessage } from "@/types"
 import { useRouter } from "next/navigation"
 import { Spinner } from "@/components/skeletons/spinner"
-import { getSenderData } from "./getUserData"
-import { format } from "date-fns"
+import { getReceiverData, getSenderData } from "./getUserData"
 import dynamic from 'next/dynamic'
 import { EmojiClickData, Theme } from 'emoji-picker-react'
 import { ButtonV2 } from "@/components/common/ButtonV2"
+import Messages from "./Messages"
+import { useQueryClient } from "@tanstack/react-query"
 
 const EmojiPicker = dynamic(() => import('emoji-picker-react'), { ssr: false })
 
@@ -40,15 +40,17 @@ export default function ChatSection({
   const [message, setMessage] = useState("")
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const router = useRouter()
-  const scrollAreaRef = useRef<HTMLDivElement>(null)
-  const emojiButtonRef = useRef<HTMLButtonElement>(null)
-  const emojiPickerRef = useRef<HTMLDivElement>(null)
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const emojiButtonRef = useRef<HTMLButtonElement>(null);
+  const emojiPickerRef = useRef<HTMLDivElement>(null);
+  const query = useQueryClient();
 
   const handleSendMessage = () => {
     if (message.trim()) {
       onSendMessage(message)
       setMessage("")
       setShowEmojiPicker(false)
+      query.invalidateQueries({ queryKey: ['messages', chat._id] })
     }
   }
 
@@ -65,7 +67,7 @@ export default function ChatSection({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
-        emojiButtonRef.current && 
+        emojiButtonRef.current &&
         !emojiButtonRef.current.contains(event.target as Node) &&
         emojiPickerRef.current &&
         !emojiPickerRef.current.contains(event.target as Node)
@@ -78,7 +80,7 @@ export default function ChatSection({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, []);
+  }, [])
 
   if (isLoading) {
     return (
@@ -101,11 +103,11 @@ export default function ChatSection({
   }
 
   return (
-    <div className="flex flex-col h-full bg-background">
-      <header className="p-4 border-b border-border flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div className="flex flex-col h-full bg-black">
+      <header className="p-4 border-b border-gray-800 flex-shrink-0 bg-black">
         <div className="flex items-center space-x-4">
           <ButtonV2 variant="ghost" size="icon" onClick={() => router.back()} className="sm:hidden">
-            <ArrowLeft className="h-6 w-6" />
+            <ArrowLeft className="h-6 w-6 text-white" />
             <span className="sr-only">Back to chat list</span>
           </ButtonV2>
           <Avatar className="w-10 h-10">
@@ -113,80 +115,44 @@ export default function ChatSection({
               src={getSenderData(sender, chat.doctorProfile!, chat.patientProfile!) || `/assets/icons/circle-user.svg`}
               alt={`${getSenderData(sender, chat.doctorName!, chat.patientName!)}`}
             />
-            <AvatarFallback>{sender[0].toUpperCase()}</AvatarFallback>
+            <AvatarFallback>{sender.charAt(0).toUpperCase()}</AvatarFallback>
           </Avatar>
           <div>
-            <h2 className="text-lg font-semibold">{getSenderData(sender, chat.doctorName!, chat.patientName!)}</h2>
-            <p className="text-sm text-muted-foreground">{sender === "doctor" ? "Patient" : "Doctor"}</p>
+            <h2 className="text-lg font-semibold text-white">{getSenderData(sender, chat.doctorName!, chat.patientName!)}</h2>
+            <p className="text-sm text-gray-400">{sender.charAt(0).toUpperCase() + sender.slice(1)}</p>
           </div>
         </div>
       </header>
-      <ScrollArea className="flex-grow p-4" ref={scrollAreaRef}>
-        <div className="space-y-4">
-          {messages.map(({ _id, message, isReceived, createdAt }) => (
-            <div
-              key={_id}
-              className={`flex items-end gap-2 ${isReceived ? "justify-start" : "justify-end"}`}
-            >
-              {isReceived && (
-                <Avatar className="w-8 h-8">
-                  <AvatarImage
-                    src={getSenderData(sender === "doctor" ? "patient" : "doctor", chat.doctorProfile!, chat.patientProfile!) || `/assets/icons/circle-user.svg`}
-                    alt={`${getSenderData(sender === "doctor" ? "patient" : "doctor", chat.doctorName!, chat.patientName!)}`}
-                  />
-                  <AvatarFallback>{(sender === "doctor" ? "P" : "D")}</AvatarFallback>
-                </Avatar>
-              )}
-              <div className={`flex flex-col ${isReceived ? "items-start" : "items-end"} max-w-[70%]`}>
-                <div className={`rounded-lg p-3 ${isReceived ? "bg-accent" : "bg-primary text-primary-foreground"}`}>
-                  <p className="text-sm">{message}</p>
-                </div>
-                <div className="flex items-center text-xs text-muted-foreground mt-1">
-                  <span className="text-[10px]">{format(new Date(createdAt!), "HH:mm")}</span>
-                  {!isReceived && <span className="text-[10px] ml-1">✔</span>}
-                </div>
-              </div>
-              {!isReceived && (
-                <Avatar className="w-8 h-8">
-                  <AvatarImage
-                    src={getSenderData(sender, chat.doctorProfile!, chat.patientProfile!) || `/assets/icons/circle-user.svg`}
-                    alt={`${getSenderData(sender, chat.doctorName!, chat.patientName!)}`}
-                  />
-                  <AvatarFallback>{sender[0].toUpperCase()}</AvatarFallback>
-                </Avatar>
-              )}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-      <footer className="border-t border-border p-4 flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <Messages messages={messages} sender={sender} chat={chat} />
+      <footer className="border-t border-gray-800 p-4 flex-shrink-0 bg-black">
         <div className="flex items-center gap-2">
-          <Input 
-            className="flex-1" 
-            placeholder={`Message ${getSenderData(sender, chat.doctorName!, chat.patientName!)}`} 
+          <Input
+            className="flex-1 bg-gray-800 text-white border-gray-700"
+            placeholder={`Message ${getReceiverData(sender, chat.doctorName!, chat.patientName!)}`}
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
           />
           <div className="relative">
-            <ButtonV2 
-              variant="ghost" 
-              size="icon" 
+            <ButtonV2
+              variant="ghost"
+              size="icon"
               onClick={() => setShowEmojiPicker(!showEmojiPicker)}
               ref={emojiButtonRef}
               aria-label="Add emoji"
             >
-              <Smile className="h-5 w-5" />
+              <Smile className="h-5 w-5 text-white" />
             </ButtonV2>
             {showEmojiPicker && (
               <div className="absolute bottom-full right-0 mb-2 z-10" ref={emojiPickerRef}>
-                <EmojiPicker theme={Theme.AUTO} onEmojiClick={handleEmojiClick} />
+                <EmojiPicker theme={Theme.DARK} onEmojiClick={handleEmojiClick} />
               </div>
             )}
           </div>
-          <ButtonV2 
-            onClick={handleSendMessage} 
-            disabled={!message.trim() || isPending}
+          <ButtonV2
+            onClick={handleSendMessage}
+            disabled={!message.trim()}
+            className="bg-blue-600 text-white hover:bg-blue-700"
           >
             <Send className="h-4 w-4 mr-2" />
             Send
diff --git a/client/components/page-components/chat/Messages.tsx b/client/components/page-components/chat/Messages.tsx
new file mode 100644
index 00000000..7ebade81
--- /dev/null
+++ b/client/components/page-components/chat/Messages.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { useRef, useEffect } from 'react'
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { format } from "date-fns"
+import { IChat, IMessage } from "@/types"
+import { getReceiverData, getSenderData } from './getUserData'
+
+interface ChatSectionProps {
+    sender: "doctor" | "patient"
+    messages: IMessage[]
+    chat: IChat
+}
+
+export default function Messages({ messages, sender, chat }: ChatSectionProps) {
+    const scrollAreaRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        if (scrollAreaRef.current) {
+            scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight
+        }
+    }, [messages])
+
+    return (
+        <ScrollArea className="flex-grow p-4" ref={scrollAreaRef}>
+            <div className="space-y-4">
+                {messages.map(({ _id, message, senderId, createdAt }) => {
+                    const isSenderMessage = senderId === (sender === 'patient' ? chat.doctorId : chat.patientId);
+
+                    if (isSenderMessage) {
+                        return (
+                            <div key={_id} className="flex items-end space-x-2 justify-start">
+                                <Avatar className="w-8 h-8 ring-2 ring-blue-600">
+                                    <AvatarImage src={getSenderData(sender, chat.doctorProfile!, chat.patientProfile!) || `/assets/icons/circle-user.svg`} alt="sender" />
+                                    <AvatarFallback>{getSenderData(sender, chat.doctorName!, chat.patientName!).charAt(0)}</AvatarFallback>
+                                </Avatar>
+                                <div className="flex flex-col items-start max-w-[70%]">
+                                    <div className="bg-blue-600 text-white rounded-2xl rounded-tl-sm p-3 shadow-md">
+                                        <p className="text-sm">{message}</p>
+                                    </div>
+                                    <span className="text-xs text-gray-400 mt-1">
+                                        {format(new Date(createdAt!), "HH:mm")}
+                                    </span>
+                                </div>
+                            </div>
+                        );
+                    } else {
+                        return (
+                            <div key={_id} className="flex items-end space-x-2 justify-end">
+                                <div className="flex flex-col items-end max-w-[70%]">
+                                    <div className="bg-gray-200 text-gray-900 rounded-2xl rounded-br-sm p-3 shadow-md">
+                                        <p className="text-sm">{message}</p>
+                                    </div>
+                                    <span className="text-xs text-gray-400 mt-1">
+                                        {format(new Date(createdAt!), "HH:mm")}
+                                    </span>
+                                </div>
+                                <Avatar className="w-8 h-8 ring-2 ring-gray-300">
+                                    <AvatarImage src={getReceiverData(sender, chat.doctorProfile!, chat.patientProfile!) || `/assets/icons/circle-user.svg`} alt="receiver" />
+                                    <AvatarFallback>{getReceiverData(sender, chat.doctorName!, chat.patientName!).charAt(0)}</AvatarFallback>
+                                </Avatar>
+                            </div>
+                        );
+                    }
+                })}
+            </div>
+        </ScrollArea>
+    )
+}
\ No newline at end of file
diff --git a/client/lib/hooks/chat/useChatDoctor.ts b/client/lib/hooks/chat/useChatDoctor.ts
index 7987d51f..e8355caf 100644
--- a/client/lib/hooks/chat/useChatDoctor.ts
+++ b/client/lib/hooks/chat/useChatDoctor.ts
@@ -13,7 +13,7 @@ export const useGetDoctorChats = () => {
 
 export const useGetDoctorMessages = (chatId: string, limit: number) => {
     return useQuery<{ chat: IChat, data: PaginatedResult<IMessage> }, AxiosError<ErrorResponse>>({
-        queryKey: ['doctor-messages', chatId],
+        queryKey: ['messages', chatId],
         queryFn: () => getMessagesOfDoctorChat(chatId, limit)
     });
 }
diff --git a/server/package.json b/server/package.json
index b9ebd939..cf32f1ab 100644
--- a/server/package.json
+++ b/server/package.json
@@ -45,6 +45,6 @@
       "nodemon": "^3.1.4",
       "prettier": "^3.3.3",
       "ts-node": "^10.9.2",
-      "typescript": "^5.5.4"
+      "typescript": "^5.6.2"
    }
 }
diff --git a/server/src/presentation/controllers/chat/ChatControllers.ts b/server/src/presentation/controllers/chat/ChatControllers.ts
index ca8a9bbe..f8610bec 100644
--- a/server/src/presentation/controllers/chat/ChatControllers.ts
+++ b/server/src/presentation/controllers/chat/ChatControllers.ts
@@ -71,7 +71,7 @@ export default class ChatController {
         try {
             const doctorId = req.doctor?.id;
             const { chatId, patientId, message } = req.body;
-            await this.createChatUseCase.createMessage(chatId, patientId, message, doctorId!);
+            await this.createChatUseCase.createMessage(chatId, doctorId!, message, patientId);
             res.status(StatusCode.Created)
         } catch (error: any) {
             next(error);