From 934d95e8229eba0abd857e641e86775c487658df Mon Sep 17 00:00:00 2001 From: Chief Bube Date: Thu, 26 Oct 2023 10:25:00 -0700 Subject: [PATCH] Added Tracking to Family Profile --- .../FamilyAcc/Tabs/FamilyProfile.jsx | 381 +++++++++++------- 1 file changed, 232 insertions(+), 149 deletions(-) diff --git a/src/components/FamilyAcc/Tabs/FamilyProfile.jsx b/src/components/FamilyAcc/Tabs/FamilyProfile.jsx index 8284164..8e946d3 100644 --- a/src/components/FamilyAcc/Tabs/FamilyProfile.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyProfile.jsx @@ -1,35 +1,42 @@ import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; -import usersService from "../../../services/UsersService"; -import { useNavigate } from "react-router-dom"; -import { Formik, Form } from "formik"; +import { Form, Formik } from "formik"; import * as Yup from "yup"; - -export default function FamilyProfile({familyData, className }) { - +export default function FamilyProfile({ familyData, className }) { const validationSchema = Yup.object().shape({ - firstname: Yup.string() - .required("Firstname is required"), + 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`), + .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() + const navigate = useNavigate(); + const api = new usersService(); - let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''}) + let [requestStatus, setRequestStatus] = useState({ + loading: false, + status: false, + message: "", + }); // let [updateDetails, setUpdateDetails] = useState({ // family_uid: familyData.uid, @@ -47,15 +54,16 @@ export default function FamilyProfile({familyData, className }) { lastname: familyData.lastname, year: familyData.year, month: familyData.month, - action: 22020 + enable_traking: familyData.enable_traking, + action: 22020, }; - - const handleChange = ({target:{name, value}})=>{ - setUpdateDetails(prev => ({...prev, [name]:value})) - } + + // const handleChange = ({ target: { name, value } }) => { + // setUpdateDetails((prev) => ({ ...prev, [name]: value })); + // }; const updateFamily = (values, helpers) => { - setRequestStatus({loading:true, status:false, message: ''}) + setRequestStatus({ loading: true, status: false, message: "" }); // let {firstname, lastname, year, month} = updateDetails // if(!firstname || !lastname || year == 0 || month == 0) { // setRequestStatus({loading:false, status:false, message: 'Please fill all fields'}) @@ -63,22 +71,38 @@ export default function FamilyProfile({familyData, className }) { // 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!'}) - } - setRequestStatus({loading:false, status:true, message: 'Family account updated'}) - setTimeout(()=>{ - navigate('/acc-family', {replace:true}) - }, 5000) - }).catch(error => { - setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'}) - }).finally(()=>{ - 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!", + }); + } + setRequestStatus({ + loading: false, + status: true, + message: "Family account updated", + }); + setTimeout(() => { + navigate("/acc-family", { replace: true }); + }, 5000); + }) + .catch((error) => { + setRequestStatus({ + loading: false, + status: false, + message: "Unable to update, try again!", + }); + }) + .finally(() => { + setTimeout(() => { + setRequestStatus({ loading: false, status: false, message: "" }); + }, 5000); + }); + }; return (
{(props) => { return ( -
- - -
- {/* Age dropdown */} -
-
- {requestStatus.message && ( -
- {requestStatus.message} -
- )} -
- {requestStatus.loading ? - <> -
- - - : - - } -
- + ); }} @@ -196,26 +281,24 @@ export default function FamilyProfile({familyData, className }) { ); } - // 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: 19 }, (_, index) => currentYear - index); - - const months = [ - {id:'1', name:"January"}, - {id:'2', name:"February"}, - {id:'3', name:"March"}, - {id:'4', name:"April"}, - {id:'5', name:"May"}, - {id:'6', name:"June"}, - {id:'7', name:"July"}, - {id:'8', name:"August"}, - {id:'9', name:"September"}, - {id:'10', name:"October"}, - {id:'11', name:"November"}, - {id:'12', name:"December"}, - ]; +// 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: 19 }, (_, index) => currentYear - index); +const months = [ + { id: "1", name: "January" }, + { id: "2", name: "February" }, + { id: "3", name: "March" }, + { id: "4", name: "April" }, + { id: "5", name: "May" }, + { id: "6", name: "June" }, + { id: "7", name: "July" }, + { id: "8", name: "August" }, + { id: "9", name: "September" }, + { id: "10", name: "October" }, + { id: "11", name: "November" }, + { id: "12", name: "December" }, +];