Skip to content

Commit

Permalink
fix: update profile and comment section
Browse files Browse the repository at this point in the history
  • Loading branch information
@bacpactech
bacpactech committed Dec 18, 2024
1 parent 3b473dc commit 5d89d05
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 50 deletions.
31 changes: 8 additions & 23 deletions src/components/Timeline/Modals/EditProfileModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { replaceImage } from '@/services/uploadImage'
import { currYear, degreeAndMajors, GenderOptions, occupationAndDepartment } from '@/types/RegisterForm'
import { FaCamera } from 'react-icons/fa'
import { useGetUserData } from '@/services/user'
import { profile } from 'console'
import { closeModal } from '@/components/molecules/Modal/ModalManager'
import { Spinner } from '@/components/spinner/Spinner'

export interface editProfileInputs {
firstName: string
Expand Down Expand Up @@ -41,12 +42,13 @@ export interface editProfileInputs {

const EditProfileModal = () => {
const { mutate: mutateEditProfile, isPending } = useEditProfile()
const { userData, userProfileData } = useUniStore()
const { userProfileData } = useUniStore()
const { data: userProfile } = useGetUserData(userProfileData?.users_id as string)

const [user, setUser] = useState<any>(null)
const [userType, setUserType] = useState('student')
const [previewProfileImage, setPreviewProfileImage] = useState<File | null | string>(null)
const [isProfileLoading, setIsProfileLoading] = useState(false)
const {
register,
handleSubmit,
Expand All @@ -57,25 +59,6 @@ const EditProfileModal = () => {
setValue,
formState: { errors, isDirty },
} = useForm<editProfileInputs>()
// {
// defaultValues: {
// first_name: userData?.firstName,
// last_name: userData?.lastName,
// bio: userProfileData?.bio,
// phone_number: userProfileData?.phone_number,
// gender: userData?.gender,
// dob: userProfileData?.dob ? new Date(userProfileData?.dob).toISOString().split('T')[0] : '',
// country: userProfileData?.country,
// city: userProfileData?.city,
// university_name: userProfileData?.university_name,
// study_year: userProfileData?.study_year,
// degree: userProfileData?.degree,
// major: userProfileData?.major,
// affiliation: userProfileData?.affiliation,
// occupation: userProfileData?.occupation,
// totalFilled: userProfileData?.totalFilled,
// },
// }

const profilePicture = watch('profilePicture')

Expand Down Expand Up @@ -173,12 +156,14 @@ const EditProfileModal = () => {
}

const onSubmit: SubmitHandler<editProfileInputs> = async (data) => {
setIsProfileLoading(true)
let profileImageData = user?.profile_dp
if (profilePicture) {
profileImageData = await handleImageUpload()
}

mutateEditProfile({ ...data, profile_dp: profileImageData })
setIsProfileLoading(false)
closeModal()
}

return (
Expand Down Expand Up @@ -551,7 +536,7 @@ const EditProfileModal = () => {
</div>

<Button variant="primary" type="submit" onClick={handleSubmit(onSubmit)} disabled={!isDirty}>
Update Profile
{isProfileLoading ? <Spinner /> : 'Update Profile'}
</Button>
<Button variant="shade" onClick={() => reset()}>
Redo Changes
Expand Down
51 changes: 25 additions & 26 deletions src/components/molecules/PostCommentBox/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, { useEffect, useRef, useState } from 'react'
import { AiOutlineLike } from 'react-icons/ai'
import { HiReply } from 'react-icons/hi'
import { SlOptions } from 'react-icons/sl'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { useUniStore } from '@/store/store'
import { useCreateUserPostCommentReply, useGetUserPostComments, useLikeUnlikeUserPostComment } from '@/services/community-timeline'
import { useGetUserPostComments, useLikeUnlikeUserPostComment } from '@/services/community-timeline'
import { useGetCommunityPostComments, useLikeUnlikeGroupPostComment } from '@/services/community-university'
import { PostCommentData, PostType } from '@/types/constants'
import { replaceImage } from '@/services/uploadImage'
import Spinner from '@/components/atoms/spinner'
import Image from 'next/image'
import avatar from '@assets/avatar.svg'
Expand All @@ -17,7 +15,7 @@ import NewPostComment from '../NewPostComment'
import { FiMessageCircle, FiRepeat, FiShare2, FiThumbsUp } from 'react-icons/fi'
import { FaUser, FaUsers } from 'react-icons/fa'
import { BsThreeDots } from 'react-icons/bs'
import { CiBookmark, CiBellOff, CiFlag1 } from 'react-icons/ci'
import { CiBellOff, CiFlag1 } from 'react-icons/ci'
import { MdBlock } from 'react-icons/md'
import { GoBookmark } from 'react-icons/go'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
Expand Down Expand Up @@ -87,6 +85,7 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
const containerRef = useRef<HTMLDivElement>(null)
const [replyModal, setReplyModal] = useState({ enabled: false, commentID: '' })
const { isMobile } = useDeviceType()
const { isDesktop } = useDeviceType()

const { mutate: likeGroupPostComment } = useLikeUnlikeGroupPostComment(false)
const { mutate: likeUserPostComment } = useLikeUnlikeUserPostComment(false)
Expand Down Expand Up @@ -278,18 +277,18 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {

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'} `}>
{comment?.replies?.length > 0 && visibleComments[comment._id] && comment?.level !== 3 ? (
<div className="absolute w-[1px] h-[90%] bg-neutral-300 top-20 max-sm:top-16 left-10 max-sm:left-8"></div>
{/*{comment?.replies?.length > 0 && visibleComments[comment._id] && comment?.level !== 3 ? (
<div className="absolute w-[1px] h-24 bg-neutral-300 top-20 max-sm:top-16 left-10 max-sm:left-8"></div>
) : (
''
)}
)}*/}

<div>
<div className="flex py-2 max-sm:px-0 gap-4 justify-start">
<div className="relative ">
{/*<div className="relative ">
{childCommentsId.includes(comment._id) ? (
<>
{/* <div className="absolute w-1 h-36 bg-neutral-300 -top-28 -left-14"></div> */}
<div className="absolute w-1 h-36 bg-neutral-300 -top-28 -left-14"></div>
{index == comments.length - 1 ? <div className="absolute w-2 h-96 bg-white top-5 -left-6 max-sm:-left-4"></div> : ''}
<div
Expand All @@ -301,14 +300,14 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
) : (
''
)}
</div>
<div>
</div>*/}
<div className="w-[45px] h-[45px] flex-none">
<Image
src={comment?.commenterProfileId?.profile_dp?.imageUrl || avatar}
width={56}
height={56}
objectFit="fill"
className="rounded-full max-sm:w-10 max-sm:h-10"
width={45}
height={45}
objectFit="cover"
className="rounded-full h-[inherit]"
alt="avatar.png"
/>
</div>
Expand All @@ -323,10 +322,10 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
</p>
</div>
</div>
<div className="flex gap-4 ps-[105px] max-sm:ps-[70px]">
<p className="text-xs sm:text-sm pt-1 break-words lg:min-w-[450px] max-lg:min-w-[200px]">{comment?.content}</p>
<div className="flex gap-4 ps-[86px] max-sm:ps-[70px]">
<pre className="font-poppins text-xs pt-1 break-words lg:min-w-[450px] max-lg:min-w-[200px]">{comment?.content}</pre>
</div>
<div className="flex justify-start ps-[105px] max-sm:ps-[70px] mt-3 gap-5 max-sm:gap-2 text-xs max-sm:text-2xs">
<div className="flex justify-start ps-[86px] max-sm:ps-[70px] mt-3 gap-5 max-sm:gap-2 text-s max-sm:text-s">
<div className="flex items-center cursor-pointer">
<AiOutlineLike
onClick={() => likePostCommentHandler(comment._id)}
Expand Down Expand Up @@ -391,15 +390,15 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
}

return (
<div className={`${showCommentSec !== postID ? 'h-0 overflow-y-hidden' : ''} flex flex-col gap-2 w-full`}>
<div className="rounded-full pt-4 pb-2 flex gap-2 items-center">
<div className={`${showCommentSec !== postID ? 'h-0 overflow-y-hidden py-0' : 'pt-4'} flex flex-col gap-2 w-full `}>
<div className="rounded-full pb-2 flex gap-2 items-center">
<Image
src={userProfileData?.cover_dp?.imageUrl || avatar}
src={userProfileData?.profile_dp?.imageUrl || avatar}
alt={`${userData?.firstName}'s avatar`}
width={44}
height={44}
width={45}
height={45}
objectFit="cover"
className="rounded-full w-12 h-12 sm:w-14 sm:h-14"
className="rounded-full h-[45px]"
/>
<button
onClick={() => {
Expand All @@ -422,9 +421,9 @@ const PostCommentBox = ({ showCommentSec, postID, type, data }: Props) => {
''
)}

<div ref={containerRef} className="max-h-72 overflow-y-scroll">
<div ref={containerRef} className="">
{renderComments(type == PostType.Community ? communitCommentsDatas : commentsDatas)}
{(isFetchingNextPage || communityCommentsIsFetching) && <Spinner />}
{/*{(isFetchingNextPage || communityCommentsIsFetching) && <Spinner />}*/}
</div>
{replyModal.enabled && <NestedCommentModal reply={replyModal} setReply={setReplyModal} type={type} />}
{newPost && <NewPostComment setNewPost={setNewPost} data={isReply ? commentData : data} isReply={isReply} postId={postID} />}
Expand Down
2 changes: 1 addition & 1 deletion src/components/organisms/ProfileCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export function UserProfileCard({
<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>}
{/*{isPremium && <p className="bg-primary-800 text-white rounded-xl px-2 text-3xs">Premium</p>}*/}
</div>
{isSelfProfile ? (
<div
Expand Down
5 changes: 5 additions & 0 deletions src/services/edit-profile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { client } from './api-Client'
import { useUniStore } from '@/store/store'
import useCookie from '@/hooks/useCookie'
import { showCustomSuccessToast } from '@/components/atoms/CustomToasts/CustomToasts'

const editProfile = async (data: any, id: string) => {
const res = await client(`/userprofile/${id}`, { method: 'PUT', data })
Expand All @@ -15,12 +16,16 @@ const addUniversityEmail = async (data: any, token: string) => {
export const useEditProfile = () => {
const setUserProfileData = useUniStore((state) => state.setUserProfileData)
const { userProfileData } = useUniStore()
const queryClient = useQueryClient()
return useMutation({
mutationFn: (data: any) => editProfile(data, userProfileData?._id || ''),
onSuccess: (response: any) => {
showCustomSuccessToast('Profile Updated Successfully')
setUserProfileData(response.updatedUserProfile)
queryClient.invalidateQueries({ queryKey: ['getRefetchUserData'] })
},
onError: (res: any) => {
showCustomSuccessToast('Failed to update profile')
console.log(res.response.data.message, 'res')
},
})
Expand Down

0 comments on commit 5d89d05

Please sign in to comment.