Merge pull request #104 from BacPacNet/feat-connections-profile

Feat connections profile

src/app/(withLayout)/connections/page.tsx

@@ -1,5 +1,43 @@
-import React from 'react'
+'use client'
+import Card from '@/components/atoms/Card'
+import Tabs from '@/components/molecules/Tabs'
+import FindPeople from '@/components/molecules/Tabs/FindPeople'
+import Followers from '@/components/molecules/Tabs/Followers'
+import Following from '@/components/molecules/Tabs/Following'
+import { useUniStore } from '@/store/store'
+import React, { useMemo, useRef } from 'react'
 
 export default function ConnectionPage() {
-  return <div>ConnectionPage</div>
+  const { userProfileData } = useUniStore()
+
+  const userFollowingIDs = useMemo(() => {
+    return userProfileData?.following?.map((following: { userId: string }) => following.userId)
+  }, [userProfileData])
+
+  const userFollowerIDs = useMemo(() => {
+    return userProfileData?.followers?.map((followers: { userId: string }) => followers.userId)
+  }, [userProfileData])
+
+  const tabs = [
+    {
+      label: 'Find People',
+      content: <FindPeople />,
+    },
+    {
+      label: `Following`,
+      content: <Following userFollowingIDs={userFollowingIDs || []} />,
+    },
+    {
+      label: `Follower`,
+      content: <Followers userFollowingIDs={userFollowingIDs || []} />,
+    },
+  ]
+
+  return (
+    <div className="py-8 h-with-navbar">
+      <Card className="rounded-2xl h-full overflow-hidden px-4">
+        <Tabs tabs={tabs} className={'h-full'} />
+      </Card>
+    </div>
+  )
 }

src/app/(withLayout)/layout.tsx

@@ -51,7 +51,7 @@ const recommendations = [
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex gap-8 bg-surface-primary-50 px-4">
+    <div className="flex gap-8 bg-surface-primary-50 h-with-navbar overflow-auto px-4">
       <div className="w-1/5 hidden lg:block ">
         <div className="fixed w-1/5 left-0 z-10 ">
           <LeftNavbar />

src/app/(withLayout)/profile/[...id]/page.tsx

@@ -0,0 +1,69 @@
+'use client'
+import Spinner from '@/components/atoms/spinner'
+import PostContainer from '@/components/organisms/PostsContainer'
+import { UserProfileCard } from '@/components/organisms/ProfileCard'
+import Modal from '@/components/Timeline/Modal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ProfileCard from '@/components/Timeline/ProfileCard'
+import { Skeleton } from '@/components/ui/Skeleton'
+import { useCheckSelfProfile } from '@/lib/utils'
+import { useGetUserData } from '@/services/user'
+import { PostType } from '@/types/constants'
+import { ModalContentType } from '@/types/global'
+import React, { useState } from 'react'
+
+export default function Profile({ params }: { params: { id: string } }) {
+  const userId = params.id[0]
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const isSelfProfile = useCheckSelfProfile(userId)
+
+  const { data: userProfileData, isLoading: isUserProfileDataLoading } = useGetUserData(userId)
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'EditProfileModal':
+        return <EditProfileModal />
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      default:
+        return null
+    }
+  }
+  const { dob, profile, firstName, lastName, email } = userProfileData || {}
+  const { bio, university_name, followers, following, study_year, major, degree, phone_number, country } = profile || {}
+  return (
+    <div className="h-with-navbar py-4">
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      {isUserProfileDataLoading || !userProfileData ? (
+        <Skeleton className="w-full h-60 bg-slate-300" />
+      ) : (
+        <UserProfileCard
+          name={`${firstName} ${lastName}`}
+          isPremium={true}
+          description={bio || ''}
+          university={university_name || 'Lorem University'}
+          isVerified={true}
+          following={followers?.length || 0}
+          followers={following?.length || 0}
+          year={study_year || ''}
+          degree={degree || ''}
+          major={major || ''}
+          email={email || ''}
+          phone={phone_number || '0000'}
+          location={'Bangalore'}
+          birthday={dob || ''}
+          avatarUrl={profile?.profile_dp?.imageUrl || ''}
+          isVerifiedUniversity={true}
+          country={country || ''}
+          setModalContentType={setModalContentType}
+          setIsModalOpen={setIsModalOpen}
+          isSelfProfile={isSelfProfile}
+        />
+      )}
+      <PostContainer userId={userId} type={PostType.Profile} />
+    </div>
+  )
+}

src/app/(withLayout)/profile/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+import PostContainer from '@/components/organisms/PostsContainer'
+import { UserProfileCard } from '@/components/organisms/ProfileCard'
+import Modal from '@/components/Timeline/Modal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ProfileCard from '@/components/Timeline/ProfileCard'
+import { useUniStore } from '@/store/store'
+import { PostType } from '@/types/constants'
+import { ModalContentType } from '@/types/global'
+import React, { useState } from 'react'
+
+export default function Profile() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [modalContentType, setModalContentType] = useState<ModalContentType>()
+  const { userData, userProfileData } = useUniStore()
+  const modalContent = (modalContentType: string) => {
+    switch (modalContentType) {
+      case 'EditProfileModal':
+        return <EditProfileModal />
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
+      default:
+        return null
+    }
+  }
+  const { bio, university_name, followers, following, study_year, major, phone_number, dob, degree, country } = userProfileData
+  const { firstName, lastName, email } = userData
+  return (
+    <div className="h-with-navbar py-4">
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+        {modalContentType && modalContent(modalContentType)}
+      </Modal>
+      <UserProfileCard
+        name={`${firstName} ${lastName}`}
+        isPremium={true}
+        description={bio || ''}
+        university={university_name || 'Lorem University'}
+        isVerified={true}
+        following={followers?.length || 0}
+        followers={following?.length || 0}
+        year={study_year || ''}
+        degree={degree || ''}
+        major={major || ''}
+        email={email || ''}
+        phone={phone_number || '0000'}
+        location={'Bangalore'}
+        birthday={dob || ''}
+        avatarUrl={userProfileData?.profile_dp?.imageUrl || ''}
+        isVerifiedUniversity={true}
+        country={country || ''}
+        setModalContentType={setModalContentType}
+        setIsModalOpen={setIsModalOpen}
+      />
+      <PostContainer type={PostType.Timeline} />
+    </div>
+  )
+}

