online status feature

tomyRomero · Dec 6, 2023 · e690211 · e690211
1 parent 9fb74fd
commit e690211
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git a/app/(root)/chat/page.tsx b/app/(root)/chat/page.tsx
@@ -1,5 +1,4 @@
 import Image from "next/image"
-import Link from "next/link";
 import Searchbar from "@/components/shared/Searchbar"
 import { fetchUser, fetchUsers } from "@/lib/actions/user.actions";
 import { currentUser } from "@clerk/nextjs";
@@ -62,7 +61,7 @@ async function Page({
         ): (
           <>
           {chats.map((chat: any) => (
-           <ChatLogs chatRead={chat.read_status} senderID={chat.sender_id} receiverID={chat.receiver_id} chatMessages={chat.messages} receiverPicture={chat.user_image} chatName={chat.user_username} isHome={false}/>
+           <ChatLogs chatRead={chat.read_status} senderID={chat.sender_id} receiverID={chat.receiver_id} chatMessages={chat.messages} receiverPicture={chat.user_image} chatName={chat.user_username} isHome={false} path={'/chat'}/>
           ))}
         </>
       )}

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -10,7 +10,7 @@ import LeftSidebar from "@/components/shared/LeftBar";
 import Bottombar from "@/components/shared/BottomBar";
 import RightBar from "@/components/shared/RightBar";
 import { fetchUser } from "@/lib/actions/user.actions";
-import { getChatsWithUsersByUserId } from "@/lib/actions/chat.actions";
+import { getChatsWithUsersByUserId, updateOnlineStatus } from "@/lib/actions/chat.actions";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -20,19 +20,22 @@ export const metadata: Metadata = {
 };
 
 export default async function RootLayout({
-  children,
+  children
 }: {
   children: React.ReactNode;
 }) {
   const getDbUser = async () => {
     const user = await currentUser();
     if(user)
     {
+      updateOnlineStatus(user.id, true);
       const dbUser = await fetchUser(user.id)
       const chats: any[] = await getChatsWithUsersByUserId(user.id)
       return {dbUser, chats};
     }
   }
+
+
 
   const data :any = await getDbUser();
 
@@ -53,7 +56,7 @@ export default async function RootLayout({
             <section className='main-container'>
               <div className='w-full max-w-4xl'>{children}</div>
             </section>
-            <RightBar chats={data.chats} />
+            <RightBar chats={data.chats}  />
           </main>
           <Bottombar user={data.dbUser} />
         </body>

diff --git a/components/cards/ChatLogs.tsx b/components/cards/ChatLogs.tsx
@@ -4,7 +4,7 @@ import Image from "next/image"
 import { useEffect, useState } from "react";
 import { getImageData } from "@/lib/s3";
 import pusherClient from "@/lib/pusher";
-import { getChatBySenderAndReceiver } from "@/lib/actions/chat.actions";
+import { getChatBySenderAndReceiver, revalData } from "@/lib/actions/chat.actions";
 
 interface Chat {
     chatRead : boolean;
@@ -18,13 +18,14 @@ interface Chat {
     receiverPicture: string;
     chatName: string;
     isHome: boolean;
+    path: string;
 }
 
-const ChatLogs = ({ chatRead, senderID, receiverID, chatMessages, receiverPicture, chatName, isHome} : Chat) => {
+const ChatLogs = ({ chatRead, senderID, receiverID, chatMessages, receiverPicture, chatName, isHome , path} : Chat) => {
    const [chatPicture, setChatPicture] = useState("/assets/imgloader.svg")
    const [isMe, setIsMe] = useState(false);
    const [messages, setMessages] = useState(chatMessages);
-   const [read, setRead] = useState(chatRead)
+   const [read, setRead] = useState(true)
 
    var pusher = pusherClient;
 
@@ -72,8 +73,8 @@ const ChatLogs = ({ chatRead, senderID, receiverID, chatMessages, receiverPictur
       const channel = pusher.subscribe('sparks');
 
       channel.bind('message', (data: any) => {
+        revalData(path)
         // Handle new message received from Pusher
-
         // Update the state with the new message if the sender ID and reciever ID match
 
         console.log("MESSAGE DATA: ", data)
@@ -126,7 +127,7 @@ const ChatLogs = ({ chatRead, senderID, receiverID, chatMessages, receiverPictur
         width={isHome ? 40 : 65}
         height={isHome ? 40 : 65}
         className="rounded-full object-contain"
-        style={{ aspectRatio: '1/1', width: '65px', height: '65px' }}
+        style={{ aspectRatio: '1/1', width: '40px', height: '40px' }}
       />
       {!chatRead && (
         <div className="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></div>

diff --git a/components/forms/Chat.tsx b/components/forms/Chat.tsx
@@ -17,7 +17,7 @@ import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { messageValdiation } from "@/lib/validations/chat";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { markChatAsRead, sendMessage, updateChatForOther, updateOnlineStatus } from "@/lib/actions/chat.actions";
+import { markChatAsRead, revalData, sendMessage, updateChatForOther, updateOnlineStatus } from "@/lib/actions/chat.actions";
 import { usePathname, useRouter } from "next/navigation";
 import { getImageData } from "@/lib/s3";
 import pusherClient from "@/lib/pusher";
@@ -59,7 +59,12 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
         // Handle updating the online status of the user
         // Use the data to update the online status in UI
         console.log('Received updateOnlineStatus event:', data);
-        setActive(true);
+
+        if(receiver === data.userID)
+        {
+          setActive(true);
+        }
+
       });
 
       channel.bind('message', (data: any) => {
@@ -86,7 +91,7 @@ const Chat = ({chatPicture, chatName, chatMessages, userID, receiver , isRead}:
       console.log('Received updateReadStatus event:', data);
 
       // Check if the current user is the sender of the message
- 
+
       if(data.sender === userID && data.receiver === receiver)
       {
         setRead(true);

diff --git a/components/shared/RightBar.tsx b/components/shared/RightBar.tsx
@@ -1,9 +1,11 @@
 "use client"
+
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import ChatLogs from "../cards/ChatLogs";
 
+
 function RightBar({chats} : any)
 {
     const pathname = usePathname();
@@ -40,7 +42,7 @@ function RightBar({chats} : any)
                         key= {chat.receiver_id}
                         className="bg-white rounded-lg hover:bg-cyan-500  mb-4"
                         >
-                        <ChatLogs chatRead={chat.read_status} senderID={chat.sender_id} receiverID={chat.receiver_id} chatMessages={chat.messages} receiverPicture={chat.user_image} chatName={chat.user_username} isHome={true}/>
+                        <ChatLogs chatRead={chat.read_status} senderID={chat.sender_id} receiverID={chat.receiver_id} chatMessages={chat.messages} receiverPicture={chat.user_image} chatName={chat.user_username} isHome={true} path={pathname}/>
                         </div>
                     ))}
                     </>

diff --git a/lib/actions/chat.actions.ts b/lib/actions/chat.actions.ts
@@ -134,7 +134,6 @@ const pusher = new Pusher({
 
       // Close the database connection
       connection.end();
-
       console.log("User Chats with Users: ", results);
       return results;
     } catch (error) {
@@ -220,3 +219,7 @@ export const updateOnlineStatus = (userId: string, isOnline: boolean) => {
     return false;
   }
 };
+
+export const revalData = (path : string)=> {
+  revalidatePath(path)
+}