fix: userProfileCard

src/components/organisms/ProfileCard/index.tsx

@@ -2,15 +2,12 @@ import Card from '@/components/atoms/Card'
 import avatar from '@assets/avatar.svg'
 import Image from 'next/image'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
-//import { Badge } from "@/components/ui/badge";
-//import { Button } from "@/components/ui/button";
 import { FaGraduationCap, FaEnvelope, FaPhone, FaMapMarkerAlt, FaBirthdayCake } from 'react-icons/fa'
 import { ImEarth } from 'react-icons/im'
 import { HiDotsHorizontal, HiPencilAlt } from 'react-icons/hi'
 import badge from '@assets/badge.svg'
 import useDeviceType from '@/hooks/useDeviceType'
 import { format } from 'date-fns'
-import { ModalContentType } from '@/types/global'
 import { useUniStore } from '@/store/store'
 import { useToggleFollow } from '@/services/connection'
 import { IoIosShareAlt } from 'react-icons/io'
@@ -19,7 +16,14 @@ import { IoFlagOutline } from 'react-icons/io5'
 import { RiMessage2Fill } from 'react-icons/ri'
 import { FaCalendarCheck } from 'react-icons/fa6'
 import { MdSubject } from 'react-icons/md'
+import { FaCamera } from 'react-icons/fa'
 import Buttons from '@/components/atoms/Buttons'
+import { useEditProfile } from '@/services/edit-profile'
+import { replaceImage } from '@/services/uploadImage'
+import { ChangeEvent } from 'react'
+import { openModal } from '@/components/molecules/Modal/ModalManager'
+import EditProfileModal from '@/components/Timeline/Modals/EditProfileModal'
+import ConnectionsModal from '@/components/Timeline/Modals/ConnectionsModal'
 
 interface UserProfileCardProps {
   name: string
@@ -39,18 +43,16 @@ interface UserProfileCardProps {
   isVerifiedUniversity: boolean
   degree: string
   country: string
-  setModalContentType: React.Dispatch<React.SetStateAction<ModalContentType>>
-  setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
   isSelfProfile?: boolean
   userId?: string
   universityLogo: string
   occupation: string
   affiliation: string
-  handleShowModal: (value: string) => void
 }
 
 export function UserProfileCard({
   name,
+  isPremium,
   description,
   university,
   isVerified,
@@ -66,27 +68,32 @@ export function UserProfileCard({
   avatarUrl,
   isVerifiedUniversity,
   country,
-  setModalContentType,
-  setIsModalOpen,
+
   isSelfProfile,
   userId,
   universityLogo,
   occupation,
   affiliation,
-  handleShowModal,
 }: UserProfileCardProps) {
   const { isDesktop } = useDeviceType()
   const { userProfileData } = useUniStore()
 
   const { mutate: toggleFollow } = useToggleFollow('Following')
+  const { mutate: mutateEditProfile, isPending } = useEditProfile()
   const userFollowingIDs = userProfileData && userProfileData?.following?.map((following) => following.userId)
 
-  const handleOpenModal = (modalType: ModalContentType) => {
-    setModalContentType(modalType)
-    setIsModalOpen(true)
-    handleShowModal(modalType || '')
-  }
+  const handleImageUpload = async (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (files && files[0]) {
+      const data: any = await replaceImage(files[0], userProfileData?.profile_dp?.publicId)
+
+      const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } }
 
+      mutateEditProfile(dataToPush)
+    } else {
+      console.error('No file selected.')
+    }
+  }
   return (
     <Card className="rounded-2xl px-8">
       <div className="flex flex-wrap lg:flex-nowrap gap-4 lg:gap-8 items-start">
@@ -98,6 +105,14 @@ export function UserProfileCard({
             height={isDesktop ? 126 : 90}
             className="rounded-full object-cover lg:w-[126px] lg:h-[126px] w-[90px] h-[90px]"
           />
+          {isSelfProfile && (
+            <div className="group-hover:block hidden absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-primary-50 py-1 px-2 rounded-full text-primary font-medium cursor-pointer">
+              <input style={{ display: 'none' }} type="file" id="changeProfileImage" onChange={(e) => handleImageUpload(e)} />
+              <label htmlFor="changeProfileImage" className="bg-primary w-10 h-10 flex justify-center items-center rounded-full p-2 text-neutral-800">
+                <FaCamera color="white" />
+              </label>
+            </div>
+          )}
         </div>
         <div className="w-full">
           <div className="flex w-full items-center justify-between flex-wrap gap-4">
@@ -107,7 +122,7 @@ export function UserProfileCard({
             </div>
             {isSelfProfile ? (
               <div
-                onClick={() => handleOpenModal('EditProfileModal')}
+                onClick={() => openModal(<EditProfileModal />)}
                 className="flex gap-2 items-center text-2xs lg:text-xs text-primary-500 cursor-pointer"
               >
                 <button>Edit Profile</button>
@@ -155,10 +170,10 @@ export function UserProfileCard({
               {isVerifiedUniversity && <Image src={badge} alt={name} width={12} height={12} className="ml-1 " />}
             </div>
             <div className="flex gap-4 text-neutral-700 font-semibold">
-              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
                 {following || '0'} Following
               </span>
-              <span onClick={() => handleOpenModal('ConnectionsModal')} className=" text-xs lg:text-sm cursor-pointer">
+              <span onClick={() => openModal(<ConnectionsModal userId={userId} />)} className=" text-xs lg:text-sm cursor-pointer">
                 {followers || '0'} Followers
               </span>
             </div>