Merge pull request #77 from BacPacNet/userProfile-connection

User profile connection
BacPacNet · Jul 20, 2024 · f874e89 · f874e89
2 parents 273746a + 0f9f5aa
commit f874e89
Show file tree

Hide file tree

Showing 18 changed files with 551 additions and 150 deletions.
diff --git a/src/app/[id]/page.tsx b/src/app/[id]/page.tsx
@@ -8,16 +8,19 @@ import CommunityProfileContainer from '@/components/communityProfile/CommunityPr
 import { ModalContentType } from '@/types/global'
 import React, { useState } from 'react'
 import { useUniStore } from '@/store/store'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
 
 const Profile = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
-  const { userData, userProfileData, userFollowingData } = useUniStore()
+  const { userData, userProfileData } = useUniStore()
 
   const modalContent = (modalContentType: string) => {
     switch (modalContentType) {
       case 'EditProfileModal':
         return <EditProfileModal />
+      case 'ConnectionsModal':
+        return <ConnectionsModal />
       default:
         return null
     }
@@ -35,8 +38,8 @@ const Profile = () => {
           setModalContentType={setModalContentType}
           setIsModalOpen={setIsModalOpen}
           isUserProfile={true}
-          following={userFollowingData?.followingCount}
-          followers={userFollowingData?.followerCount}
+          following={userProfileData?.following?.length}
+          followers={userProfileData?.followers?.length}
         />
         <CommunityProfileContainer />
       </div>

diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
@@ -69,7 +69,6 @@ const Page = () => {
       findGroupRole(userData.userUnVerifiedCommunities)
     }
   }, [currSelectedGroup, userData])
