From de094fab2e52694e816a5411e562da01b7991b5d Mon Sep 17 00:00:00 2001 From: amiparadis250 Date: Tue, 16 Jul 2024 13:16:21 +0200 Subject: [PATCH] fixing profile update --- src/app/(profile)/profile-edit/page.tsx | 99 +++++++++++++++++++----- src/components/profile/About.tsx | 8 +- src/components/profile/ProfileHeader.tsx | 5 +- src/validations/userProfileSchema.ts | 10 ++- 4 files changed, 96 insertions(+), 26 deletions(-) diff --git a/src/app/(profile)/profile-edit/page.tsx b/src/app/(profile)/profile-edit/page.tsx index efb989c..8956f0d 100644 --- a/src/app/(profile)/profile-edit/page.tsx +++ b/src/app/(profile)/profile-edit/page.tsx @@ -3,25 +3,34 @@ import React, { useEffect, useState, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppDispatch, RootState } from '@/redux/store'; import { getUserProfile, updateUserProfile } from '@/redux/slices/profileSlice'; -import Header from '@/components/Header'; -import Footer from '@/components/Footer'; -import InputBox from '@/components/InputBox'; + import { toast } from 'react-toastify'; import { showToast } from '@/helpers/toast'; import { useForm, SubmitHandler, useWatch } from 'react-hook-form'; -import { zodResolver } from '@hookform/resolvers/zod'; + import updateSchema from '@/validations/userProfileSchema'; import { useRouter } from 'next/navigation'; import type { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; + +import InputBox from '@/components/InputBox'; +import UpdatePasswords from '@/components/updatepassword'; +import Header from '@/components/Header'; +import Footer from '@/components/Footer'; +import { User, Cake, Award } from 'lucide-react' type FormSchemaType = z.infer; const UserProfileForm: React.FC = () => { + const route = useRouter(); + const [showlModal, setShowmodal] = useState(false); const dispatch = useDispatch(); const { user, loading, error } = useSelector( (state: RootState) => state.userProfile, ); - + const handleshow = () => { + setShowmodal(!showlModal); + }; const { register, handleSubmit, @@ -34,6 +43,7 @@ const UserProfileForm: React.FC = () => { firstName: '', lastName: '', phone: '', + address:'', birthDate: '', preferredLanguage: '', whereYouLive: '', @@ -68,7 +78,7 @@ const UserProfileForm: React.FC = () => { }, [user, setValue]); const handleImageChange = (e: React.ChangeEvent) => { - if (e.target.files && e.target.files.length === 1) { + if (e.target.files && e.target?.files?.length === 1) { const file = e.target.files[0]; setImageFile(file); const reader = new FileReader(); @@ -83,22 +93,36 @@ const UserProfileForm: React.FC = () => { fileInputRef.current?.click(); }; - const onSubmit: SubmitHandler = async (data) => { - if (!imageFile && !profileImage) { - toast.error( - 'Please select a profile image before updating your profile.', - ); - return; + const getExistingImage = async (): Promise => { + if (!user?.User?.profileImage) return null; + + try { + const response = await fetch(user.User.profileImage); + const blob = await response.blob(); + return new File([blob], 'profile_image.jpg', { type: blob.type }); + } catch (error) { + console.error('Error fetching existing image:', error); + return null; } + }; + const onSubmit: SubmitHandler = async (data) => { const formDataToSend = new FormData(); Object.entries(data).forEach(([key, value]) => { formDataToSend.append(key, value as string); }); + let imageToUpload: File | null = null; + if (imageFile) { - formDataToSend.append('profileImage', imageFile); + imageToUpload = imageFile; + } else { + imageToUpload = await getExistingImage(); + } + + if (imageToUpload) { + formDataToSend.append('profileImage', imageToUpload); } try { @@ -106,17 +130,16 @@ const UserProfileForm: React.FC = () => { const response = await dispatch(updateUserProfile(formDataToSend)); setIsLoading(false); if (updateUserProfile.fulfilled.match(response)) { - // Update only the User value in localStorage const currentProfile = JSON.parse( localStorage.getItem('profile') || '{}', ); if (response.payload && response.payload.User) { currentProfile.User = response.payload.User; - console.log('currentProfile', currentProfile); localStorage.setItem('profile', JSON.stringify(currentProfile)); } toast.success('Profile updated successfully'); + route.push('/profile'); } else if (updateUserProfile.rejected.match(response)) { const errorMessage: any = response.payload && @@ -147,9 +170,26 @@ const UserProfileForm: React.FC = () => { if (!user) { return
No user data available. Please try refreshing the page.
; } - + const getCurrentDate = () => { + const today = new Date(); + const year = today.getFullYear() - 10; + const month = String(today.getMonth() + 1).padStart(2, '0'); + const day = String(today.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + }; + function formatDate(dateString: string) { + // Parse the date string into a Date object + const date = new Date(dateString); + const year = date.getFullYear(); + const month = (date.getMonth() + 1).toString().padStart(2, '0'); + const day = date.getDate().toString().padStart(2, '0'); + const formattedDate = `${day}-${month}-${year}`; + + return formattedDate; + } + return ( -
+
@@ -162,6 +202,10 @@ const UserProfileForm: React.FC = () => { src={profileImage} alt="Profile" onClick={handleImageClick} + onError={(e) => { + e.currentTarget.src = '/unknown.jpg'; + }} + /> { {watchedValues.phone || 'Contact Number'} +
  • + +
    • @@ -302,6 +354,8 @@ const UserProfileForm: React.FC = () => { placeholder="Birth date" {...register('birthDate')} error={errors.birthDate?.message} + + max={getCurrentDate()} />
    @@ -309,8 +363,7 @@ const UserProfileForm: React.FC = () => { nameuse="Address" type="text" placeholder="Address" - {...register('whereYouLive')} - error={errors.whereYouLive?.message} + error ={errors.address?.message} />
    @@ -349,10 +402,11 @@ const UserProfileForm: React.FC = () => {
    +
    + +
    + +
    ); diff --git a/src/components/profile/About.tsx b/src/components/profile/About.tsx index 67bf79a..1b4230e 100644 --- a/src/components/profile/About.tsx +++ b/src/components/profile/About.tsx @@ -27,19 +27,19 @@ function About() { const items: any = [ { icon: , - details: `${user.User?.birthDate}`, + details: `${user.User?.birthDate || 'YYYY-MM-DD'} `, }, { icon: , - details: `${user.User?.whereYouLive}`, + details: `${user.User?.whereYouLive || "Where You Live"}`, }, { icon: , - details: `${user.User?.email}`, + details: `${user.User?.email || 'email'} `, }, { icon: , - details: `${user.User?.phone}`, + details: `${user.User?.phone || 'Contact Number'}`, }, ]; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index eaaed72..b9e06cf 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -92,8 +92,11 @@ function ProfileHeader() {
    Profile { + e.currentTarget.src = '/unknown.jpg'; + }} />
    diff --git a/src/validations/userProfileSchema.ts b/src/validations/userProfileSchema.ts index a6da366..8ba7483 100644 --- a/src/validations/userProfileSchema.ts +++ b/src/validations/userProfileSchema.ts @@ -28,8 +28,10 @@ birthDate: z.string().optional(), .max(70, "No more than 70 characters for preferredLanguage"), whereYouLive: z .string({ required_error: "Where you live is required" }) - .min(3, "Use at least 3 characters for whereYouLive") .max(70, "No more than 70 characters for whereYouLive"), + address: z + .string({ required_error: "Address is required" }) + .max(70, "No more than 70 characters for Adress"), preferredCurrency: z .string({ required_error: "Preferred Currency is required" }) .min(2, "Use at least 2 characters for preferredCurrency") @@ -41,3 +43,9 @@ birthDate: z.string().optional(), }); export default updateSchema; + + + + + +