diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fea..3bab3624 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css index e55874f1..903d5d39 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -41,6 +41,12 @@ body { overflow-y: hidden; } +.truncate-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + @layer components { .btn { @apply p-3 rounded-md flex text-[#ffffff] items-center justify-center text-base; diff --git a/src/components/Timeline/Modals/EditProfileModal.tsx b/src/components/Timeline/Modals/EditProfileModal.tsx index 423e44ef..2b388275 100644 --- a/src/components/Timeline/Modals/EditProfileModal.tsx +++ b/src/components/Timeline/Modals/EditProfileModal.tsx @@ -12,10 +12,13 @@ import { useEffect, useState } from 'react' 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' export interface editProfileInputs { - first_name: string - last_name: string + firstName: string + lastName: string + profilePicture: string | null users_id: string profile_dp?: string email?: string @@ -39,8 +42,11 @@ export interface editProfileInputs { const EditProfileModal = () => { const { mutate: mutateEditProfile, isPending } = useEditProfile() const { userData, userProfileData } = useUniStore() + const { data: userProfile } = useGetUserData(userProfileData?.users_id as string) + + const [user, setUser] = useState(null) const [userType, setUserType] = useState('student') - const [profileImage, setProfileImage] = useState(userProfileData?.profile_dp?.imageUrl as string) + const [previewProfileImage, setPreviewProfileImage] = useState(null) const { register, handleSubmit, @@ -49,26 +55,55 @@ const EditProfileModal = () => { watch, setError, setValue, - formState: { errors }, - } = useForm({ - 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, - }, - }) + formState: { errors, isDirty }, + } = useForm() + // { + // 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') + + useEffect(() => { + if (userProfile) { + const { firstName, lastName, gender, profile, email } = userProfile || {} + const userDefault = { + firstName: firstName || '', + lastName: lastName || '', + email: email || '', + gender: gender || '', + affiliation: profile.affiliation || '', + bio: profile.bio || '', + city: profile.city || '', + country: profile.country || '', + degree: profile.degree || '', + dob: profile.dob || '', + major: profile.major || '', + occupation: profile.occupation || '', + phone_number: profile.phone_number || '', + study_year: profile.study_year || '', + profilePicture: null, + } + reset(userDefault) + setUser({ ...userDefault, profile_dp: profile.profile_dp }) + setPreviewProfileImage(profile.profile_dp.imageUrl) + } + }, [userProfile, reset]) const [cityOptions, setCityOptions] = useState([]) const [isCityAvailable, setIsCityAvailable] = useState(true) @@ -103,19 +138,11 @@ const EditProfileModal = () => { useEffect(() => { setCurrMajor(degreeAndMajors[currDegree] || []) - if (!degreeAndMajors[currDegree]?.includes(currMa)) { - setValue('major', '') - } }, [currDegree, setValue]) useEffect(() => { const cities = country_list[currCountry] || [] - setCityOptions(cities.length > 0 ? cities : ['Not available']) - - if (!country_list[currCountry].includes(currCity)) { - setValue('city', '') - } }, [currCountry, setValue]) const validateBio = (value: string | undefined): string | boolean => { @@ -127,63 +154,33 @@ const EditProfileModal = () => { } const handleImageUpload = async () => { - const files = profileImage + const files = profilePicture if (files) { const data = await replaceImage(files, userProfileData?.profile_dp?.publicId) - - const dataToPush = { profile_dp: { imageUrl: data?.imageUrl, publicId: data?.publicId } } - - return dataToPush + return { imageUrl: data?.imageUrl, publicId: data?.publicId } } else { console.error('No file selected.') } } - const onSubmit: SubmitHandler = async (data) => { - let profileImageData - let dataToPush + // Handle image preview + const handleImagePreview = (e: any) => { + const file = e.target.files[0] + if (file) { + setPreviewProfileImage(URL.createObjectURL(file)) + setValue('profilePicture', file) + } + } - if (profileImage) { + const onSubmit: SubmitHandler = async (data) => { + let profileImageData = user?.profile_dp + if (profilePicture) { profileImageData = await handleImageUpload() } - if (userType === 'applicant') { - const { major, degree, study_year, occupation, affiliation, university_name, ...rest } = data - - dataToPush = { - ...rest, - major: '', - degree: '', - study_year: '', - occupation: '', - affiliation: '', - university_name: '', - ...(profileImageData && { profile_dp: profileImageData.profile_dp }), - } - } else if (userType === 'faculty') { - const { major, degree, study_year, ...rest } = data - - dataToPush = { - ...rest, - major: '', - degree: '', - study_year: '', - ...(profileImageData && { profile_dp: profileImageData.profile_dp }), - } - } else { - const { occupation, affiliation, ...rest } = data - - dataToPush = { - ...rest, - occupation: '', - affiliation: '', - ...(profileImageData && { profile_dp: profileImageData.profile_dp }), - } - } - // return console.log('submit', dataToPush) - console.log(dataToPush) - mutateEditProfile(dataToPush) + mutateEditProfile({ ...data, profile_dp: profileImageData }) } + return (

Edit Profile

@@ -193,15 +190,21 @@ const EditProfileModal = () => {

- {profileImage ? ( + {previewProfileImage ? (
aa
- setProfileImage(e.target.files[0])} /> +
) : ( )} @@ -225,22 +228,22 @@ const EditProfileModal = () => { First Name * - {errors.first_name && Please enter first name} + {errors.firstName && Please enter first name}
- {errors.last_name && Please enter your date of birth} + {errors.lastName && Please enter your date of birth}