follow following connection modal

BacPacNet · Dec 17, 2024 · 405d9f0 · 405d9f0
1 parent 9ab8284
commit 405d9f0
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 237 deletions.
diff --git a/src/app/(withLayout)/profile/[...id]/page.tsx b/src/app/(withLayout)/profile/[...id]/page.tsx
@@ -16,7 +16,6 @@ export default function Profile({ params }: { params: { id: string } }) {
   const [modalContentType, setModalContentType] = useState<ModalContentType>()
   const isSelfProfile = useCheckSelfProfile(userId)
   const containerRef = useRef<HTMLDivElement>(null)
-
   const { data: userProfileData, isLoading: isUserProfileDataLoading } = useGetUserData(userId)
 
   const handleShowModal = (modalType: string) => {
@@ -25,7 +24,7 @@ export default function Profile({ params }: { params: { id: string } }) {
         case 'EditProfileModal':
           return openModal(<EditProfileModal />)
         case 'ConnectionsModal':
-          return openModal(<ConnectionsModal />)
+          return openModal(<ConnectionsModal userId={userId} />)
         default:
           return null
       }

diff --git a/src/components/Connections/FindPeople.tsx b/src/components/Connections/FindPeople.tsx
diff --git a/src/components/Timeline/Modals/ConnectionsModal.tsx b/src/components/Timeline/Modals/ConnectionsModal.tsx
@@ -6,19 +6,21 @@ import { useGetUserFollow, useGetUserFollowers } from '@/services/connection'
 import { useUniStore } from '@/store/store'
 import UserListItemSkeleton from '@/components/Connections/UserListItemSkeleton'
 import { FollowingItemProps } from '@/types/constants'
+import { useGetUserData } from '@/services/user'
 
 type props = {
   isChat?: boolean
   setIsCreateGroupModalOpen?: (value: boolean) => void
   setIsModalOpen?: (value: boolean) => void
+  userId?: string
 }
-const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen }: props) => {
+const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen, userId }: props) => {
+  console.log(userId, 'userId')
   const [content, setContent] = useState<'Following' | 'Followers'>('Following')
   const { userProfileData } = useUniStore()
   const userFollowingIDs = userProfileData && userProfileData?.following?.map((following) => following.userId)
-  const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow('', content == 'Following')
-  const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers('', content == 'Followers')
-
+  const { data: userFollow, isFetching: isFollowingLoading } = useGetUserFollow('', content == 'Following', userId || '')
+  const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers('', content == 'Followers', userId || '')
   return (
     <div>
       <div className="flex items-center justify-start cursor-pointer">
@@ -44,7 +46,7 @@ const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen }:
           </p>
         )}
       </div>
-      <div className="mx-auto min-w-[300px] bg-white rounded-lg shadow-md overflow-hidden overflow-y-auto ">
+      <div className="mx-auto min-w-[300px] bg-white rounded-lg overflow-hidden overflow-y-auto ">
         {content === 'Following' && isFollowingLoading ? (
           <>
             <UserListItemSkeleton />
@@ -70,6 +72,7 @@ const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen }:
               type={content}
               userFollowingIDs={userFollowingIDs || []}
               isChat={isChat}
+              isSelfProfile={userProfileData?.users_id === item?.users_id?.id}
             />
           ))
         )}
@@ -79,7 +82,7 @@ const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen }:
             <UserListItemSkeleton />
             <UserListItemSkeleton />
           </>
-        ) : content === 'Followers' && !userFollow?.profile?.length ? (
+        ) : content === 'Followers' && !userFollowers?.profile?.length ? (
           <p className="text-center p-4">You have 0 Followers</p>
         ) : (
           content === 'Followers' &&
@@ -98,6 +101,7 @@ const ConnectionsModal = ({ isChat, setIsCreateGroupModalOpen, setIsModalOpen }:
               type={content}
               userFollowingIDs={userFollowingIDs || []}
               isChat={isChat}
+              isSelfProfile={userProfileData?.users_id === item?.users_id?.id}
             />
           ))
         )}

