Merge pull request #131 from BacPacNet/fix-notification-joincommunity

Fix notification joincommunity

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

@@ -5,8 +5,9 @@ import Spinner from '@/components/atoms/spinner'
 import { useGetPost } from '@/services/community-university'
 import { PostType } from '@/types/constants'
 import { useParams, useSearchParams } from 'next/navigation'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import PostImageSlider from '@/components/atoms/PostImageSlider'
+import { openImageModal } from '@/components/molecules/ImageWrapper/ImageManager'
 
 const SinglePost = () => {
   const { id } = useParams<{ id: string }>()
@@ -27,9 +28,11 @@ const SinglePost = () => {
     currImageIndex: null,
   })
 
-  // if (!data || Object.keys(data).length === 0) {
-  //   return <div className="h-screen flex justify-center items-center">Not Allowed</div>
-  // }
+  useEffect(() => {
+    if (imageCarasol.isShow) {
+      openImageModal(<PostImageSlider images={imageCarasol.images} initialSlide={imageCarasol.currImageIndex} messageImage={true} />)
+    }
+  }, [imageCarasol])
 
   if (isError) {
     return <div className="h-screen flex justify-center items-center">Not Allowed</div>
@@ -67,21 +70,6 @@ const SinglePost = () => {
           setShowCommentSection={setShowCommentSection}
         />
       </div>
-      {imageCarasol.isShow && (
-        <div className="fixed h-screen w-full mx-auto flex items-center justify-center ">
-          <div
-            onClick={() =>
-              setImageCarasol({
-                isShow: false,
-                images: [],
-                currImageIndex: 0,
-              })
-            }
-            className="bg-black w-full h-full fixed -top-0 -left-[0%] z-30 opacity-50"
-          ></div>
-          <PostImageSlider images={imageCarasol.images} initialSlide={imageCarasol.currImageIndex} />
-        </div>
-      )}
     </div>
   )
 }

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

@@ -1,38 +1,21 @@
 'use client'
-import { openModal } from '@/components/molecules/Modal/ModalManager'
+
 import ProfilePostContainer from '@/components/organisms/PostsContainer'
 import { UserProfileCard } from '@/components/organisms/ProfileCard'
-import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
-import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+
 import { Skeleton } from '@/components/ui/Skeleton'
 import { useCheckSelfProfile } from '@/lib/utils'
 import { useGetUserData } from '@/services/user'
-import { ModalContentType } from '@/types/global'
-import React, { useRef, useState } from 'react'
+
+import React, { useRef } 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 containerRef = useRef<HTMLDivElement>(null)
   const { data: userProfileData, isLoading: isUserProfileDataLoading } = useGetUserData(userId)
 
-  const handleShowModal = (modalType: string) => {
-    const modalContent = (modalContentType: string) => {
-      switch (modalContentType) {
-        case 'EditProfileModal':
-          return openModal(<EditProfileModal />)
-        case 'ConnectionsModal':
-          return openModal(<ConnectionsModal userId={userId} />)
-        default:
-          return null
-      }
-    }
-
-    modalContent(modalType)
-  }
-
   const { profile, firstName, lastName, email, university_id, university } = userProfileData || {}
   const { bio, university_name, followers, following, study_year, major, degree, phone_number, country, dob, city, affiliation, occupation } =
     profile || {}
