Merge pull request #88 from birongliu/dev

Refactor chat components and update caching strategy
birongliu · Dec 8, 2024 · 8cc6cda · 8cc6cda
2 parents 72d5f99 + 6db6bb5
commit 8cc6cda
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 47 deletions.
diff --git a/backend/database/models/chatRoomModel.js b/backend/database/models/chatRoomModel.js
@@ -2,7 +2,7 @@ import { Schema, model } from "mongoose";
 
 const chatRoomModel = new Schema({
   roomId: String,
-  recipients: [String],
+  recipients: [Object],
   messages: [Object],
   createdAt: { type: Date, default: Date.now() },
 });
@@ -36,7 +36,7 @@ export async function sendMessage(ctx) {
       message: [],
       recipients: [reciver, sender],
     });
-    if (message) chat.messages.push({ message, sender });
+    if (message) chat.messages.push(message);
     await chat.save();
     return chat;
   } 

diff --git a/backend/index.js b/backend/index.js
@@ -70,10 +70,10 @@ io.on("connection", (socket) => {
       console.log("Received message data:", data);
       // Save message to the database
       const newMessage = await sendMessage({
+        message: data.message,
         roomId: data.roomId,
         sender: data.sender,
         reciver: data.reciver,
-        message: data.message,
       });
 
       // Emit the message to all connected clients
@@ -87,7 +87,6 @@ io.on("connection", (socket) => {
     } catch (error) {
       console.error("Error saving or emitting message:", error);
       socket.emit("error", "Failed to send the message.");
-      callback({ status: "error", message: "Failed to send the message." });
     }
   });
 

diff --git a/frontend/src/app/(users)/chat/[id]/page.tsx b/frontend/src/app/(users)/chat/[id]/page.tsx
@@ -1,8 +1,7 @@
 "use client";
-
 import { ContextUser, Room, UserContext } from "@/app/context/getUserContext";
-import { useRouter, useParams } from "next/navigation";
-import { FormEvent, useContext, useEffect, useRef, useState } from "react";
+import { useRouter, useParams, redirect } from "next/navigation";
+import { FormEvent, useContext, useEffect, useState } from "react";
 import { SideBar } from "../page";
 import FriendList from "@/app/ui/chat/FriendList";
 import Image from "next/image";
@@ -20,7 +19,7 @@ export default function Chat() {
   const { id } = useParams();
   const context = useContext(UserContext);
   const socket = useContext(SocketContext);
-  if(!socket || !context) return null;
+  if (!socket || !context) return null;
   const room = context.rooms.find((r) => r.roomId === id);
   return room ? (
     <ChatRoom socket={socket.socket} room={room} context={context} />
@@ -29,28 +28,33 @@ export default function Chat() {
   );
 }
 
-export function ChatRoom({
+function ChatRoom({
   room,
   context,
-  socket
+  socket,
 }: {
   room: Room | undefined;
   context: ContextUser;
-  socket: Socket,
+  socket: Socket;
 }) {
   const [activeRoom, setActiveRoom] = useState("");
-  const [message, setMessage] = useState<Message>({ message: "", sender: "",  image: "" });
-  const [messages, setMessages] = useState<Message[]>(room ? room.messages : []);
-  const messageRef = useRef<HTMLDivElement>(null);
+  const [message, setMessage] = useState<Message>({
+    message: "",
+    sender: "",
+    image: "",
+  });
+  const [messages, setMessages] = useState<Message[]>(
+    room ? room.messages : []
+  );
   const [error, setError] = useState("");
-  const [toggleFriendButton, setToggleFriendButton] = useState(false);
-  const other = room && room.recipients.find((r) => r.username !== context.username);
-
+  const [toggleFriendButton, setToggleFriendButton] = useState(true);
+  const other =
+    room && room.recipients.find((r) => r.username !== context.username);
 
   const handleMessages = (e: FormEvent) => {
     e.preventDefault();
-    console.log("in handle messages")
-    if(message.message.trim() === "") {
+    console.log("in handle messages");
+    if (message.message.trim() === "") {
       setError("Message cannot be empty");
       return;
     }
@@ -63,25 +67,30 @@ export function ChatRoom({
     const constructMessageWithRoom = {
       message: constructMessage,
       roomId: room?.roomId,
-      sender: context,
+      sender: {
+        id: context.id,
+        username: context.username,
+        imageUrl: context.imageUrl,
+      },
       reciver: other,
-    }
-    socket.emit("room message", constructMessageWithRoom)
+    };
+    socket.emit("room message", constructMessageWithRoom);
     setMessages((prevMessages) => [...prevMessages, constructMessage]);
     setMessage({ message: "", sender: "", image: "", id: "" });
+  };
+  const scrollToBottom = (messageRef: HTMLDivElement | null) => {
+    if(messageRef) messageRef.scroll({ top: messageRef.scrollHeight, behavior: "smooth" });
   }
+
   useEffect(() => {
-    if (messageRef.current) {
-      messageRef.current.scroll({ top: messageRef.current.scrollHeight, behavior: "smooth" });
-    }
     const initalize = () => {
-      if(!room) return;
+      if (!room) return;
       const { roomId, messages } = room;
       setActiveRoom(roomId ?? "");
       setToggleFriendButton(true);
       setMessages(messages);
-    }
-    initalize()
+    };
+    initalize();
 
     socket.emit("join room", room && room.roomId);
     socket.on("room message", (message: Message) => {
@@ -90,10 +99,10 @@ export function ChatRoom({
 
     return () => {
       socket.off("room message");
-    }
-  }, [socket, room])
+    };
+  }, [socket, room]);
 
-  const router = useRouter()
+  const router = useRouter();
   return (
     <div className="flex overflow-auto w-full h-full">
       <SideBar
@@ -113,10 +122,8 @@ export function ChatRoom({
             return;
           }
           setActiveRoom(id);
-          console.log("id", id);
-          router.replace(`/chat/${id}`);
-          setActiveRoom(id)
           setToggleFriendButton(true);
+          router.push(`/chat/${id}`, { scroll: false });
         }}
         rooms={context.rooms
           .filter(
@@ -127,7 +134,7 @@ export function ChatRoom({
             let otherUser = value.recipients.find(
               (u) => u.username !== context.username
             );
-            if (!otherUser) otherUser = { id: "", imageUrl: "", username: ""};
+            if (!otherUser) otherUser = { id: "", imageUrl: "", username: "" };
             return {
               roomId: value.roomId,
               id: otherUser.id,
@@ -138,7 +145,7 @@ export function ChatRoom({
       />
       {activeRoom === room?.roomId && (
         <div
-          className={` ${
+          className={`${
             activeRoom === "" ? "hidden" : "block"
           } w-full lg:w-[74%] h-full flex flex-col`}
         >
@@ -193,12 +200,17 @@ export function ChatRoom({
               />
             </div>
           </div>
-          <div ref={messageRef} className="h-[75%] mt-5 relative overflow-auto rounded-xl bg-light-blue flex-col p-5 flex">
+          <div
+            ref={scrollToBottom}
+            className="h-[75%] mt-5 overflow-auto rounded-xl bg-light-blue flex-col p-5 flex"
+          >
             {messages.map((message) => (
               <div
                 key={message.id}
                 className={`flex mt-2 w-full items-center ${
-                 message.sender === context.username ? "justify-end" : "justify-start"
+                  message.sender === context.username
+                    ? "justify-end"
+                    : "justify-start"
                 } gap-2`}
               >
                 <Image
@@ -207,7 +219,9 @@ export function ChatRoom({
                   width={200}
                   height={200}
                   className={`w-12 h-12 bg-black  rounded-full ${
-                   message.sender === context.username ? "order-1" : "order-none"
+                    message.sender === context.username
+                      ? "order-1"
+                      : "order-none"
                   }`}
                 />
                 <p className="bg-light-rose p-2 rounded-xl">
@@ -223,12 +237,16 @@ export function ChatRoom({
               id="message"
               value={message.message}
               onChange={(e) => {
-                if(error) setError("");
-                console.log("message", e.target.value);
-                setMessage({ id: message.id, message: e.target.value, sender: context.username, image: context.imageUrl })
+                if (error) setError("");
+                setMessage({
+                  id: message.id,
+                  message: e.target.value,
+                  sender: context.username,
+                  image: context.imageUrl,
+                });
               }}
               className="w-full h-12 resize-none p-2 rounded-xl border-2 outline-none focus:ring-2 focus:ring-light-rose"
-              placeholder="Type your friend id"
+              placeholder={`Message ${other?.username}`}
             />
           </form>
         </div>

diff --git a/frontend/src/app/(users)/chat/page.tsx b/frontend/src/app/(users)/chat/page.tsx
@@ -103,6 +103,7 @@ export function SideBar({
                     <h1 className="font-poppins text-xl text-bold">
                       {friend.username ?? ""}
                     </h1>
+
                   </li>
                 </button>
               </div>

diff --git a/frontend/src/app/actions/deleteRoom-action.ts b/frontend/src/app/actions/deleteRoom-action.ts
@@ -0,0 +1,18 @@
+'use server';
+
+import { revalidateTag } from "next/cache";
+
+export default async function deleteRoomAction(id: string) {
+    console.log("in delete room action")
+    const url = `${process.env.NEXT_PUBLIC_API_URL}/api/rooms/${id}`
+    const response = await fetch(url, {
+        method: "DELETE",
+        next: { tags: ["delete-rooms"] },
+        headers: {
+            "Content-Type": "application/json"
+        }
+    })
+    const data = await response.json()
+    revalidateTag("rooms")
+    return data.acknowledged
+}
diff --git a/frontend/src/app/actions/getUserFriend-action.ts b/frontend/src/app/actions/getUserFriend-action.ts
@@ -0,0 +1,16 @@
+'use server';
+export default async function getUserFriend(username: string) {
+  const fetchFriend = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/users/${username}/friends`,
+    {
+      method: "GET",
+      cache: "force-cache",
+      next: { tags: ["friends"] },
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+
+  return fetchFriend;
+}
diff --git a/frontend/src/app/actions/getUserRoom-action.ts b/frontend/src/app/actions/getUserRoom-action.ts
@@ -0,0 +1,17 @@
+'use server';
+
+export async function getUserRoom(id: string) {
+  const fetchRoom = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/rooms/${id}`,
+    {
+      method: "GET",
+      next: { tags: ["rooms"] },
+      cache: "force-cache",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+  return fetchRoom;
+}
+
diff --git a/frontend/src/app/context/QueryProvider.tsx b/frontend/src/app/context/QueryProvider.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
+
+export const ReactQueryClientProvider = ({ children }: { children: React.ReactNode }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      })
+  )
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}
diff --git a/frontend/src/app/context/getUserContext.tsx b/frontend/src/app/context/getUserContext.tsx
@@ -44,7 +44,7 @@ export const UserContextProvider: React.FC<UserContextProviderProps> = ({
           `${process.env.NEXT_PUBLIC_API_URL}/api/rooms/${user.id}`,
           {
             method: "GET",
-            cache: "reload",
+            cache: "force-cache",
             headers: {
               "Content-Type": "application/json",
             },
@@ -54,7 +54,8 @@ export const UserContextProvider: React.FC<UserContextProviderProps> = ({
           `${process.env.NEXT_PUBLIC_API_URL}/api/users/${user.username}/friends`,
           {
             method: "GET",
-            cache: "reload",
+            cache: "force-cache",
+
             headers: {
               "Content-Type": "application/json",
             },

diff --git a/frontend/src/app/ui/chat/AddTalk.tsx b/frontend/src/app/ui/chat/AddTalk.tsx
@@ -56,10 +56,9 @@ export function AddMessagePopup({ username, addFriend }: { username: string, add
       </button>
 
       {isOpen && (
-        <div className="fixed inset-0 z-50  bg-black bg-opacity-50 z-100 flex items-center justify-center">
+        <div className="fixed inset-0 z-50 bg-black bg-opacity-50  flex items-center justify-center">
           <div className="bg-white rounded-lg p-8 max-w-md w-full">
             <h2 className="text-2xl font-bold mb-4">Add by username</h2>
-
             <form onSubmit={handleSubmit}>
               <div className="mb-4">
                 <label
-Original file line number
+Diff line change
@@ Expand Up / @@ -103,6 +103,7 @@ export function SideBar({ @@
                         <h1 className="font-poppins text-xl text-bold">
                           {friend.username ?? ""}
                         </h1>
                       </li>
                     </button>
                   </div>
@@ Expand Down @@