Merge pull request #92 from BacPacNet/fix-routes-layout

fix: routes and layout
BacPacNet · Sep 30, 2024 · e23b9ed · e23b9ed
2 parents d4dc422 + 78be927
commit e23b9ed
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 199 deletions.
diff --git a/src/app/(withLayout)/connections/page.tsx b/src/app/(withLayout)/connections/page.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function ConnectionPage() {
+  return <div>ConnectionPage</div>
+}
diff --git a/src/app/(withLayout)/layout.tsx b/src/app/(withLayout)/layout.tsx
@@ -0,0 +1,14 @@
+import LeftNavbar from '@/components/organisms/LeftNavbar'
+import React, { useState } from 'react'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen gap-8 py-8">
+      <div className="w-1/5 hidden md:block">
+        <LeftNavbar />
+      </div>
+      <div className="w-3/5">{children}</div>
+      <div className="w-1/5 rounded-2xl shadow-2xl bg-white hidden lg:block"></div>
+    </div>
+  )
+}
diff --git a/src/app/messages/page.tsx → src/app/(withLayout)/messages/page.tsx b/src/app/messages/page.tsx → src/app/(withLayout)/messages/page.tsx
diff --git a/src/app/(withLayout)/notifications/page.tsx b/src/app/(withLayout)/notifications/page.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function NotificationsPage() {
+  return <div>NotificationsPage</div>
+}
diff --git a/src/app/(withLayout)/timeline/page.tsx b/src/app/(withLayout)/timeline/page.tsx
@@ -0,0 +1,13 @@
+import PostContainer from '@/components/organisms/PostsContainer'
+import UserPostContainer from '@/components/organisms/UserPostContainer'
+import { PostInputType } from '@/types/constants'
+import React from 'react'
+
+export default function Timeline() {
+  return (
+    <>
+      <UserPostContainer type={PostInputType.Timeline} />
+      <PostContainer />
+    </>
+  )
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -57,9 +57,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className="bg-surface-primary-50">
         <ReactQueryClientProvider>
           <ZustandSocketProvider>
-            {/*<Navbar />*/}
             <LogoNavbar />
-            <SecondaryNavbar />
             {children}
           </ZustandSocketProvider>
         </ReactQueryClientProvider>

diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
diff --git a/src/components/molecules/LeftNavWrapper/index.tsx b/src/components/molecules/LeftNavWrapper/index.tsx
@@ -11,18 +11,16 @@ interface WrapperProps {
 }
 
 const LeftNavWrapper: React.FC<WrapperProps> = ({ children }) => {
-  const [currSelectedGroup, setCurrSelectedGroup] = useState(null)
-
   return (
-    <div className="flex h-screen gap-8 py-8 px-4">
+    <div className="flex h-screen gap-8 py-8">
       <div className="w-1/5 hidden md:block">
-        <LeftNavbar setCurrSelectedGroup={setCurrSelectedGroup} currSelectedGroup={currSelectedGroup} />
+        <LeftNavbar />
       </div>
       <div className="w-3/5">
         {' '}
         {React.Children.map(children, (child) => {
           if (React.isValidElement<ChildComponentProps>(child)) {
-            return React.cloneElement(child, { currSelectedGroup })
+            return React.cloneElement(child)
           }
           return child
         })}

diff --git a/src/components/molecules/NavbarUniversityItem/index.tsx b/src/components/molecules/NavbarUniversityItem/index.tsx
@@ -1,11 +1,12 @@
 import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton'
 import { useGetUserSubscribedCommunityGroups } from '@/services/university-community'
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import React, { useState } from 'react'
 
 export default function NavbarUniversityItem() {
   const { data: SubscribedData, isFetching, isLoading } = useGetUserSubscribedCommunityGroups()
-  const [selectUniversity, setSelectUniversity] = useState(0)
+  const [selectUniversity, setSelectUniversity] = useState(-1)
   const router = useRouter()
 
   const handleUniversityClick = (index: React.SetStateAction<number>) => {
@@ -27,7 +28,13 @@ export default function NavbarUniversityItem() {
             onClick={() => handleUniversityClick(index)}
             className={`${index === selectUniversity && 'bg-[#F3F2FF]'} flex items-center gap-3 py-2 px-4 cursor-pointer`}
           >
-            <img className="w-[40px] h-[40px] object-cover rounded-full" src={community.communityLogoUrl.imageUrl} alt={community.name} />
+            <Image
+              width={40}
+              height={40}
+              className="w-[40px] h-[40px] object-cover rounded-full"
+              src={community.communityLogoUrl.imageUrl}
+              alt={community.name}
+            />
 
             <p className="text-sm font-bold">{community.name}</p>
           </div>

diff --git a/src/components/organisms/LeftNavbar/index.tsx b/src/components/organisms/LeftNavbar/index.tsx
@@ -1,9 +1,7 @@
 'use client'
 import Card from '@/components/atoms/Card'
-import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import avatar from '@assets/avatar.svg'
-import Text from '@/components/atoms/Text'
 import SubText from '@/components/atoms/SubText'
 import { HiHome } from 'react-icons/hi'
 import { IoMdPeople } from 'react-icons/io'
@@ -15,32 +13,38 @@ import NavbarUniversityItem from '@/components/molecules/NavbarUniversityItem'
 import { FiFilter } from 'react-icons/fi'
 import Tabs from '@/components/molecules/Tabs'
 import { useGetCommunityGroups } from '@/services/community-university'
-import { useParams } from 'next/navigation'
+import { useParams, usePathname, useRouter } from 'next/navigation'
 import GroupSelectors from '@/components/communityUniversity/GroupSelectors'
+import { useUniStore } from '@/store/store'
+import Image from 'next/image'
+import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton'
+
+export default function LeftNavbar() {
+  const [currSelectedGroup, setCurrSelectedGroup] = useState(null)
 
-export default function LeftNavbar({ setCurrSelectedGroup, currSelectedGroup }: any) {
   const { id }: any = useParams()
-  // console.log('param', id)
+  const pathname = usePathname()
+  const router = useRouter()
+  const { userData, userProfileData } = useUniStore()
 
   const { data: communityGroups } = useGetCommunityGroups(id, true)
   useEffect(() => {
     setCurrSelectedGroup(communityGroups?.groups[0])
   }, [communityGroups])
 
   const menuItems = [
-    { name: 'Home', icon: <HiHome /> },
-    { name: 'Connections', icon: <IoMdPeople /> },
-    { name: 'Message', icon: <BiSolidMessageDots /> },
-    { name: 'Notification', icon: <FaBell /> },
-    { name: 'AI Assistant', icon: <PiFinnTheHumanFill /> },
+    { name: 'Home', icon: <HiHome />, path: '/timeline' },
+    { name: 'Connections', icon: <IoMdPeople />, path: '/connections' },
+    { name: 'Message', icon: <BiSolidMessageDots />, path: '/messages' },
+    { name: 'Notification', icon: <FaBell />, path: '/notifications' },
+    { name: 'AI Assistant', icon: <PiFinnTheHumanFill />, path: '/ai-assistant' },
   ]
 
-  const [activeMenu, setActiveMenu] = useState(menuItems[0].name)
-
-  const handleMenuClick = (name: React.SetStateAction<string>) => {
-    console.log('name', name)
+  const [activeMenu, setActiveMenu] = useState(pathname)
 
-    setActiveMenu(name)
+  const handleMenuClick = (item: { name: string; icon?: React.JSX.Element; path: string }) => {
+    setActiveMenu(item.path)
+    router.push(item.path)
   }
 
   const tabData = [
@@ -63,28 +67,44 @@ export default function LeftNavbar({ setCurrSelectedGroup, currSelectedGroup }:
       content: <div>This is the content of Tab 3.</div>,
     },
   ]
+  console.log(userProfileData.cover_dp)
+  const renderProfile = () => {
+    if (userProfileData.cover_dp?.imageUrl) {
+      return (
+        <Image
+          width={40}
+          height={40}
+          objectFit="cover"
+          className="w-[40px] h-[40px] rounded-full"
+          src={userProfileData.cover_dp?.imageUrl || avatar}
+          alt="profile.png"
+        />
+      )
+    }
+    return <UserListItemSkeleton />
+  }
   return (
-    <div>
-      <Card className="rounded-2xl">
+    <div className="">
+      <Card className="rounded-2xl h-screen overflow-y-auto ">
         <div className="px-4 flex gap-4">
+          {renderProfile()}
           <div>
-            <Image width={60} height={60} src={avatar} alt="avatar.png" />
-          </div>
-          <div>
-            <p className="text-sm text-neutral-700">Anonymous</p>
+            <p className="text-sm text-neutral-700">
+              {userData.firstName} {userData.lastName}
+            </p>
             <SubText>University Details</SubText>
             <SubText>Degree Details</SubText>
           </div>
         </div>
-        <div className="px-4 pt-9">
+        <div className="px-4 pt-9 ">
           <p className="text-2xs text-neutral-500 font-bold">EXPLORE</p>
           {menuItems.map((item, index) => (
             <div
               key={index}
               className={`flex gap-2 cursor-pointer text-sm pt-[10px] ${
-                activeMenu === item.name ? 'text-[#3A169C] font-semibold' : 'text-neutral-500'
+                activeMenu === item.path ? 'text-[#3A169C] font-semibold' : 'text-neutral-500'
               }`}
-              onClick={() => handleMenuClick(item.name)}
+              onClick={() => handleMenuClick(item)}
             >
               <span className="text-[20px]">{item.icon}</span>
               <span className="">{item.name}</span>
@@ -94,12 +114,6 @@ export default function LeftNavbar({ setCurrSelectedGroup, currSelectedGroup }:
         <p className=" px-4 pb-4 pt-9 text-neutral-500 text-2xs font-bold">UNIVERSITIES</p>
         <NavbarUniversityItem />
 
-        {/*<div className="bg-[#F3F2FF] flex items-center gap-3 py-2 px-4">
-        <div className="flex items-center justify-center bg-white rounded-full w-[40px] h-[40px]">
-          <PiFilesFill className="text-[#3A169C] text-[20px]" />
-        </div>
-        <p className="text-sm font-bold">Lorem University</p>
-      </div>*/}
         <p className="px-4 pb-4 pt-9 text-neutral-500 text-2xs font-bold">UNIVERSITY GROUPS</p>
         <div className="flex items-center justify-center gap-6 py-2">
           <div className="flex items-center justify-center bg-white rounded-full gap-3 ">