-  // console.log('role', currUserGroupRole, userData)
   return (
     <>
       <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>

diff --git a/src/app/timeline/page.tsx b/src/app/timeline/page.tsx
@@ -69,7 +69,7 @@ const recommendations = [
 
 const Timeline = () => {
   const [isModalOpen, setIsModalOpen] = useState(false)
-  const { userData, userProfileData, userFollowingData } = useUniStore()
+  const { userData, userProfileData } = useUniStore()
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
   const { isLoading, data: TimelinePosts, error } = useGetUserPosts()
   const timelinePosts = TimelinePosts?.timelinePosts
@@ -136,8 +136,8 @@ const Timeline = () => {
             setModalContentType={setModalContentType}
             setIsModalOpen={setIsModalOpen}
             isUserProfile={true}
-            following={userFollowingData?.followingCount}
-            followers={userFollowingData?.followerCount}
+            following={userProfileData?.following?.length}
+            followers={userProfileData?.followers?.length}
           />
           <Recommendations people={recommendations} />
         </div>

diff --git a/src/components/Connections/FindPeople.tsx b/src/components/Connections/FindPeople.tsx
@@ -3,57 +3,10 @@ import React, { useState } from 'react'
 import UserListItem from '../Timeline/UserListItem'
 import { GoSearch } from 'react-icons/go'
 import { cn } from '@/lib/utils'
-// Sample data
-const followingData = [
-  {
-    name: 'Roberta Green',
-    university: 'Nagoya University',
-    role: '2nd Yr. Undergraduate, Psychology',
-    tags: [
-      { label: '2nd Yr', color: 'bg-purple-500' },
-      { label: 'Undergraduate', color: 'bg-green' },
-      { label: 'Law', color: 'bg-red-500' },
-    ],
-  },
-  {
-    name: 'Jonathan Park',
-    university: 'Nagoya University',
-    role: '2nd Yr. Undergraduate, Law',
-    tags: [
-      { label: '2nd Yr', color: 'bg-purple-500' },
-      { label: 'Undergraduate', color: 'bg-green' },
-      { label: 'Law', color: 'bg-red-500' },
-    ],
-  },
-  {
-    name: 'Pathova Siena',
-    university: 'Nagoya University',
-    role: '4th Year PhD Lab of Semiconductors',
-    tags: [
-      { label: '4th Yr', color: 'bg-purple-500' },
-      { label: 'PhD', color: 'bg-green' },
-      { label: 'Physics', color: 'bg-cyan-500' },
-    ],
-  },
-  {
-    name: 'Danny Tela',
-    university: 'Nagoya University',
-    role: 'Assistant Professor of Molecular Neuroscience',
-    tags: [
-      { label: 'Assistant Professor', color: 'bg-purple-700' },
-      { label: 'Molecular Neuroscience', color: 'bg-red-500' },
-    ],
-  },
-  {
-    name: 'Gretha Bassuk',
-    university: 'Nagoya University',
-    role: 'Professor',
-    tags: [
-      { label: 'Professor', color: 'bg-blue-500' },
-      { label: 'Philosopy', color: 'bg-red-500' },
-    ],
-  },
-]
+import { useGetAllUserWithProfileData, useGetUserFollow, useGetUserFollowers } from '@/services/connection'
+import UserListItemSkeleton from './UserListItemSkeleton'
+import { useUniStore } from '@/store/store'
+import { FindUsers, FollowingItemProps } from '@/types/constants'
 
 type ContentType = 'Find People' | 'Following' | 'Followers'
 
@@ -115,7 +68,13 @@ const TabButton: React.FC<TabButtonProps> = ({ label, isActive, onClick }) => (
 )
 
 const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => {
-  const [content, setContent] = useState<ContentType>('Following')
+  const [content, setContent] = useState<ContentType>('Find People')
+  const [name, setName] = useState('')
+  const { userProfileData } = useUniStore()
+  const userFollowingIDs = userProfileData.following.map((following) => following.userId)
+  const { data: allUserData, isFetching } = useGetAllUserWithProfileData(name, content == 'Find People')
+  const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow(name, content == 'Following')
+  const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers(name, content == 'Followers')
 
   return (
     <div className="border border-border rounded-lg py-4 px-0 md:px-6">
@@ -135,13 +94,98 @@ const FindPeople = ({ contentDivStyle }: { contentDivStyle?: string }) => {
         </div>
         <div className="mx-3 px-5 py-[10px] border border-border rounded-full flex items-center gap-4">
           <GoSearch size={24} />
-          <input type="text" className="text-sm" placeholder="Search People" />
+          <input
+            onChange={(e) => setName(e.target.value)}
+            type="text"
+            value={name}
+            className="text-sm w-full outline-none"
+            placeholder="Search People"
+          />
         </div>
       </div>
       <div className={cn('mx-auto bg-white rounded-lg overflow-hidden overflow-y-auto custom-scrollbar', contentDivStyle)}>
-        {content === 'Following' && followingData.map((item, index) => <UserListItem key={index} {...item} />)}
+        {content === 'Following' && isFollowingLoading ? (
+          <>
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+          </>
+        ) : content === 'Following' && !userFollow?.profile?.length ? (
+          <p className="text-center p-4">You are not Following anyone.</p>
+        ) : (
+          content === 'Following' &&
+          userFollow?.profile?.map((item: FollowingItemProps) => (
+            <UserListItem
+              key={item?.users_id?.id}
+              id={item?.users_id?.id}
+              firstName={item?.users_id?.firstName}
+              lastName={item?.users_id?.lastName}
+              university={item?.university}
+              study_year={item?.study_year}
+              degree={item?.degree}
+              major={item?.major}
+              occupation={item?.occupation}
+              imageUrl={item?.profile_dp?.imageUrl}
+              type={content}
+              userFollowingIDs={userFollowingIDs}
+            />
+          ))
+        )}
+        {content === 'Followers' && isFollowersLoading ? (
+          <>
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+          </>
+        ) : content === 'Followers' && !userFollow?.profile?.length ? (
+          <p className="text-center p-4">You have 0 Followers</p>
+        ) : (
+          content === 'Followers' &&
+          userFollowers?.profile?.map((item: FollowingItemProps, index: number) => (
+            <UserListItem
+              key={index}
+              id={item?.users_id?.id}
+              firstName={item?.users_id?.firstName}
+              lastName={item?.users_id?.lastName}
+              university={item?.university}
+              study_year={item?.study_year}
+              degree={item?.degree}
+              major={item?.major}
+              occupation={item?.occupation}
+              imageUrl={item?.profile_dp?.imageUrl}
+              type={content}
+              userFollowingIDs={userFollowingIDs}
+            />
+          ))
+        )}
         {/* For testing Purposes */}
-        {content === 'Find People' && followingData.map((item, index) => <UserListItem key={index} {...item} />)}
+        {content === 'Find People' && isFetching ? (
+          <>
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+            <UserListItemSkeleton />
+          </>
+        ) : content === 'Find People' && !allUserData?.user?.length ? (
+          <p className="text-center p-4">No data!</p>
+        ) : (
+          content === 'Find People' &&
+          allUserData?.user?.map((item: FindUsers, index: number) => (
+            <UserListItem
+              key={index}
+              id={item?._id}
+              firstName={item?.firstName}
+              lastName={item?.lastName}
+              university={item?.profile?.university}
+              study_year={item?.profile?.study_year}
+              degree={item?.profile?.degree}
+              major={item?.profile?.major}
+              occupation={item?.profile?.occupation}
+              imageUrl={item?.profile?.profile_dp?.imageUrl}
+              type={content}
+              userFollowingIDs={userFollowingIDs}
+            />
+          ))
+        )}
       </div>
     </div>
   )

diff --git a/src/components/Connections/UserListItemSkeleton.tsx b/src/components/Connections/UserListItemSkeleton.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Skeleton } from '../ui/Skeleton'
+const UserListItemSkeleton = () => {
+  return (
+    <div 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>
+          <Skeleton className="bg-slate-300 h-4 w-40" />
+          <Skeleton className="mt-1 bg-slate-300 h-3 w-20" />
+          <Skeleton className="mt-1 bg-slate-300 h-3 w-16" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UserListItemSkeleton
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -25,6 +25,8 @@ import { ButtonPrimary } from '../Buttons/PrimaryButton'
 import InviteNotification from '../Notifiaction/InviteNotification'
 import CommentNotification from '../Notifiaction/CommentNotification'
 import AssignNotification from '../Notifiaction/AssignNotification'
+import UserFollowNotification from '../Notifiaction/UserFollowNotification'
+import { notificationInterface } from '@/types/constants'
 
 interface MenuItem {
   name: string
@@ -90,7 +92,7 @@ const Navbar: React.FC = () => {
           </PopoverTrigger>
           <PopoverContent className="relative right-8 w-72 p-5 border-none shadow-lg bg-white shadow-gray-light z-20 h-96 overflow-y-scroll">
             {notificationData?.length ? (
-              notificationData?.map((item: any) =>
+              notificationData?.map((item: notificationInterface) =>
                 item.type == notificationRoleAccess.GROUP_INVITE ? (
                   <InviteNotification
                     key={item?._id}
@@ -119,6 +121,14 @@ const Navbar: React.FC = () => {
                     message={item?.message}
                     createdAt={item?.createdAt}
                   />
+                ) : item.type == notificationRoleAccess.FOLLOW ? (
+                  <UserFollowNotification
+                    key={item?._id}
+                    id={item?._id}
+                    senderName={item?.sender_id?.firstName}
+                    message={item?.message}
+                    createdAt={item?.createdAt}
+                  />
                 ) : (
                   ''
                 )

diff --git a/src/components/Notifiaction/UserFollowNotification.tsx b/src/components/Notifiaction/UserFollowNotification.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useUpdateIsSeenCommunityGroupNotification } from '@/services/notification'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+type Props = {
+  id: string
+  senderName: string
+  message: string
+  createdAt: string
+}
+
+const UserFollowNotification = ({ id, senderName, message, createdAt }: Props) => {
+  const { mutate: updateIsSeen } = useUpdateIsSeenCommunityGroupNotification()
+
+  const handleIsSeenGroup = (id: string) => {
+    const dataToPush = {
+      id: id,
+    }
+    updateIsSeen(dataToPush)
+  }
+  return (
+    <div key={id} className="bg-slate-50 p-2 border-b border-slate-300">
+      <p className="text-xs">
+        <span className="text-sm font-bold">{senderName}</span> {message}
+      </p>
+      <div className="flex gap-2  justify-between items-end">
+        <p className="text-xs">{dayjs(new Date(createdAt).toString()).fromNow()}</p>
+        <button onClick={() => handleIsSeenGroup(id)} className="bg-slate-200 py-2 px-3 font-bold">
+          Seen
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default UserFollowNotification