From de401660aa4a6d18d3da0217d03783ad9fff7313 Mon Sep 17 00:00:00 2001 From: bacpactech Date: Mon, 30 Sep 2024 11:19:11 +0530 Subject: [PATCH 1/2] fix: routes and layout --- src/app/(withLayout)/connections/page.tsx | 5 + src/app/(withLayout)/layout.tsx | 14 ++ src/app/{ => (withLayout)}/messages/page.tsx | 0 src/app/(withLayout)/notifications/page.tsx | 5 + src/app/(withLayout)/timeline/page.tsx | 13 ++ src/app/layout.tsx | 2 - src/app/timeline/page.tsx | 153 ------------------ .../molecules/LeftNavWrapper/index.tsx | 2 +- .../molecules/NavbarUniversityItem/index.tsx | 11 +- src/components/organisms/LeftNavbar/index.tsx | 74 +++++---- .../organisms/PostsContainer/index.tsx | 13 +- 11 files changed, 97 insertions(+), 195 deletions(-) create mode 100644 src/app/(withLayout)/connections/page.tsx create mode 100644 src/app/(withLayout)/layout.tsx rename src/app/{ => (withLayout)}/messages/page.tsx (100%) create mode 100644 src/app/(withLayout)/notifications/page.tsx create mode 100644 src/app/(withLayout)/timeline/page.tsx delete mode 100644 src/app/timeline/page.tsx diff --git a/src/app/(withLayout)/connections/page.tsx b/src/app/(withLayout)/connections/page.tsx new file mode 100644 index 00000000..6ee8060c --- /dev/null +++ b/src/app/(withLayout)/connections/page.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +export default function ConnectionPage() { + return
ConnectionPage
+} diff --git a/src/app/(withLayout)/layout.tsx b/src/app/(withLayout)/layout.tsx new file mode 100644 index 00000000..1b308675 --- /dev/null +++ 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 ( +
+
+ +
+
{children}
+
+
+ ) +} diff --git a/src/app/messages/page.tsx b/src/app/(withLayout)/messages/page.tsx similarity index 100% rename from src/app/messages/page.tsx rename to src/app/(withLayout)/messages/page.tsx diff --git a/src/app/(withLayout)/notifications/page.tsx b/src/app/(withLayout)/notifications/page.tsx new file mode 100644 index 00000000..bf524b1e --- /dev/null +++ b/src/app/(withLayout)/notifications/page.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +export default function NotificationsPage() { + return
NotificationsPage
+} diff --git a/src/app/(withLayout)/timeline/page.tsx b/src/app/(withLayout)/timeline/page.tsx new file mode 100644 index 00000000..46b5476d --- /dev/null +++ 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 ( + <> + + + + ) +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2f3be2f5..1f112182 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -57,9 +57,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - {/**/} - {children} diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx deleted file mode 100644 index b5ffb7c4..00000000 --- a/src/app/timeline/page.tsx +++ /dev/null @@ -1,153 +0,0 @@ -'use client' -import React, { useState } from 'react' -import ProfileCard from '@/components/Timeline/ProfileCard' -import PostInput from '@/components/Timeline/PostInput' -import Dropdown from '@/components/Timeline/DropDown' -import Post from '@/components/Timeline/Post' -import Footer from '@/components/Footer/Footer' -import Modal from '@/components/Timeline/Modal' -import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal' -import PollModal from '@/components/Timeline/Modals/PollModal' -import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal' -import ReplyModal from '@/components/Timeline/Modals/ReplyModal' -import { ModalContentType } from '@/types/global' -import { PostInputType, PostType, singlePostEnum } from '@/types/constants' -import Recommendations from '@/components/Timeline/Recommendations' -import { useUniStore } from '@/store/store' -import { useGetTimelinePosts } from '@/services/community-timeline' -import PostSkeleton from '@/components/Timeline/PostSkeleton' -interface User { - name: string - bio: string - university: string - department: string - location: string - email: string - phone: string - dateOfBirth: string - followers: number - following: number -} -interface Post { - user: User - content: string - dateTime: string - likes: number - comments: Comment[] - reposts: number -} -interface Comment { - user: User - content: string - likes: number -} - -const options = ['Recent', 'Popular', 'Most Liked'] - -const roberta = { - avatarUrl: '/timeline/avatar2.png', - userAvatarUrl: '/timeline/avatar.png', - name: 'Roberta Green', - comment: 'Sorry that was a strange thing to ask.', - replyingTo: 'Johnny Nitro and Kathryn Murphy', -} -const recommendations = [ - { - name: 'Roberta Green', - university: 'Nagoya University', - affilation: '2nd Yr. Undergraduate, Psychology', - avatar: '/timeline/avatar.png', - }, - { - name: 'Roberta Green', - university: 'Nagoya University', - affilation: '2nd Yr. Undergraduate, Psychology', - avatar: '/timeline/avatar2.png', - }, -] - -const Timeline = () => { - const [isModalOpen, setIsModalOpen] = useState(false) - const { userData, userProfileData } = useUniStore() - const [modalContentType, setModalContentType] = useState() - const { isLoading, data: TimelinePosts, error } = useGetTimelinePosts(true) - const timelinePosts = TimelinePosts?.timelinePosts - - const modalContent = (modalContentType: string) => { - switch (modalContentType) { - case 'ConnectionsModal': - return - case 'PollModal': - return - case 'EditProfileModal': - return - case 'ReplyModal': - return - default: - return null - } - } - - const PostsContainer = () => { - if (isLoading) { - return Array.from({ length: 2 }).map((_, index) => ) - } - if (error) { - return
Something Went Wrong!
- } - return timelinePosts?.map((post: any) => { - return ( - - ) - }) - } - - return ( -
- setIsModalOpen(false)}> - {modalContentType && modalContent(modalContentType)} - -
-
- - -
-
- - - -
-
-
-
- ) -} - -export default Timeline diff --git a/src/components/molecules/LeftNavWrapper/index.tsx b/src/components/molecules/LeftNavWrapper/index.tsx index 060f1640..7b84e1ad 100644 --- a/src/components/molecules/LeftNavWrapper/index.tsx +++ b/src/components/molecules/LeftNavWrapper/index.tsx @@ -14,7 +14,7 @@ const LeftNavWrapper: React.FC = ({ children }) => { const [currSelectedGroup, setCurrSelectedGroup] = useState(null) return ( -
+
diff --git a/src/components/molecules/NavbarUniversityItem/index.tsx b/src/components/molecules/NavbarUniversityItem/index.tsx index f58dce64..a8ffc751 100644 --- 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) => { @@ -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`} > - {community.name} + {community.name}

{community.name}

diff --git a/src/components/organisms/LeftNavbar/index.tsx b/src/components/organisms/LeftNavbar/index.tsx index 101da2ba..68fc676f 100644 --- 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,12 +13,19 @@ 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(() => { @@ -28,19 +33,18 @@ export default function LeftNavbar({ setCurrSelectedGroup, currSelectedGroup }: }, [communityGroups]) const menuItems = [ - { name: 'Home', icon: }, - { name: 'Connections', icon: }, - { name: 'Message', icon: }, - { name: 'Notification', icon: }, - { name: 'AI Assistant', icon: }, + { name: 'Home', icon: , path: '/timeline' }, + { name: 'Connections', icon: , path: '/connections' }, + { name: 'Message', icon: , path: '/messages' }, + { name: 'Notification', icon: , path: '/notifications' }, + { name: 'AI Assistant', icon: , path: '/ai-assistant' }, ] - const [activeMenu, setActiveMenu] = useState(menuItems[0].name) - - const handleMenuClick = (name: React.SetStateAction) => { - 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:
This is the content of Tab 3.
, }, ] + console.log(userProfileData.cover_dp) + const renderProfile = () => { + if (userProfileData.cover_dp?.imageUrl) { + return ( + profile.png + ) + } + return + } return ( -
- +
+
+ {renderProfile()}
- avatar.png -
-
-

Anonymous

+

+ {userData.firstName} {userData.lastName} +

University Details Degree Details
-
+

EXPLORE

{menuItems.map((item, index) => (
handleMenuClick(item.name)} + onClick={() => handleMenuClick(item)} > {item.icon} {item.name} @@ -94,12 +114,6 @@ export default function LeftNavbar({ setCurrSelectedGroup, currSelectedGroup }:

UNIVERSITIES

- {/*
-
- -
-

Lorem University

-
*/}

UNIVERSITY GROUPS

diff --git a/src/components/organisms/PostsContainer/index.tsx b/src/components/organisms/PostsContainer/index.tsx index 8542015f..5364aa63 100644 --- a/src/components/organisms/PostsContainer/index.tsx +++ b/src/components/organisms/PostsContainer/index.tsx @@ -32,17 +32,16 @@ interface communityPostType { const PostContainer = ({ currSelectedGroup }: any) => { const pathname = usePathname() - const currentPath = pathname.split('/')[2] const { userData } = useUniStore() - const { isLoading, data: TimelinePosts, error, isFetching } = useGetTimelinePosts(currentPath == 'timeline') + const { isLoading, data: TimelinePosts, error, isFetching } = useGetTimelinePosts(pathname == '/timeline') const timelinePosts = TimelinePosts?.timelinePosts const [isJoinedInGroup, setIsJoinedInGroup] = useState(false) const { data: communityGroupPost, isFetching: communityGroupPostLoading, isError, - } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup, currentPath == 'community') + } = useGetCommunityGroupPost(currSelectedGroup?._id, isJoinedInGroup, pathname == '/community') const [imageCarasol, setImageCarasol] = useState<{ isShow: boolean images: any @@ -62,7 +61,7 @@ const PostContainer = ({ currSelectedGroup }: any) => { }, [userData]) useEffect(() => { - if (currSelectedGroup) { + if (pathname) { const communityGroupId = currSelectedGroup?._id?.toString() if (userVerifiedCommunityGroupIds.includes(communityGroupId) || userUnverifiedVerifiedCommunityGroupIds.includes(communityGroupId)) { setIsJoinedInGroup(true) @@ -73,8 +72,8 @@ const PostContainer = ({ currSelectedGroup }: any) => { }, [currSelectedGroup, userVerifiedCommunityGroupIds, userUnverifiedVerifiedCommunityGroupIds]) const renderPostWithRespectToPathName = () => { - switch (currentPath) { - case 'timeline': + switch (pathname) { + case '/timeline': return timelinePosts?.map((post: communityPostType, idx: number) => ( { idx={idx} /> )) - case 'community': + case '/community': return communityGroupPost?.communityPosts?.map((post: communityPostType, idx: number) => ( Date: Mon, 30 Sep 2024 11:28:15 +0530 Subject: [PATCH 2/2] fix: build --- src/components/molecules/LeftNavWrapper/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/LeftNavWrapper/index.tsx b/src/components/molecules/LeftNavWrapper/index.tsx index 7b84e1ad..49bfbbf4 100644 --- a/src/components/molecules/LeftNavWrapper/index.tsx +++ b/src/components/molecules/LeftNavWrapper/index.tsx @@ -11,18 +11,16 @@ interface WrapperProps { } const LeftNavWrapper: React.FC = ({ children }) => { - const [currSelectedGroup, setCurrSelectedGroup] = useState(null) - return (
- +
{' '} {React.Children.map(children, (child) => { if (React.isValidElement(child)) { - return React.cloneElement(child, { currSelectedGroup }) + return React.cloneElement(child) } return child })}