fix: select community image

BacPacNet · Dec 18, 2024 · 8c9eeeb · 8c9eeeb
1 parent 405d9f0
commit 8c9eeeb
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 24 deletions.
diff --git a/src/components/Timeline/Modals/ConnectionsModal.tsx b/src/components/Timeline/Modals/ConnectionsModal.tsx
@@ -6,7 +6,6 @@ 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
@@ -15,7 +14,6 @@ type props = {
   userId?: string
 }
 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)

diff --git a/src/components/Timeline/UserListItem.tsx b/src/components/Timeline/UserListItem.tsx
@@ -49,7 +49,7 @@ const UserListItem: React.FC<FollowingItemProps> = ({
   return (
     <div className="flex items-center p-2 md:p-4 border-b border-border justify-between">
       <div onClick={() => handleProfileClicked(id)} className="flex gap-4 items-center cursor-pointer">
-        <img src={imageUrl || avatar.src} alt={firstName} className="w-12 h-12 rounded-full " />
+        <img src={imageUrl || avatar.src} alt={firstName} className="w-12 h-12 rounded-full flex-none" />
         <div className="">
           <h3 className="font-medium text-base text-gray-dark">
             {firstName} {lastName}

diff --git a/src/components/communityUniversity/GroupSelectors.tsx b/src/components/communityUniversity/GroupSelectors.tsx
@@ -31,7 +31,7 @@ const GroupSelectors = ({
     >
       <div
         onClick={() => handleGroupNavigate()}
-        className={`flex w-full   items-center gap-3 py-2 first-of-type:border-0  relative after:content-[''] after:absolute after:left-3 after:z-30 after:top-[calc(90%+10px)]  after:w-[calc(60%)]  after:bg-[#6647FF] `}
+        className={`flex w-full  items-center gap-3 py-2 px-4 first-of-type:border-0  relative after:content-[''] after:absolute after:left-3 after:z-30 after:top-[calc(90%+10px)]  after:w-[calc(60%)]  after:bg-[#6647FF] `}
       >
         {data?.communityGroupLogoUrl?.imageUrl ? (
           <img className="w-10 h-10 object-cover rounded-full" src={data?.communityGroupLogoUrl.imageUrl} alt="dp" />

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-[550px] min-h-[85%] max-h-[85%] overflow-y-auto rounded-2xl shadow-lg px-4 py-4">
+      <div className="relative bg-white w-[550px] max-sm:w-11/12 max-md:w-2/3  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/NavbarUniversityItem/index.tsx b/src/components/molecules/NavbarUniversityItem/index.tsx
@@ -45,6 +45,7 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }
   const [community, setCommunity] = useState<Community>()
   const [selectCommunityId, selectedCommuntyGroupdId] = [communityId || community?._id, communityGroupId]
   const { data: subscribedCommunities, isFetching, isLoading } = useGetSubscribedCommunties()
+  const [communityOpen, setCommunityOpen] = useState(false)
 
   const targetCommunityId = subscribedCommunities?.[0]?._id
   const communityIdForNewGroup = userProfileData?.email?.find((item) => item.communityId === targetCommunityId)?.communityId ?? ''
@@ -58,6 +59,10 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }
     toggleLeftNavbar && toggleLeftNavbar()
   }
 
+  const isUserJoinedSelectedCommunity = useMemo(() => {
+    return community?.users?.some((user) => user?.id?.toString() === userData?.id)
+  }, [community])
+
   const handleNewGroupModal = () => {
     openModal(<CreateNewGroupBox communityId={communityId || communityIdForNewGroup} setNewGroup={setShowNewGroup} />)
   }
@@ -180,17 +185,20 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }
             toggleLeftNavbar={toggleLeftNavbar}
           />
 
-          <div className="flex justify-center items-center p-2">
-            <button onClick={() => handleNewGroupModal()} className="bg-[#6647FF] py-2 w-11/12  rounded-lg text-white">
-              Create Group
-            </button>
-          </div>
+          {isUserJoinedSelectedCommunity && (
+            <div className="flex justify-center items-center p-2">
+              <button onClick={() => handleNewGroupModal()} className="bg-[#6647FF] py-2 w-11/12  rounded-lg text-white">
+                Create Group
+              </button>
+            </div>
+          )}
         </div>
       ),
     },
   ]
 
   const handleUniversityClick = (index: React.SetStateAction<number>) => {
+    setCommunityOpen(false)
     const indextoPush = Number(index)
     setCommunity(subscribedCommunities?.[indextoPush] as Community)
     router.push(`/community/${subscribedCommunities?.[indextoPush]._id}`)
@@ -236,21 +244,40 @@ export default function NavbarUniversityItem({ setActiveMenu, toggleLeftNavbar }
               style={{ boxShadow: '0px 8px 40px rgba(0, 0, 0, 0.10)' }}
               className="flex items-center justify-center bg-white rounded-full w-[40px] h-[40px] cursor-pointer"
             >
-              <Image
-                width={40}
-                height={40}
-                className="w-[40px] h-[40px] object-cover rounded-full"
-                src={community?.communityLogoUrl?.imageUrl || avatar}
-                alt="communtiy image"
-              />
+              <Popover open={communityOpen} onOpenChange={() => setCommunityOpen(!communityOpen)}>
+                <PopoverTrigger asChild>
+                  <Image
+                    width={40}
+                    height={40}
+                    className="w-[40px] h-[40px] object-cover rounded-full"
+                    src={community?.communityLogoUrl?.imageUrl || avatar}
+                    alt="communtiy image"
+                  />
+                </PopoverTrigger>
+                <PopoverContent className="bg-white border-none shadow-lg w-fit px-0 rounded-full flex flex-col gap-2 cursor-pointer">
+                  {subscribedCommunities?.map((community, index) => {
+                    return (
+                      <Image
+                        key={community?._id}
+                        onClick={() => handleUniversityClick(index)}
+                        width={40}
+                        height={40}
+                        className="w-[40px] h-[40px] object-cover rounded-full"
+                        src={community?.communityLogoUrl?.imageUrl || avatar}
+                        alt="communtiy image"
+                      />
+                    )
+                  })}
+                </PopoverContent>
+              </Popover>
             </div>
             <GroupSearchBox placeholder="Search Groups" type="text" onChange={handleSearch} />
           </div>
         </div>
       </>
 
       {subscribedCommunities?.length !== 0 ? (
-        <Tabs tabs={tabData} tabAlign="left" className="px-4 my-4" />
+        <Tabs tabs={tabData} tabAlign="left" className="my-4" />
       ) : (
         <div className="px-4 w-full text-center font-poppins text-neutral-400">
           <p>Add your university to join or create groups</p>

diff --git a/src/components/molecules/PostCommentBox/index.tsx b/src/components/molecules/PostCommentBox/index.tsx
@@ -275,7 +275,6 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
     if ((isFetching && !isFetchingNextPage) || (communityCommentsIsFetching && !communityCommentsIsFetchingNextPage)) {
       return <Spinner />
     }
-    // console.log('comments', comments)
 
     return comments?.map((comment, index: number) => (
       <div key={comment._id} className={`mb-4 h-full relative ${childCommentsId.includes(comment._id) ? 'ms-8 max-sm:ms-4 w-10/12' : 'w-full'} `}>

diff --git a/src/components/molecules/Tabs/index.tsx b/src/components/molecules/Tabs/index.tsx
@@ -21,7 +21,7 @@ const Tabs: React.FC<TabsProps> = ({ tabs, className = '', tabAlign = 'left' })
   return (
     <div className={`w-full ${className} `}>
       {/* Tabs List */}
-      <div className={`border-gray-200 text-${tabAlign}`}>
+      <div className={`border-gray-200 text-${tabAlign} px-4`}>
         {tabs.map((tab, index) => (
           <button
             key={index}

diff --git a/src/components/organisms/ProfileCard/index.tsx b/src/components/organisms/ProfileCard/index.tsx
@@ -127,7 +127,7 @@ export function UserProfileCard({
           )}
         </div>
         <div className="w-full">
-          <div className="flex w-full items-center justify-between flex-wrap">
+          <div className="flex w-full items-center justify-between flex-wrap gap-4">
             <div className="flex gap-4 items-center">
               <p className="font-poppins text-neutral-700 text:md lg:text-[20px] font-bold">{name}</p>
               {isPremium && <p className="bg-primary-800 text-white  rounded-xl px-2 text-3xs">Premium</p>}
@@ -192,7 +192,7 @@ export function UserProfileCard({
           </div>
         </div>
       </div>
-      <div className="grid grid-flow-row-dense grid-cols-1 lg:grid-cols-3 gap-4 pt-8 text-neutral-500">
+      <div className="grid grid-flow-row-dense grid-cols-1 lg:grid-cols-3 gap-4 pt-3 lg:pt-8 text-neutral-500">
         {affiliation && occupation && (
           <>
             {occupation && (

diff --git a/src/services/community-university.ts b/src/services/community-university.ts
@@ -190,7 +190,7 @@ export const useJoinCommunity = () => {
     mutationFn: (communityId: string) => joinCommunity(communityId, cookieValue),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['communityGroupsPost'] })
-      queryClient.invalidateQueries({ queryKey: ['community'] })
+      queryClient.invalidateQueries({ queryKey: ['useGetSubscribedCommunties'] })
       showCustomSuccessToast(`Joined Community `)
     },
     onError: (res: any) => {
@@ -206,7 +206,7 @@ export const useLeaveCommunity = () => {
     mutationFn: (communityId: string) => leaveCommunity(communityId, cookieValue),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['communityGroupsPost'] })
-      queryClient.invalidateQueries({ queryKey: ['community'] })
+      queryClient.invalidateQueries({ queryKey: ['useGetSubscribedCommunties'] })
       showCustomDangerToast(`Left Community`)
     },
     onError: (res: any) => {