src/app/(withLayout)/timeline/page.tsx

@@ -5,9 +5,9 @@ import React from 'react'
 
 export default function Timeline() {
   return (
-    <>
+    <div className="h-with-navbar">
       <UserPostContainer type={PostInputType.Timeline} />
       <PostContainer type={PostType.Timeline} />
-    </>
+    </div>
   )
 }

src/app/post/[id]/page.tsx

@@ -2,7 +2,6 @@
 import PostCard from '@/components/molecules/PostCard'
 
 import Spinner from '@/components/atoms/spinner'
-import useCookie from '@/hooks/useCookie'
 import { useGetPost } from '@/services/community-university'
 import { PostType } from '@/types/constants'
 import { useParams, useSearchParams } from 'next/navigation'
@@ -39,24 +38,24 @@ const SinglePost = () => {
       </div>
     )
   }
-
+  const { _id, user, user_id, profile, content, createdAt, imageUrl, comments, likeCount } = item
   return (
     <div className="w-full   flex justify-center ">
-      <div className="w-10/12 shadow-xl rounded-lg mt-10">
+      <div className="w-1/2 shadow-card rounded-2xl mt-10">
         <PostCard
-          key={item?._id}
-          user={item?.user_id?.firstName + ' ' + item?.user_id?.lastName}
-          adminId={item?.user_id?._id}
-          university={item?.profiles[0]?.university_name}
-          year={item?.profiles[0]?.study_year + ' Yr. ' + ' ' + item?.profiles[0]?.degree}
-          text={item?.content}
-          date={item?.createdAt}
-          avatarLink={item?.profiles[0]?.profile_dp?.imageUrl}
-          commentCount={item?.comments}
-          likes={item?.likeCount}
-          postID={item?._id}
+          key={_id}
+          user={user?.firstName + ' ' + user?.lastName}
+          adminId={user_id}
+          university={profile?.university_name}
+          year={profile?.study_year + ' Yr. ' + ' ' + profile?.degree}
+          text={content}
+          date={createdAt}
+          avatarLink={profile?.profile_dp?.imageUrl}
+          commentCount={comments.length}
+          likes={likeCount}
+          postID={_id}
           type={String(Type) == 'Timeline' ? PostType.Timeline : PostType.Community}
-          images={item?.imageUrl || []}
+          images={imageUrl || []}
           setImageCarasol={setImageCarasol}
           idx={1}
           showCommentSection={showCommentSection}

src/components/Connections/FindPeople.tsx

@@ -7,6 +7,7 @@ import { useGetAllUserWithProfileData, useGetUserFollow, useGetUserFollowers } f
 import UserListItemSkeleton from './UserListItemSkeleton'
 import { useUniStore } from '@/store/store'
 import { FindUsers, FollowingItemProps } from '@/types/constants'
+import { useUsersProfileForConnections } from '@/services/user'
 
 type ContentType = 'Find People' | 'Following' | 'Followers'
 
@@ -71,6 +72,9 @@ const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => {
   const [content, setContent] = useState<ContentType>('Find People')
   const [name, setName] = useState('')
   const { userProfileData } = useUniStore()
+  const [page, setPage] = useState(0)
+  const { data: userProfilesData } = useUsersProfileForConnections(name, page, false)
+
   const userFollowingIDs = userProfileData && userProfileData?.following?.map((following) => following.userId)
   const { data: allUserData, isFetching } = useGetAllUserWithProfileData(name, content == 'Find People')
   const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow(name, content == 'Following')

src/components/Connections/UserListItemSkeleton.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Skeleton } from '../ui/Skeleton'
-const UserListItemSkeleton = () => {
+const UserListItemSkeleton = ({ className }: { className?: string }) => {
   return (
-    <div className=" rounded-lg  ">
+    <div className={`${className} rounded-lg`}>
       <div className="my-2 ml-2  flex gap-8 items-center ">
         <Skeleton className=" bg-slate-400 p-2 h-14 w-14 rounded-full" />
         <div>

src/components/Timeline/Modal.tsx

@@ -35,7 +35,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
     <>
       {showModal && (
         <div className="fixed w-screen inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto bg-[black] bg-opacity-10">
-          <div className="relative xs:max-w-sm sm:max-w-max w-auto mx-auto rounded-xl shadow-lg bg-white p-6 my-5">
+          <div className="relative xs:max-w-sm sm:max-w-max w-auto mx-auto rounded-xl shadow-lg bg-white px-4 my-5">
             <button
               className="absolute top-2 right-2 p-1 bg-transparent border-0 text-gray-600 text-lg font-bold leading-none outline-none focus:outline-none"
               onClick={handleClose}