@@ -63,9 +46,6 @@ export default function Profile({ params }: { params: { id: string } }) {
           avatarUrl={profile?.profile_dp?.imageUrl || ''}
           isVerifiedUniversity={true}
           country={country || ''}
-          setModalContentType={setModalContentType}
-          setIsModalOpen={setIsModalOpen}
-          handleShowModal={handleShowModal}
           isSelfProfile={isSelfProfile}
           userId={userId}
           universityLogo={logos?.[0] || ''}

src/app/layout.tsx

@@ -10,6 +10,7 @@ import { Toaster } from 'react-hot-toast'
 import SecondaryNavbar from '@/components/Timeline/Navbar'
 import LogoNavbar from '@/components/atoms/LogoNavbar'
 import { ModalManager } from '@/components/molecules/Modal/ModalManager'
+import { ImageManager } from '@/components/molecules/ImageWrapper/ImageManager'
 type FontClassName = string
 
 const inter = Inter({
@@ -61,6 +62,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <LogoNavbar />
             <Toaster />
             <ModalManager />
+            <ImageManager />
             {children}
           </ZustandSocketProvider>
         </ReactQueryClientProvider>

src/components/Notifiaction/CommunityAndCommunityGroupJoinNotification.tsx

@@ -4,8 +4,9 @@ import Image from 'next/image'
 import { FaUsers } from 'react-icons/fa'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useJoinCommunityGroup } from '@/services/notification'
+import { useJoinCommunityGroup, useUpdateIsRead } from '@/services/notification'
 import { useRouter } from 'next/navigation'
+import Buttons from '../atoms/Buttons'
 dayjs.extend(relativeTime)
 
 interface Props {
@@ -39,24 +40,27 @@ interface Props {
 
 const CommunityAndCommunityGroupJoinNotification = ({ data }: Props) => {
   const { mutate: joinGroup } = useJoinCommunityGroup()
+  const { mutate: updateIsSeen } = useUpdateIsRead()
   const router = useRouter()
   const handleJoinGroup = (groupId: string = '', id: string) => {
     if (!groupId || !id) return
 
-    if (data?.isRead) return router.push(`/community/${data.communityGroupId?.communityId}/${data.communityGroupId?._id}`)
-
     const dataToPush = {
       groupId: groupId,
       id: id,
     }
     joinGroup(dataToPush)
   }
 
+  const handleReject = (id: string) => {
+    const dataToPush = {
+      id: id,
+    }
+    updateIsSeen(dataToPush)
+  }
+
   return (
-    <div
-      onClick={() => handleJoinGroup(data?.communityGroupId?._id, data._id)}
-      className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 cursor-pointer`}
-    >
+    <div className={`flex flex-col gap-2  border-b-2 border-neutral-300 pb-5 me-10 hover:bg-neutral-200 hover:p-5 transition-all duration-200 `}>
       <div className="flex justify-between ">
         <div className="flex gap-4 items-center  ">
           <Image
@@ -72,12 +76,25 @@ const CommunityAndCommunityGroupJoinNotification = ({ data }: Props) => {
         </div>
         <p>{dayjs(new Date(data?.createdAt).toString()).fromNow()}</p>
       </div>
-      <p className="text-sm">
-        You have been invited to join{' '}
-        <span className="font-semibold ">
-          {data?.communityDetails?.name}’s {data?.communityGroupId?.title}.{' '}
-        </span>
-      </p>
+      <div className="w-full flex justify-between items-center">
+        <p className="text-sm">
+          You have been invited to join{' '}
+          <span
+            onClick={() => router.push(`/community/${data.communityGroupId?.communityId}/${data.communityGroupId?._id}`)}
+            className="font-semibold hover:underline cursor-pointer"
+          >
+            {data?.communityDetails?.name}’s {data?.communityGroupId?.title}.{' '}
+          </span>
+        </p>
+        <div className="flex gap-2 items-center">
+          <Buttons onClick={() => handleJoinGroup(data?.communityGroupId?._id, data._id)} size="extra_small">
+            Accept
+          </Buttons>
+          <Buttons disabled={data?.isRead} onClick={() => handleReject(data._id)} size="extra_small">
+            Reject
+          </Buttons>
+        </div>
+      </div>
     </div>
   )
 }

src/components/Notifiaction/StartedFollowingYouNotification.tsx

@@ -6,6 +6,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useUpdateIsRead } from '@/services/notification'
 import { useRouter } from 'next/navigation'
+import { notificationRoleAccess } from '../organisms/NotificationTabs/NotificationTab'
 
 dayjs.extend(relativeTime)
 
@@ -39,7 +40,7 @@ interface Props {
 }
 
 const StartedFollowingYouNotification = ({ data }: Props) => {
-  const { mutate: updateIsSeen } = useUpdateIsRead()
+  const { mutate: updateIsSeen } = useUpdateIsRead(notificationRoleAccess.FOLLOW)
   const router = useRouter()
   const handleUpdateIsRead = (id: string) => {
     const dataToPush = {

src/components/atoms/LogoNavbar/constant.ts

@@ -11,8 +11,8 @@ export const MENU_LIST = [
     name: 'About Us',
     path: '/about',
   },
-  {
-    name: 'UPGRADE',
-    path: '/upgrade',
-  },
+  // {
+  //   name: 'UPGRADE',
+  //   path: '/upgrade',
+  // },
 ]

src/components/atoms/LogoNavbar/index.tsx

@@ -129,10 +129,6 @@ export default function LogoNavbar({ showOnlyLogo = false }: Props) {
                       <PiPaintBrushDuotone />
                       <p>Preferences</p>
                     </li>
-                    <li className="flex py-2 px-4 gap-2 items-center text-neutral-600 hover:bg-neutral-200 hover:cursor-pointer">
-                      <HiCubeTransparent />
-                      <p>Upgrades</p>
-                    </li>
                   </ul>
                   <ul className="border-b-[1px] border-neutral-200 ">
                     <li className="flex py-2 px-4 gap-2 items-center text-neutral-600 hover:bg-neutral-200 hover:cursor-pointer">

src/components/atoms/PostImageSlider/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 // Import Swiper React components
 import { Swiper, SwiperSlide } from 'swiper/react'
-
+import { RxCross2 } from 'react-icons/rx'
 // Import Swiper styles
 import 'swiper/css'
 import 'swiper/css/pagination'
@@ -12,6 +12,7 @@ import './index.css'
 // import required modules
 import { Keyboard, Pagination, Navigation } from 'swiper/modules'
 import Image from 'next/image'
+import { closeImageModal } from '@/components/molecules/ImageWrapper/ImageManager'
 
 type prop = {
   images: { imageUrl: string }[]
@@ -21,7 +22,11 @@ type prop = {
 
 export default function PostImageSlider({ images, initialSlide, messageImage }: prop) {
   return (
-    <div className={`z-40 fixed ${messageImage ? 'w-full h-[400px]' : 'w-[60%] h-3/6'}  top-1/4  `}>
+    <div className={` w-1/2 h-1/2 max-sm:w-11/12 max-sm:h-5/6  relative bg-red-900`}>
+      <p className="bg-white rounded-full self-end w-max absolute z-50 right-0 text2xs p-2" onClick={() => closeImageModal()}>
+        <RxCross2 />
+      </p>
+
       <Swiper
         slidesPerView={1}
         spaceBetween={30}
@@ -38,7 +43,7 @@ export default function PostImageSlider({ images, initialSlide, messageImage }:
       >
         {images?.map((item: any) => (
           <SwiperSlide key={item?.imageUrl}>
-            {<Image layout="fill" objectFit="cover" objectPosition="center" src={item?.imageUrl} alt="item" />}
+            {<Image layout="fill" objectFit="contain" objectPosition="center" src={item?.imageUrl} alt="item" className="bg-neutral-800" />}
           </SwiperSlide>
         ))}
       </Swiper>

src/components/molecules/CommunityGroupBanner/index.tsx

@@ -4,15 +4,16 @@ import React, { useEffect, useMemo, useState } from 'react'
 import universityPlaceholder from '@assets/university_placeholder.jpg'
 import './index.css'
 import { useUniStore } from '@/store/store'
-import { useGetCommunityGroup, useUpdateCommunity, useUpdateCommunityGroup } from '@/services/community-university'
+import { useGetCommunityGroup, useUpdateCommunity } from '@/services/community-university'
 import { replaceImage } from '@/services/uploadImage'
 import { MdAddAPhoto } from 'react-icons/md'
 import Button from '@/components/atoms/Buttons'
 import { Skeleton } from '@/components/ui/Skeleton'
 import { HiPencilAlt } from 'react-icons/hi'
 import EditCommunityGroupModal from '../EditCommunityGroupModal'
-import { useJoinCommunityGroup, useLeaveCommunityGroup } from '@/services/community-group'
+import { useJoinCommunityGroup } from '@/services/community-group'
 import { openModal } from '../Modal/ModalManager'
+import CommunityLeaveModal from '../CommunityLeaveModal'
 
 interface Props {
   communityID: string
@@ -27,9 +28,7 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
   const [isUserJoinedCommunityGroup, setIsUserJoinedCommunityGroup] = useState<boolean | null>(null)
   const { data: communityGroups, isLoading: isCommunityGroupsLoading, refetch } = useGetCommunityGroup(communityID, communityGroupID)
   const { mutate: joinCommunityGroup, isPending: isJoinCommunityPending } = useJoinCommunityGroup()
-  const { mutate: leaveCommunityGroup, isPending: isLeaveCommunityPending } = useLeaveCommunityGroup()
   const { mutate: updateCommunity } = useUpdateCommunity()
-  const { mutate: UpdateCommunityGroup } = useUpdateCommunityGroup()
 
   useEffect(() => {
     if (communityGroupID) {
@@ -58,11 +57,10 @@ export default function CommunityGroupBanner({ communityID, communityGroupID, is
         },
       })
     } else {
-      leaveCommunityGroup(communityGroupID, {
-        onSuccess: () => {
-          setIsUserJoinedCommunityGroup(false)
-        },
-      })
+      openModal(
+        <CommunityLeaveModal communityGroupID={communityGroupID} setIsUserJoinedCommunityGroup={setIsUserJoinedCommunityGroup} />,
+        'h-max w-96'
+      )
     }
   }
 

src/components/molecules/CommunityLeaveModal/index.tsx

@@ -0,0 +1,55 @@
+import Buttons from '@/components/atoms/Buttons'
+import { useLeaveCommunity } from '@/services/community-university'
+import React from 'react'
+import { RiErrorWarningLine } from 'react-icons/ri'
+import { closeModal } from '../Modal/ModalManager'
+import { Spinner } from '@/components/spinner/Spinner'
+import { useLeaveCommunityGroup } from '@/services/community-group'
+
+type Props = {
+  communityID?: string
+  setIsUserJoinedCommunity?: (value: boolean) => void
+  setIsUserJoinedCommunityGroup?: (value: boolean) => void
+  communityGroupID?: string
+}
+
+const CommunityLeaveModal = ({ communityID, setIsUserJoinedCommunity, communityGroupID, setIsUserJoinedCommunityGroup }: Props) => {
+  const { mutate: leaveCommunity, isPending: isLeaveLoading } = useLeaveCommunity()
+  const { mutate: leaveCommunityGroup, isPending: isLeaveCommunityPending } = useLeaveCommunityGroup()
+  const handleLeaveCommunity = () => {
+    if (communityGroupID && setIsUserJoinedCommunityGroup) {
+      leaveCommunityGroup(communityGroupID, {
+        onSuccess: () => {
+          setIsUserJoinedCommunityGroup(false)
+          closeModal()
+        },
+      })
+    }
+    if (setIsUserJoinedCommunity && communityID) {
+      leaveCommunity(communityID, {
+        onSuccess: () => {
+          setIsUserJoinedCommunity(false)
+          closeModal()
+        },
+      })
+    }
+  }
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 ">
+      <RiErrorWarningLine size={180} className="" />
+      <h3 className="text-base font-semibold font-poppins text-center">
+        Are you sure you want to leave {communityID ? 'community?' : 'community group?'}
+      </h3>
+      <div className="flex items-center gap-4 w-full px-5">
+        <Buttons onClick={() => closeModal()} className="w-11/12" size="extra_small">
+          No
+        </Buttons>
+        <Buttons onClick={() => handleLeaveCommunity()} className="w-11/12" size="extra_small" variant="danger">
+          {isLeaveLoading || isLeaveCommunityPending ? <Spinner /> : 'Yes'}
+        </Buttons>
+      </div>
+    </div>
+  )
+}
+
+export default CommunityLeaveModal