From e6153e0b3d8a84117e5a4db08ebec79d27bec04e Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Tue, 25 Apr 2023 19:57:40 +0100 Subject: [PATCH] update profile validation with formik and yup --- .../Helpers/Inputs/InputCom/index.jsx | 5 +- .../Settings/Tabs/PersonalInfoTab.jsx | 520 ++++++++++-------- 2 files changed, 279 insertions(+), 246 deletions(-) diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index 4dfcc4f..9dd8efc 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -13,7 +13,8 @@ export default function InputCom({ value, forgotPassword, onClick, - disable + disable, + blurHandler, }) { return (
@@ -37,8 +38,8 @@ export default function InputCom({ type={type} id={name} name={name} - required readOnly={disable} + onBlur={blurHandler} /> {iconName && (
diff --git a/src/components/Settings/Tabs/PersonalInfoTab.jsx b/src/components/Settings/Tabs/PersonalInfoTab.jsx index 5b4ea3a..5414e5d 100644 --- a/src/components/Settings/Tabs/PersonalInfoTab.jsx +++ b/src/components/Settings/Tabs/PersonalInfoTab.jsx @@ -7,6 +7,41 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner"; import {toast} from 'react-toastify' +import {Formik, Form} from 'formik' +import * as Yup from 'yup' + +const validationSchema = Yup.object().shape({ + email: Yup.string() + .email('Wrong email format') + .min(3, 'Minimum 3 characters') + .max(50, 'Maximum 50 characters') + .required('Email is required'), + firstname: Yup.string() + .min(3, 'Minimum 3 characters') + .max(25, 'Maximum 25 characters') + .required('Firstname is required'), + lastname: Yup.string() + .min(3, 'Minimum 3 characters') + .max(25, 'Maximum 25 characters') + .required('Lastname is required'), + city: Yup.string() + .min(3, 'Minimum 3 characters') + .max(25, 'Maximum 25 characters') + .required('City is required'), + state: Yup.string() + .min(3, 'Minimum 3 characters') + .max(25, 'Maximum 25 characters') + .required('State is required'), +}) + +const initialValues = { + firstname: '', + lastname: '', + state: '', + city: '', + email: '' +} + export default function PersonalInfoTab({ datas, frstNmeHndlr, @@ -47,40 +82,18 @@ export default function PersonalInfoTab({ email: '' }) - const handleChange = ({target:{name, value}}) => { - setInputs(prev => ({...prev, [name]:value})) - } + // const handleChange = ({target:{name, value}}) => { + // setInputs(prev => ({...prev, [name]:value})) + // } - const handleUpdateUser = ()=> { + const handleUpdateUser = (values, helpers)=> { setRequestState({message: '', loading: true, status: false}) - - let {firstname, lastname, state, city, email} = inputs - - if(!firstname || !lastname || !state || !city || !email){ - setRequestState({message: 'Please Fill all fields', loading: false, status: false}) - return - } - - //checks if email is a valid email address - let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/; - if (regEx.test(email) == false) { - setRequestState({message: 'Your Email is Invalid', loading: false, status: false}) - return - } - - apiCall.updateProfile(inputs).then((res)=>{ + apiCall.updateProfile(values).then((res)=>{ if(res.data.internal_return < 0){ setRequestState({message: 'Profile Was unable to update', loading: false, status: false}) return } - setInputs({ - firstname: '', - lastname: '', - state: '', - city: '', - email: '' - }) // setRequestState({message: 'Profile update successfully', loading: false, status: true}) toast.success("Update Successful"); setTimeout(()=>{navigate('/',{replace:true})},1000) @@ -89,7 +102,7 @@ export default function PersonalInfoTab({ }) } - const loadProfile = ()=>{ + const loadProfile = ()=>{ // function to load user profile apiCall.loadProfile().then((res)=>{ if(res.data.internal_return < 0){ setProfile(prev => ({...prev, loading: false, status: true})) @@ -113,224 +126,243 @@ export default function PersonalInfoTab({ },[]) return ( -
- - {profile.loading ? -
- -
- : - profile.data.length ? - profile.data.map((item, index) => ( -
-
-
- {/* inputs starts here */} - {/* username */} -
- -
- {/* Email */} -
- -
- {/* first name and last name */} -
-
- -
-
- -
-
- - {/* Country */} -
- -
- - {/* State/Province */} -
- -
- - {/* City */} -
- -
- - {/* Preferred Communication*/} -
- -
-
-
- - Email -
-
- - Phone -
-
-
-
- - {/* Allow Promotions */} -
- -
setTogglePromotion(prev => !prev)}> -
-
-
-
-
- {/* inputs ends here */} -
-
-
-
-

- Update Profile - - - -

-

- Profile of at least Size - - 300x300 - - . Gifs work too. - - Max 5mb - - . -

-
-
- - profileImgChangHandler(e)} - type="file" - className="hidden" - /> -
- - - - -
-
-
-
-
-
- )) - : - profile.status ? -
No User Information Found!
- : -
Opps! something went wrong. Try Again Later!
- } - -
- {requestStatus.message != '' &&

{requestStatus.message}

} -
-
- - - {" "} - Cancel - - - - {requestStatus.loading ? - - : - - } -
+ profile.loading ? +
+
+
-
+ : +
+ + {(props => { + return ( +
+ { + profile.data.length ? + profile.data.map((item, index) => ( +
+
+
+ {/* inputs starts here */} + {/* username */} +
+ +
+ + {/* Email */} +
+ + {(props.errors.email && props.touched.email) &&

{props.errors.email}

} +
+ {/* first name and last name */} +
+
+ + {(props.errors.firstname && props.touched.firstname) &&

{props.errors.firstname}

} +
+
+ + {(props.errors.lastname && props.touched.lastname) &&

{props.errors.lastname}

} +
+
+ + {/* Country */} +
+ +
+ + {/* State/Province */} +
+ + {(props.errors.state && props.touched.state) &&

{props.errors.state}

} +
+ + {/* City */} +
+ + {(props.errors.city && props.touched.city) &&

{props.errors.city}

} +
+ + {/* Preferred Communication*/} +
+ +
+
+
+ + Email +
+
+ + Phone +
+
+
+
+ + {/* Allow Promotions */} +
+ +
setTogglePromotion(prev => !prev)}> +
+
+
+
+
+ {/* inputs ends here */} +
+
+
+
+

+ Update Profile + + + +

+

+ Profile of at least Size + + 300x300 + + . Gifs work too. + + Max 5mb + + . +

+
+
+ + profileImgChangHandler(e)} + type="file" + className="hidden" + /> +
+ + + + +
+
+
+
+
+
+ )) + : + profile.status ? +
No User Information Found!
+ : +
Opps! something went wrong. Try Again Later!
+ } +
+ {requestStatus.message != '' &&

{requestStatus.message}

} +
+
+ + + {" "} + Cancel + + + + {requestStatus.loading ? + + : + + } +
+
+
+
+ ) + })} + +
); }