layout rework

tomyRomero · Dec 27, 2023 · 8d1d127 · 8d1d127
1 parent 0f702eb
commit 8d1d127
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 82 deletions.
diff --git a/app/(root)/activity/page.tsx b/app/(root)/activity/page.tsx
@@ -13,7 +13,6 @@ async function Page() {
   const userInfo = await fetchUser(user.id);
   if (!userInfo?.onboarded) redirect("/onboarding");
 
-  updateOnlineStatus(user.id, true);
   const activity = await fetchLikesAndCommentsByUser(user.id, 5);
 
   function getLastUserId(likes: string) {

diff --git a/app/(root)/chat/[id]/page.tsx b/app/(root)/chat/[id]/page.tsx
@@ -11,8 +11,6 @@ const page = async ({ params }: { params: { id: string } }) => {
 
     const dbUser = await fetchUser(params.id)
 
-    updateOnlineStatus(user.id, true);
-
     //user would then use its ID and the ID of the searchParams to get the chat that belongs to those two
     //Chat data would look a little like this. 
     let chatData = {

diff --git a/app/(root)/chat/page.tsx b/app/(root)/chat/page.tsx
@@ -18,8 +18,6 @@ async function Page({
   const userInfo = await fetchUser(user.id);
   if (!userInfo?.onboarded) redirect("/onboarding");
 
-  updateOnlineStatus(user.id, true);
-
   const result = await fetchUsers({
     userId: user.id,
     searchString: searchParams.q,

diff --git a/app/(root)/create-post/page.tsx b/app/(root)/create-post/page.tsx
@@ -15,7 +15,6 @@ const page = async () => {
   const userInfo = await fetchUser(user.id);
   if (!userInfo?.onboarded) redirect("/onboarding");
 
-  updateOnlineStatus(user.id, true);
 
   return (
     <section>

diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
@@ -27,36 +27,6 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const getDbUser = async () => {
-    const user = await currentUser();
-    if(user)
-    {
-      updateOnlineStatus(user.id, true);
-      const dbUser = await fetchUser(user.id)
-      let chats: any[] = await getChatsWithUsersByUserId(user.id)
-      const sortedChats = chats.sort((chatA, chatB) => {
-        const lastMessageA = chatA.messages[chatA.messages.length - 1];
-        const lastMessageB = chatB.messages[chatB.messages.length - 1];
-
-        const dateA = new Date(lastMessageA.timestamp);
-        const dateB = new Date(lastMessageB.timestamp);
-
-        // Compare the dates (descending order, latest time first)
-        //@ts-ignore
-        return dateB - dateA;
-      });  
-
-      if(sortedChats.length > 1)
-      {
-        chats = sortedChats;
-      }
-      return {dbUser, chats};
-    }
-  }
-
-
-
-  const data :any = await getDbUser();
 
   return (
     <ClerkProvider
@@ -67,15 +37,15 @@ export default async function RootLayout({
       <html lang='en'>
         <body className={inter.className}>
         <AppProvider>
-          <Topbar user={data.dbUser}/>
+          <Topbar />
           <main className='flex flex-row'>
-            <LeftSidebar user={data.dbUser}/>
+            <LeftSidebar />
             <section className='main-container'>
               <div className='w-full max-w-4xl'>{children}</div>
             </section>
-            <RightBar chats={data.chats}  />
+            <RightBar />
           </main>
-          <Bottombar user={data.dbUser} />
+          <Bottombar />
           </AppProvider>
         </body>
       </html>

diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -25,8 +25,6 @@ async function Home({
     searchParams.title ? searchParams.title : ""
   )  
 
-  updateOnlineStatus(user.id, true);
-
   const includesTitle = searchParams.title? true : false
 
  return (

diff --git a/app/(root)/post/[id]/page.tsx b/app/(root)/post/[id]/page.tsx
@@ -17,8 +17,6 @@ async function page({ params }: { params: { id: string } }) {
   const user = await currentUser();
   if (!user) return null;
 
-  updateOnlineStatus(user.id, true);
-
   const userInfo = await fetchUser(user.id);
   if (!userInfo?.onboarded) redirect("/onboarding");
 

diff --git a/app/(root)/profile/[id]/page.tsx b/app/(root)/profile/[id]/page.tsx
@@ -17,7 +17,7 @@ async function Page({ params }: { params: { id: string } }) {
   const userInfo = await fetchUser(params.id);
   if (!userInfo?.onboarded) redirect("/onboarding");
 
-  updateOnlineStatus(user.id, true);
+
 
 
   return (

diff --git a/app/(root)/search/page.tsx b/app/(root)/search/page.tsx
@@ -16,7 +16,6 @@ async function Page({
   const user = await currentUser();
   if (!user) return null;
 
-  updateOnlineStatus(user.id, true);
 
   const userInfo = await fetchUser(user.id);
   if (!userInfo?.onboarded) redirect("/onboarding");

diff --git a/components/shared/BottomBar.tsx b/components/shared/BottomBar.tsx
@@ -8,16 +8,16 @@ import { useState, useEffect } from "react";
 import { useAppContext } from "@/lib/AppContext";
 import { doesPostBelongToUser, fetchLikesAndCommentsByUser } from "@/lib/actions/user.actions";
 
-function Bottombar({user} : any)
+function Bottombar()
 {
     const pathname = usePathname();
     const [activity, setActivity] = useState(false)
 
-    const { pusherChannel, newComment, setNewComment, newLike, setNewLike, setReadActivity, readActivity} = useAppContext();
+    const { userId , setUserId, pusherChannel, newComment, setNewComment, newLike, setNewLike, setReadActivity, readActivity} = useAppContext();
     const channel =  pusherChannel
 
     const getAcivityAtStartUp = async () => {
-      const activity = await fetchLikesAndCommentsByUser(user.id, 5);
+      const activity = await fetchLikesAndCommentsByUser(userId, 5);
 
       // Check if any Activity has read_status === 1
       const hasUnreadPost = activity.some(activity => activity.read_status === 1);
@@ -32,7 +32,7 @@ function Bottombar({user} : any)
 
     useEffect(()=> {
       getAcivityAtStartUp();
-    }, [readActivity, setReadActivity])
+    }, [readActivity, setReadActivity, userId])
 
     useEffect( ()=> {
         try {
@@ -41,7 +41,7 @@ function Bottombar({user} : any)
 
             // Handle new comment received from Pusher
 
-            const myPost = await doesPostBelongToUser(data.postId, user.id)
+            const myPost = await doesPostBelongToUser(data.postId, userId)
 
             if(myPost)
             {
@@ -54,7 +54,7 @@ function Bottombar({user} : any)
           console.error(error);
         }
 
-      }, [newComment, setNewComment])
+      }, [newComment, setNewComment, userId])
 
     useEffect(()=> {
 
@@ -63,15 +63,15 @@ function Bottombar({user} : any)
 
           // Handle new comment received from Pusher
 
-          const myPost = await doesPostBelongToUser(data.postId, user.id)
+          const myPost = await doesPostBelongToUser(data.postId, userId)
 
           if(myPost)
           {
             setActivity(true);
           }
         });
 
-      }, [newLike, setNewLike])
+      }, [newLike, setNewLike, userId])
 
     return(
         <section className="bottombar">
@@ -84,7 +84,7 @@ function Bottombar({user} : any)
                     return(
 
                     <Link 
-                    href={`${link.route === '/profile' ? `/profile/${user.id}` : `${link.route}`}`}
+                    href={`${link.route === '/profile' ? `/profile/${userId}` : `${link.route}`}`}
                     key={link.label}
                     className={`bottombar_link ${ isActive && 'bg-primary-500'}`}
                     >

diff --git a/components/shared/LeftBar.tsx b/components/shared/LeftBar.tsx
@@ -12,14 +12,14 @@ import { getChatBySenderAndReceiver, getChatsWithUsersByUserId } from "@/lib/act
 import pusherClient from "@/lib/pusher";
 import { useAppContext } from "@/lib/AppContext";
 
-function LeftSidebar({user} : any)
+function LeftSidebar()
 {
-
+    const [name, setName] = useState(null);
     const [img, setImg] = useState('/assets/profile.svg');
     const [noti, setNoti] = useState(false);
     const [activity, setActivity] = useState(false);
 
-    const { globalMessages, setGlobalMessages, readMessages, setReadMessages, pusherChannel, newComment, setNewComment, newLike, setNewLike, setReadActivity, readActivity} = useAppContext();
+    const { userId, setUserId, globalMessages, setGlobalMessages, readMessages, setReadMessages, pusherChannel, newComment, setNewComment, newLike, setNewLike, setReadActivity, readActivity} = useAppContext();
 
     const router = useRouter();
     const pathname = usePathname();
@@ -32,7 +32,7 @@ function LeftSidebar({user} : any)
     }
 
     const getNoti = async () => {
-        const userChats = await getChatsWithUsersByUserId(user.id);
+        const userChats = await getChatsWithUsersByUserId(userId);
 
         const readStatusArray = await Promise.all(
           userChats.map(async (chat) => {
@@ -71,7 +71,7 @@ function LeftSidebar({user} : any)
       };
 
     const getAcivityAtStartUp = async () => {
-      const activity = await fetchLikesAndCommentsByUser(user.id, 5);
+      const activity = await fetchLikesAndCommentsByUser(userId, 5);
 
       // Check if any Activity has read_status === 1
       const hasUnreadPost = activity.some(activity => activity.read_status === 1);
@@ -91,7 +91,7 @@ function LeftSidebar({user} : any)
 
           // Handle new comment received from Pusher
 
-          const myPost = await doesPostBelongToUser(data.postId, user.id)
+          const myPost = await doesPostBelongToUser(data.postId, userId)
 
           if(myPost)
           {
@@ -104,37 +104,41 @@ function LeftSidebar({user} : any)
         console.error(error);
       }
 
-    }, [newComment, setNewComment])
+    }, [newComment, setNewComment, userId])
 
     useEffect(()=> {
 
       //Look for Real time updates of Likes
       channel.bind('like', async (data: any) => {
 
-        // Handle new comment received from Pusher
+        // Handle new like received from Pusher
 
-        const myPost = await doesPostBelongToUser(data.postId, user.id)
+        const myPost = await doesPostBelongToUser(data.postId, userId)
 
         if(myPost)
         {
           setActivity(true);
         }
       });
 
-    }, [newLike, setNewLike])
+    }, [newLike, setNewLike, userId])
 
     useEffect( () => {
         const load = async () => {
           try{
-            if(user.image.startsWith('user'))
+            const userDb = await fetchUser(userId);
+            const userImage = userDb.image
+            setName(userDb.name)
+
+            if(userImage.startsWith('user'))
             {
-                const res = await getImageData(user.image);
+                const res = await getImageData(userImage);
                 if(res)
                 {
                 setImg(res);
                 }
             }else{
-                setImg(user.image)
+                setImg(userImage)
             }
           }catch(error)
           {
@@ -144,15 +148,15 @@ function LeftSidebar({user} : any)
 
         load();
 
-      }, [])
+      }, [userId])
 
       useEffect(() => {
         getNoti();
-      }, [noti]);
+      }, [noti, setUserId]);
 
       useEffect(()=> {
         getAcivityAtStartUp();
-      }, [readActivity, setReadActivity])
+      }, [readActivity, setReadActivity, userId])
 
       useEffect(()=> {
         try {
@@ -163,7 +167,7 @@ function LeftSidebar({user} : any)
             console.log(error)
         }
 
-      }, [globalMessages, setGlobalMessages, readMessages, setReadMessages])
+      }, [globalMessages, setGlobalMessages, readMessages, setReadMessages, userId])
 
 
     return(
@@ -175,7 +179,7 @@ function LeftSidebar({user} : any)
                         const isActive = (pathname.includes(link.route) && link.route.length > 1)
                          || pathname === link.route;
 
-                         if(link.route === '/profile') link.route = `${link.route}/${user.id}`
+                         if(link.route === '/profile') link.route = `${link.route}/${userId}`
 
                         return(
                         <Link 
@@ -224,13 +228,13 @@ function LeftSidebar({user} : any)
 
             <div className="flex items-center justify-center p-2 space-x-4 ">
             <Link
-            href={`${bottombarLinks[4].route}/${user.id}`}
+            href={`${bottombarLinks[4].route}/${userId}`}
             key={bottombarLinks[4].label}
             className={`leftsidebar_link hover:bg-primary-500 ${ isActive(bottombarLinks[4]) && 'bg-primary-500'}`}
             >
                 <img src={img} alt="Profile Pic" className="w-12 h-12 rounded-full dark:bg-gray-500" />
                 <div>
-                    <h2 className="text-light-1 max-lg:hidden">{user? user.name: 'Sparkify User'}</h2>
+                    <h2 className="text-light-1 max-lg:hidden">{name ? name: 'Sparkify User'}</h2>
                     <span className="flex items-center space-x-1 max-lg:hidden">
                         <Image 
                         src={bottombarLinks[4].imgURL}