WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added validation to update family component #449

Merged
ameye merged 1 commits from update-family-validation into master 2023-10-23 16:37:19 +00:00
Conversation 0 Commits 1 Files Changed 4
+164 -137
4 changed files with 164 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+5 -1
View File
@@ -91,4 +91,8 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
#GOOGLE RECAPTCHA SITEKEY
REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
#FAMILY MEMBER MINIMUM AGE
REACT_APP_FAMILY_MINIMUM_AGE=4
REACT_APP_FAMILY_MAXIMUM_AGE=18
.env.development
+5 -1
View File
@@ -59,4 +59,8 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
#GOOGLE RECAPTCHA SITEKEY
REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
#FAMILY MEMBER MINIMUM AGE
REACT_APP_FAMILY_MINIMUM_AGE=4
REACT_APP_FAMILY_MAXIMUM_AGE=18
.env.production
+4
View File
@@ -66,3 +66,7 @@ REACT_APP_SHOW_UPLOAD_PROFILE_PICTURE=0
#GOOGLE RECAPTCHA SITEKEY
REACT_APP_GOOGLE_RECAPTCHA_SITEKEY=6Ld_qKooAAAAADNL1TPzRLmcBA8vlpvx__39Rj39
#6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
#FAMILY MEMBER MINIMUM AGE
REACT_APP_FAMILY_MINIMUM_AGE=4
REACT_APP_FAMILY_MAXIMUM_AGE=18
src/components/FamilyAcc/Tabs/FamilyProfile.jsx
+150 -135
View File
@@ -4,36 +4,66 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
import usersService from "../../../services/UsersService";
import { useNavigate } from "react-router-dom";
import { Formik, Form } from "formik";
import * as Yup from "yup";
export default function FamilyProfile({familyData, className }) {
const validationSchema = Yup.object().shape({
firstname: Yup.string()
.required("Firstname is required"),
lastname: Yup.string()
// .min(3, "Minimum 3 characters")
// .max(25, "Maximum 25 characters")
.required("Lastname is required"),
year: Yup.number()
.required("Year is required")
.min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
.max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
month: Yup.number()
.required("Month is required")
.min(1, "Month is required"),
});
const navigate = useNavigate()
const api = new usersService()
let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
let [updateDetails, setUpdateDetails] = useState({
// let [updateDetails, setUpdateDetails] = useState({
// family_uid: familyData.uid,
// firstname: familyData.firstname,
// lastname: familyData.lastname,
// year: familyData.year,
// month: familyData.month,
// action: 22020
// })
// initial values for formik
let initialValues = {
family_uid: familyData.uid,
firstname: familyData.firstname,
lastname: familyData.lastname,
year: familyData.year,
month: familyData.month,
action: 22020
})
};
const handleChange = ({target:{name, value}})=>{
setUpdateDetails(prev => ({...prev, [name]:value}))
}
const updateFamily = () => {
const updateFamily = (values, helpers) => {
setRequestStatus({loading:true, status:false, message: ''})
let {firstname, lastname, year, month} = updateDetails
if(!firstname || !lastname || !year || !month) {
setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
return setTimeout(()=>{
setRequestStatus({loading:false, status:false, message: ''})
}, 5000)
}
api.getFamilyUpdate(updateDetails).then(res=>{
// let {firstname, lastname, year, month} = updateDetails
// if(!firstname || !lastname || year == 0 || month == 0) {
// setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
// return setTimeout(()=>{
// setRequestStatus({loading:false, status:false, message: ''})
// }, 5000)
// }
api.getFamilyUpdate(values).then(res=>{
if(res.data.internal_return < 0){
return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
}
@@ -56,103 +86,122 @@ export default function FamilyProfile({familyData, className }) {
className || ""
}`}
>
<form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
<InputCom
placeholder="Firstname"
label="First Name:"
name="firstname"
type="text"
parentClass="flex items-center gap-1 w-full"
labelClass="flex-[0.2] mb-0"
inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
fieldClass="px-2"
value={updateDetails?.firstname}
inputHandler={handleChange}
/>
<InputCom
placeholder="Lastname"
label="Last Name:"
name="lastname"
type="text"
parentClass="flex items-center gap-1 w-full"
labelClass="flex-[0.2] mb-0"
inputClass="flex-[0.8] input-curve lg border border-[#dce4e9]"
fieldClass="px-2"
value={updateDetails?.lastname}
inputHandler={handleChange}
/>
<div className="input-com mb-7 flex flex-col gap-1 w-full">
{/* Age dropdown */}
<div className="">
<label
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
htmlFor="age-selection"
>
Birthday: (Year/Month)
</label>
</div>
<YearMonthDropdowns
handleChange={handleChange}
selectedMonth={updateDetails.month}
selectedYear={updateDetails.year}
/>
</div>
{requestStatus.message && (
<div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
{requestStatus.message}
</div>
)}
<div className="flex justify-end w-full">
{requestStatus.loading ?
<>
<div className="signup btn-loader"></div>
<LoadingSpinner size='4' />
</>
:
<button
type="button"
onClick={updateFamily}
// className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
>
Update
</button>
}
</div>
</form>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={updateFamily}
>
{(props) => {
return (
<Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
<InputCom
placeholder="Firstname"
label="First Name:"
name="firstname"
type="text"
parentClass="flex items-center gap-1 w-full"
labelClass="flex-[0.2] mb-0"
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
fieldClass="px-2"
value={props.values.firstname}
inputHandler={props.handleChange}
/>
<InputCom
placeholder="Lastname"
label="Last Name:"
name="lastname"
type="text"
parentClass="flex items-center gap-1 w-full"
labelClass="flex-[0.2] mb-0"
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
fieldClass="px-2"
value={props.values?.lastname}
inputHandler={props.handleChange}
/>
<div className="input-com mb-7 flex flex-col gap-1 w-full">
{/* Age dropdown */}
<div className="">
<label
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
htmlFor="age-selection"
>
Birthday: (Year/Month)
</label>
{((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
<span className="text-[12px] text-red-500">
{' '}{props.errors.year || props.errors.month}
</span>
)}
</div>
<div className="flex max-w-[330px] w-full self-end gap-4">
<select
name='year'
id="yearDropdown"
value={props.values.year}
onChange={props.handleChange}
className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
>
<option value="">Select a Year</option>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
<select
name='month'
id="monthDropdown"
// value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
onChange={props.handleChange}
className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
>
<option value="">Select a Month</option>
{months.map(({id, name}) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
</div>
</div>
{requestStatus.message && (
<div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
{requestStatus.message}
</div>
)}
<div className="flex justify-end w-full">
{requestStatus.loading ?
<>
<div className="signup btn-loader"></div>
<LoadingSpinner size='4' />
</>
:
<button
type="submit"
// onClick={updateFamily}
// className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
>
Update
</button>
}
</div>
</Form>
);
}}
</Formik>
</div>
);
}
function YearMonthDropdowns({
selectedYear,
selectedMonth,
handleChange
}) {
// Get the current year
// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
const currentYear = new Date().getFullYear();
// Generate an array of years from the current year to (currentYear - 19)
const years = Array.from({ length: 17 }, (_, index) => currentYear - index);
// Array of month names
// const months = [
// "January",
// "February",
// "March",
// "April",
// "May",
// "June",
// "July",
// "August",
// "September",
// "October",
// "November",
// "December",
// ];
const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
const months = [
{id:'1', name:"January"},
@@ -169,38 +218,4 @@ function YearMonthDropdowns({
{id:'12', name:"December"},
];
return (
<div className="flex max-w-[330px] w-full self-end gap-4">
<select
name='year'
id="yearDropdown"
value={selectedYear}
onChange={handleChange}
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
>
<option value="">Select a Year</option>
{years.map((year) => (
<option key={year} value={year}>
{year}
</option>
))}
</select>
<select
name='month'
id="monthDropdown"
value={(months.filter(month => month.id == selectedMonth)[0]?.id) || 0}
onChange={handleChange}
className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4"
>
<option value="">Select a Month</option>
{months.map(({id, name}) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
</div>
);
}