From 576abe4b9fe19f06fc65013eb7e222cb7580e5b3 Mon Sep 17 00:00:00 2001
From: vanessa082 <wahvanessa22@gmail.com>
Date: Thu, 2 Jan 2025 19:06:49 +0100
Subject: [PATCH 1/3] building the chat page ui

---
 api/src/main.ts                               |  2 +-
 .../pages/chats/chat-page/chat-page copy.tsx  | 68 +++++++++++++++++++
 .../pages/chats/chat-page/chat-page.tsx       | 64 ++++++++++++++++-
 .../chats-layout/chat-list/chat-list.tsx      |  2 +-
 4 files changed, 131 insertions(+), 5 deletions(-)
 create mode 100644 web/src/core/features/pages/chats/chat-page/chat-page copy.tsx

diff --git a/api/src/main.ts b/api/src/main.ts
index b1aa046..f24cdb3 100644
--- a/api/src/main.ts
+++ b/api/src/main.ts
@@ -3,6 +3,6 @@ import { AppModule } from "./modules/app/app.module";
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
-  await app.listen(process.env.PORT ?? 3001);
+  await app.listen(process.env.PORT ?? 3000);
 }
 bootstrap();
diff --git a/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx b/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx
new file mode 100644
index 0000000..fa582ad
--- /dev/null
+++ b/web/src/core/features/pages/chats/chat-page/chat-page copy.tsx	
@@ -0,0 +1,68 @@
+import { MainTag } from "@/components/atoms";
+import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
+import { MoreVerticalIcon, Phone, PhoneCallIcon, VideoIcon } from "lucide-react";
+import { Input } from "../../../../components/ui/input";
+import { Button } from "../../../../components/ui/button";
+
+interface Props {
+  params: Promise<{ id: string }>;
+}
+
+export default async function ChatPage(props: Props) {
+  const { id } = await props.params;
+
+  return (
+    <MainTag className="w-full flex flex-col justify-between p-4 ">
+      <div className="cursor-pointer flex justify-between items-center  border-b">
+        <div className="flex items-center gap-2">
+          <Avatar className="w-10 h-10 rounded-full">
+            <AvatarImage
+              src="https://github.com/shadcn.png"
+              alt="@shadcn"
+              className="w-10 h-10  rounded-full"
+            />
+            <AvatarFallback>AN</AvatarFallback>
+          </Avatar>
+
+          <div className="flex flex-col leading-tight">
+            <h4 className="font-semibold text-app-text-dark-500">Van</h4>
+            <p className="text-sm text-app-text-dark-300 truncate">
+              <span>Online</span> &minus; <span>Last Seen </span>
+              <span>2:30pm</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 text-app-blue-500">
+          <Phone />
+          <VideoIcon />
+          <MoreVerticalIcon />
+        </div>
+      </div>
+
+      <div className="flex flex-col">
+        {/* Send */}
+        <div className="flex-1">
+          <div className="flex flex-col items-start">
+            <div className="bg-gray-200 text-app-text-dark-500 py-2 px-4 rounded-lg">
+              Hey There!
+            </div>
+            <span className="text-xs text-gray-400">Today, 8.30pm</span>
+          </div>
+
+          {/* Receive */}
+
+          <div className="flex flex-col items-end">
+            <div className="bg-app-blue-500 text-white py-2 px-4 rounded-lg">Hello!</div>
+            <span className="text-xs text-gray-400 mt-1">Today, 8.33pm</span>
+          </div>
+        </div>
+
+        <div className="flex items-center">
+          <Input placeholder="Type your message here..." />
+          <Button>Send</Button>
+        </div>
+      </div>
+    </MainTag>
+  );
+}
diff --git a/web/src/core/features/pages/chats/chat-page/chat-page.tsx b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
index c933d42..2506d5f 100644
--- a/web/src/core/features/pages/chats/chat-page/chat-page.tsx
+++ b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 import type { Chat, Message } from "@/interfaces/chat.types";
 import { MainTag } from "@/components/atoms";
 import { Fetcher } from "@/lib/fetch";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { getInitials, getProfileURLFromInitials } from "@/lib/utils";
 
 interface Props {
   params: Promise<{ id: string }>;
@@ -16,11 +20,65 @@ export default async function ChatPage(props: Props) {
     chat: Chat;
   }>(`/api/chats/${id}`);
 
+  const getPhoto = () => {
+    return chat.profileImg.url || getProfileURLFromInitials(chat.name);
+  };
+
   return (
     <MainTag className="w-full h-[95vh] p-3 overflow-y-auto">
-      Chats Page Loading messages with id: {id}
-      {JSON.stringify(props, null, 4)}
-      <pre>{JSON.stringify(messages, null, 2)}</pre>
+      {/* Chat Header */}
+      <div className="bg-app-blue-500 flex items-center gap-2 p-4">
+        <Avatar>
+          <AvatarImage src={getPhoto()} alt={chat.name} />
+          <AvatarFallback>{getInitials(chat.name)}</AvatarFallback>
+        </Avatar>
+        <div>
+          <h2 className="text-lg font-bold">{chat.name}</h2>
+          <p>Online</p>
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div className="mt-4 space-y-4">
+        {messages.length > 0 ? (
+          messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex ${message.senderId === "user_1"
+                  ? "justify-end"
+                  : "justify-start"
+                }`}
+            >
+              <div
+                className={`max-w-xs px-4 py-2 rounded-lg ${message.senderId === "user_1"
+                    ? "bg-blue-500 text-white"
+                    : "bg-gray-200 text-black"
+                  }`}
+              >
+                <p>{message.textContent}</p>
+                {/* Reactions */}
+                {message.mediaContent.length > 0 && (
+                  <div className="mt-1 flex gap-2">
+                    {message.mediaContent.map((reaction, idx) => (
+                      <span key={idx} className="text-xl">
+                        {reaction}
+                      </span>
+                    ))}
+                  </div>
+                )}
+                {/* Seen Status */}
+                {message.senderId === "user_1" && (
+                  <div className="text-xs text-gray-400 mt-1">
+                    {message.status.value === "SEEN" ? "Seen" : "Sent"}
+                  </div>
+                )}
+              </div>
+            </div>
+          ))
+        ) : (
+          <p>No messages yet...</p>
+        )}
+      </div>
     </MainTag>
   );
 }
diff --git a/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx b/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
index 7d9921e..daf3393 100644
--- a/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
+++ b/web/src/core/features/pages/chats/chats-layout/chat-list/chat-list.tsx
@@ -9,7 +9,7 @@ async function ChatList() {
     <>
       <h2 className="mb-4 font-semibold">Inbox</h2>
 
-      {chats.map((c) => (
+      {chats?.map((c) => (
         <ChatCard key={c.id} chat={c} />
       ))}
     </>

From 14af0f37850b95d2ef0c2d4e2ffbff37e08ff177 Mon Sep 17 00:00:00 2001
From: vanessa082 <wahvanessa22@gmail.com>
Date: Thu, 2 Jan 2025 19:09:04 +0100
Subject: [PATCH 2/3] commmented out the message car

---
 .../pages/chats/chat-page/chat-page.tsx       | 70 ++++++-------------
 1 file changed, 23 insertions(+), 47 deletions(-)

diff --git a/web/src/core/features/pages/chats/chat-page/chat-page.tsx b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
index 2506d5f..e4203d9 100644
--- a/web/src/core/features/pages/chats/chat-page/chat-page.tsx
+++ b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
@@ -1,4 +1,4 @@
-"use client";
+// "use client"
 
 import type { Chat, Message } from "@/interfaces/chat.types";
 import { MainTag } from "@/components/atoms";
@@ -10,6 +10,18 @@ interface Props {
   params: Promise<{ id: string }>;
 }
 
+
+
+// const messageCard = () => {
+//   return (
+//     <div>
+//       <div>
+
+//       </div>
+//     </div>
+//   )
+// }
+
 export default async function ChatPage(props: Props) {
   const { id } = await props.params;
 
@@ -22,63 +34,27 @@ export default async function ChatPage(props: Props) {
 
   const getPhoto = () => {
     return chat.profileImg.url || getProfileURLFromInitials(chat.name);
-  };
+  }
 
   return (
     <MainTag className="w-full h-[95vh] p-3 overflow-y-auto">
-      {/* Chat Header */}
       <div className="bg-app-blue-500 flex items-center gap-2 p-4">
         <Avatar>
           <AvatarImage src={getPhoto()} alt={chat.name} />
-          <AvatarFallback>{getInitials(chat.name)}</AvatarFallback>
+          <AvatarFallback>
+            {getInitials(chat.name)}
+          </AvatarFallback>
         </Avatar>
+        {/* <div className="w-8 h-8 bg-gray-300 rounded-full mr-3"></div> */}
         <div>
           <h2 className="text-lg font-bold">{chat.name}</h2>
-          <p>Online</p>
+          <p className="">{ }</p>
         </div>
       </div>
-
-      {/* Messages */}
-      <div className="mt-4 space-y-4">
-        {messages.length > 0 ? (
-          messages.map((message) => (
-            <div
-              key={message.id}
-              className={`flex ${message.senderId === "user_1"
-                  ? "justify-end"
-                  : "justify-start"
-                }`}
-            >
-              <div
-                className={`max-w-xs px-4 py-2 rounded-lg ${message.senderId === "user_1"
-                    ? "bg-blue-500 text-white"
-                    : "bg-gray-200 text-black"
-                  }`}
-              >
-                <p>{message.textContent}</p>
-                {/* Reactions */}
-                {message.mediaContent.length > 0 && (
-                  <div className="mt-1 flex gap-2">
-                    {message.mediaContent.map((reaction, idx) => (
-                      <span key={idx} className="text-xl">
-                        {reaction}
-                      </span>
-                    ))}
-                  </div>
-                )}
-                {/* Seen Status */}
-                {message.senderId === "user_1" && (
-                  <div className="text-xs text-gray-400 mt-1">
-                    {message.status.value === "SEEN" ? "Seen" : "Sent"}
-                  </div>
-                )}
-              </div>
-            </div>
-          ))
-        ) : (
-          <p>No messages yet...</p>
-        )}
-      </div>
+      {/* 
+      Chats Page Loading messages with id: {id}
+      {JSON.stringify(props, null, 4)}
+      <pre>{JSON.stringify(messages, null, 2)}</pre> */}
     </MainTag>
   );
 }

From 957298673a66f75883dcf28bd748d95f0625f7f7 Mon Sep 17 00:00:00 2001
From: vanessa082 <wahvanessa22@gmail.com>
Date: Fri, 3 Jan 2025 22:31:38 +0100
Subject: [PATCH 3/3] added a console  to read messages since the fetcher is
 unable to fet

---
 web/src/core/features/pages/chats/chat-page/chat-page.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/src/core/features/pages/chats/chat-page/chat-page.tsx b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
index e4203d9..bb752d9 100644
--- a/web/src/core/features/pages/chats/chat-page/chat-page.tsx
+++ b/web/src/core/features/pages/chats/chat-page/chat-page.tsx
@@ -32,6 +32,8 @@ export default async function ChatPage(props: Props) {
     chat: Chat;
   }>(`/api/chats/${id}`);
 
+  console.log(messages, 'yo')
+
   const getPhoto = () => {
     return chat.profileImg.url || getProfileURLFromInitials(chat.name);
   }
@@ -51,10 +53,7 @@ export default async function ChatPage(props: Props) {
           <p className="">{ }</p>
         </div>
       </div>
-      {/* 
-      Chats Page Loading messages with id: {id}
-      {JSON.stringify(props, null, 4)}
-      <pre>{JSON.stringify(messages, null, 2)}</pre> */}
+
     </MainTag>
   );
 }