diff --git a/src/components/Timeline/UserListItem.tsx b/src/components/Timeline/UserListItem.tsx
@@ -17,6 +17,7 @@ interface FollowingItemProps {
   type: string
   userFollowingIDs: string[]
   isChat?: boolean
+  isSelfProfile?: boolean
 }
 
 const UserListItem: React.FC<FollowingItemProps> = ({
@@ -32,6 +33,7 @@ const UserListItem: React.FC<FollowingItemProps> = ({
   imageUrl,
   userFollowingIDs,
   isChat,
+  isSelfProfile,
 }) => {
   const { mutate: toggleFollow } = useToggleFollow(type)
   const router = useRouter()
@@ -61,9 +63,11 @@ const UserListItem: React.FC<FollowingItemProps> = ({
       </div>
 
       <div className="p-2 bg-primary-50 rounded-md">
-        <Button onClick={handleFollowClick} variant="shade" size="extra_small">
-          {userFollowingIDs?.includes(id) ? 'UnFollow' : 'Follow'}
-        </Button>
+        {!isSelfProfile && (
+          <Button onClick={handleFollowClick} variant="shade" size="extra_small">
+            {userFollowingIDs?.includes(id) ? 'UnFollow' : 'Follow'}
+          </Button>
+        )}
       </div>
     </div>
   )

diff --git a/src/components/molecules/CommunityGroupFilter/index.tsx b/src/components/molecules/CommunityGroupFilter/index.tsx
@@ -4,6 +4,7 @@ import { useGetFilteredSubscribedCommunities } from '@/services/university-commu
 import { subCategories } from '@/types/CommuityGroup'
 import React, { useEffect, useState } from 'react'
 import { RiDeleteBin6Line } from 'react-icons/ri'
+import { closeModal } from '../Modal/ModalManager'
 
 const GroupCategories = ['Private', 'Public', 'Official', 'Casual']
 
@@ -63,8 +64,8 @@ const CommunityGroupFilterComponent: React.FC<Props> = ({
     const data = { selectedType, selectedFilters, sort }
     setSelectedFiltersMain(selectedFilters)
     setSelectedTypeMain(selectedType)
-
     mutate(data)
+    closeModal()
   }
 
   useEffect(() => {

diff --git a/src/components/molecules/Modal/ModalWrapper.tsx b/src/components/molecules/Modal/ModalWrapper.tsx
@@ -22,7 +22,7 @@ const ModalWrapper = ({ children, setModal, isShown, smallHeight = false, taking
       } ${smallHeight ? 'h-[99%]' : 'h-screen'} top-0 flex justify-center items-center z-50`}
     >
       <div onClick={() => setModal(false)} className="bg-black opacity-70 w-full h-screen fixed -z-10"></div>
-      <div className="relative bg-white w-[550px] max-sm:w-11/12 max-md:w-2/3 min-w-[370px] max-h-[85%] overflow-y-auto rounded-2xl shadow-lg px-8 py-4">
+      <div className="relative bg-white w-[550px] max-sm:w-11/12 max-md:w-2/3 min-w-[550px] min-h-[85%] max-h-[85%] overflow-y-auto rounded-2xl shadow-lg px-4 py-4">
         <div className="absolute right-0 top-0">
           <button onClick={() => setModal(false)} className="p-2">
             <IoClose size={24} />

diff --git a/src/components/molecules/Tabs/FindPeople.tsx b/src/components/molecules/Tabs/FindPeople.tsx
@@ -66,6 +66,7 @@ export default function FindPeople() {
             imageUrl={item?.profile?.profile_dp?.imageUrl || ''}
             userFollowingIDs={userFollowingIDs || []}
             type={'Find People'}
+            isSelfProfile={userProfileData?.users_id === item?._id}
           />
         ))}
       </>
@@ -84,7 +85,7 @@ export default function FindPeople() {
           placeholder="Search People"
         />
       </div>
-      <div ref={ref} className="overflow-y-auto h-[inherit]">
+      <div ref={ref} className="overflow-y-auto h-[85%]">
         {renderUserProfileList()}
       </div>
     </>

diff --git a/src/components/molecules/Tabs/Followers.tsx b/src/components/molecules/Tabs/Followers.tsx
@@ -11,7 +11,8 @@ interface Props {
 
 export default function Followers({ userFollowingIDs }: Props) {
   const [name, setName] = useState('')
-  const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers(name, true)
+  const { userProfileData } = useUniStore()
+  const { data: userFollowers, isFetching: isFollowersLoading } = useGetUserFollowers(name, true, userProfileData?.users_id || '')
 
   const renderUserFollowing = () => {
     if (isFollowersLoading) {
@@ -39,6 +40,7 @@ export default function Followers({ userFollowingIDs }: Props) {
             imageUrl={userProfile.profile_dp?.imageUrl || ''}
             userFollowingIDs={userFollowingIDs || []}
             type={'Find People'}
+            isSelfProfile={userProfileData?.users_id === userProfile?.users_id?.id}
           />
         ))}
       </>
@@ -57,7 +59,7 @@ export default function Followers({ userFollowingIDs }: Props) {
           placeholder="Search People"
         />
       </div>
-      <div className="overflow-y-auto h-[inherit]">{renderUserFollowing()}</div>
+      <div className="overflow-y-auto h-[85%]">{renderUserFollowing()}</div>
     </>
   )
 }