From 83a1ba37be66845e477d00dbbfda1e0810c13157 Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko Date: Tue, 26 Sep 2023 20:14:19 +0300 Subject: [PATCH 1/5] done validation on params form and fix BG image sticking to the right on Desktop breakpoint --- src/App.jsx | 6 +- src/components/ParamsForm/ParamsForm.jsx | 626 ++++++++++-------- .../SharedLayout/SheradLayout.styled.jsx | 1 + 3 files changed, 360 insertions(+), 273 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index e446be6d..fa2747dd 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -66,10 +66,12 @@ function App() { path="/products" element={} redirectTo="/" />} /> - } redirectTo="/" />} - /> + /> */} + + } /> } redirectTo="/" />} diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index d59a4d78..17c68a2c 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -24,7 +24,6 @@ import { BtnsAndBlock, BtnSubmit, CalendarWrapper, - CalendarPlaceholder, } from './ParamsForm.styled'; import { colors as palette } from '../../utils'; import { mg } from '../../utils'; @@ -39,7 +38,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { const navigate = useNavigate(); const dispatch = useDispatch(); - const maxDate = sub(new Date(), { years: 18 }); + const maxDate = sub(new Date() - 86400000, { years: 18 }); const minDate = sub(new Date(), { years: 70 }); return ( @@ -53,12 +52,9 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { sex: '', levelActivity: '', }} - onSubmit={async (values, Formik) => { - if (Object.values(values).includes('')) { - Notiflix.Notify.warning('PLEASE, FILL ALL FIELDS'); - return; - } - + validationSchema={paramsSchema} + validateOnMount={true} + onSubmit={(values, Formik) => { const newParams = { ...values, blood: Number(values.blood), @@ -74,76 +70,294 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { setSteps(1); }} - validationSchema={paramsSchema} > - {({ handleChange, values, setFieldValue }) => ( -
- - - - - <SubTitle - text={ - 'To ensure a personalized user experience and the proper functioning of our platform, we ask you to provide the following information about your weight, height and other relevant data: ' - } - /> - - <InputGroup> - <FormikField - type="number" - name="height" - placeholder="Height" - autoComplete="off" + {({ handleChange, values, setFieldValue, errors, touched }) => { + return ( + <Form> + <Swiper + spaceBetween={10} + allowTouchMove={false} + onSwiper={setSwiperRef} + > + <SwiperSlide> + <Title text={'Get closer to your goals!'} margin={mg} /> + + <SubTitle + text={ + 'To ensure a personalized user experience and the proper functioning of our platform, we ask you to provide the following information about your weight, height and other relevant data: ' + } /> - <FormikField - type="number" - name="currentWeight" - placeholder="Current Weight" - autoComplete="off" - /> - <FormikField - type="number" - name="desiredWeight" - placeholder="Desired Weight" - autoComplete="off" - /> - <CalendarWrapper> - <Calendar - name="birthday" - value={values.birthday} - maxDate={maxDate} - minDate={minDate} - dateFormat="dd.MM.yyyy" - showYearDropdown - onChange={setFieldValue} - /> - {values.birthday ? ( - '' - ) : ( - <CalendarPlaceholder>Birthday</CalendarPlaceholder> + + <InputGroup> + <div> + <FormikField + type="number" + name="height" + placeholder="Height" + autoComplete="off" + /> + {errors.height && touched.height && ( + <p + style={{ + color: 'red', + paddingLeft: '10px', + fontSize: '7px', + }} + > + {errors.height} + </p> + )} + </div> + <div> + <FormikField + type="number" + name="currentWeight" + placeholder="Current Weight" + autoComplete="off" + /> + {errors.currentWeight && touched.currentWeight && ( + <p + style={{ + color: 'red', + paddingLeft: '10px', + fontSize: '7px', + }} + > + {errors.currentWeight} + </p> + )} + </div> + <div> + <FormikField + type="number" + name="desiredWeight" + placeholder="Desired Weight" + autoComplete="off" + /> + {errors.desiredWeight && touched.desiredWeight && ( + <p + style={{ + color: 'red', + paddingLeft: '10px', + fontSize: '7px', + }} + > + {errors.desiredWeight} + </p> + )} + </div> + <CalendarWrapper> + <Calendar + name="birthday" + value={values.birthday} + maxDate={maxDate} + minDate={minDate} + dateFormat="dd.MM.yyyy" + showYearDropdown + onChange={setFieldValue} + /> + </CalendarWrapper> + + {errors.birthday && ( + <p + style={{ + color: 'red', + paddingLeft: '10px', + fontSize: '7px', + }} + > + {errors.birthday} + </p> )} - </CalendarWrapper> - </InputGroup> + </InputGroup> + + <ParamsBtn setSteps={setSteps} type={'next'} step={2} /> - <ParamsBtn setSteps={setSteps} type={'next'} step={2} /> + <ParamsBlockCard type={'grey'} data={350} /> - <ParamsBlockCard type={'grey'} data={350} /> + <ParamsBlockCard data={100} measure={'users'} type={'orange'} /> + </SwiperSlide> - <ParamsBlockCard data={100} measure={'users'} type={'orange'} /> - </SwiperSlide> + <SwiperSlide> + <Title text={'Get closer to your goals!'} margin={mg} /> + + <FormControl style={{ marginBottom: '28px' }}> + <FormRadioBtnGroupWrapper> + <RadioGroup + aria-labelledby="demo-radio-buttons-group-label" + name="radio-buttons-group1" + > + {errors.blood && touched.blood && ( + <p + style={{ + color: 'red', + fontSize: '7px', + }} + > + {errors.blood} + </p> + )} + <FormLabel + style={{ + color: `${palette.white}`, + fontSize: '14px', + fontWeight: 400, + lineHeight: '128.571%', + }} + > + Blood: + </FormLabel> + + <FormControlLabel + name="blood" + onChange={handleChange} + value="1" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="1" + /> + <FormControlLabel + name="blood" + onChange={handleChange} + value="2" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="2" + /> + <FormControlLabel + name="blood" + onChange={handleChange} + value="3" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="3" + /> + <FormControlLabel + name="blood" + onChange={handleChange} + value="4" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="4" + /> + </RadioGroup> - <SwiperSlide> - <Title text={'Get closer to your goals!'} margin={mg} /> + <RadioGroup + aria-labelledby="demo-radio-buttons-group-label" + name="radio-buttons-group2" + style={{ marginLeft: '64px' }} + > + {errors.sex && touched.sex && ( + <p + style={{ + color: 'red', + fontSize: '7px', + }} + > + {errors.sex} + </p> + )} + + <FormLabel + style={{ + color: `${palette.white}`, + fontSize: '14px', + fontWeight: 400, + lineHeight: '128.571%', + }} + > + Sex: + </FormLabel> + + <FormControlLabel + name="sex" + onChange={handleChange} + value="male" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="male" + /> + <FormControlLabel + name="sex" + onChange={handleChange} + value="female" + control={ + <Radio + sx={{ + color: 'grey', + '&.Mui-checked': { + color: colors.orange[800], + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, + }} + /> + } + label="female" + /> + </RadioGroup> + </FormRadioBtnGroupWrapper> - <FormControl style={{ marginBottom: '28px' }}> - <FormRadioBtnGroupWrapper> <RadioGroup aria-labelledby="demo-radio-buttons-group-label" - name="radio-buttons-group1" + name="radio-buttons-group3" + style={{ padding: '2px' }} > <FormLabel style={{ @@ -153,11 +367,21 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { lineHeight: '128.571%', }} > - Blood: + Level: </FormLabel> + {errors.levelActivity && touched.levelActivity && ( + <p + style={{ + color: 'red', + fontSize: '7px', + }} + > + {errors.levelActivity} + </p> + )} <FormControlLabel - name="blood" + name="levelActivity" onChange={handleChange} value="1" control={ @@ -173,10 +397,11 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { }} /> } - label="1" + label="Sedentary lifestyle (little or no physical activity)" /> + <FormControlLabel - name="blood" + name="levelActivity" onChange={handleChange} value="2" control={ @@ -192,10 +417,12 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { }} /> } - label="2" + label="Light activity (light exercises/sports 1-3 days per + week)" /> + <FormControlLabel - name="blood" + name="levelActivity" onChange={handleChange} value="3" control={ @@ -211,10 +438,12 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { }} /> } - label="3" + label=" Moderately active (moderate exercises/sports 3-5 days + per week)" /> + <FormControlLabel - name="blood" + name="levelActivity" onChange={handleChange} value="4" control={ @@ -230,48 +459,13 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { }} /> } - label="4" + label="Very active (intense exercises/sports 6-7 days per week)" /> - </RadioGroup> - <RadioGroup - aria-labelledby="demo-radio-buttons-group-label" - name="radio-buttons-group2" - style={{ marginLeft: '64px' }} - > - <FormLabel - style={{ - color: `${palette.white}`, - fontSize: '14px', - fontWeight: 400, - lineHeight: '128.571%', - }} - > - Sex: - </FormLabel> <FormControlLabel - name="sex" - onChange={handleChange} - value="male" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } - label="male" - /> - <FormControlLabel - name="sex" + name="levelActivity" onChange={handleChange} - value="female" + value="5" control={ <Radio sx={{ @@ -285,160 +479,50 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { }} /> } - label="female" + label="Extremely active (very strenuous exercises/sports and + physical work)" /> </RadioGroup> - </FormRadioBtnGroupWrapper> + </FormControl> - <RadioGroup - aria-labelledby="demo-radio-buttons-group-label" - name="radio-buttons-group3" - style={{ padding: '2px' }} - > - <FormLabel - style={{ - color: `${palette.white}`, - fontSize: '14px', - fontWeight: 400, - lineHeight: '128.571%', - }} - > - Level: - </FormLabel> - - <FormControlLabel - name="levelActivity" - onChange={handleChange} - value="1" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } - label="Sedentary lifestyle (little or no physical activity)" - /> - - <FormControlLabel - name="levelActivity" - onChange={handleChange} - value="2" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } - label="Light activity (light exercises/sports 1-3 days per - week)" - /> - - <FormControlLabel - name="levelActivity" - onChange={handleChange} - value="3" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } - label=" Moderately active (moderate exercises/sports 3-5 days - per week)" - /> - - <FormControlLabel - name="levelActivity" - onChange={handleChange} - value="4" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } - label="Very active (intense exercises/sports 6-7 days per week)" - /> - - <FormControlLabel - name="levelActivity" - onChange={handleChange} - value="5" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> + <BtnsAndBlock> + <ParamsBtn setSteps={setSteps} type={'back'} step={1} /> + <ParamsBtn setSteps={setSteps} type={'next'} step={3} /> + + <ParamsBlockCard data={350} type={'grey'} step={'2'} /> + </BtnsAndBlock> + + <ParamsBlockCard type={'orange'} data={24} measure={'hours'} /> + </SwiperSlide> + <SwiperSlide> + <Title text={'Dear user'} margin={mg} /> + + <SubTitle + text={ + ' Thank you for filling in all the required data. We greatl appreciate your cooperation and commitment to a health lifestyle. The collected information will allow us to provide you with a more individual and personalized approach.' + } + /> + + <BtnSubmit + type="submit" + onClick={() => { + if (Object.values(values).includes('')) { + Notiflix.Notify.warning('Please, fill all fields'); } - label="Extremely active (very strenuous exercises/sports and - physical work)" - /> - </RadioGroup> - </FormControl> - - <BtnsAndBlock> - <ParamsBtn setSteps={setSteps} type={'back'} step={1} /> - <ParamsBtn setSteps={setSteps} type={'next'} step={3} /> - - <ParamsBlockCard data={350} type={'grey'} step={'2'} /> - </BtnsAndBlock> - - <ParamsBlockCard type={'orange'} data={24} measure={'hours'} /> - </SwiperSlide> - <SwiperSlide> - <Title text={'Dear user'} margin={mg} /> - - <SubTitle - text={ - ' Thank you for filling in all the required data. We greatl appreciate your cooperation and commitment to a health lifestyle. The collected information will allow us to provide you with a more individual and personalized approach.' - } - /> - - <BtnSubmit type="submit">Go</BtnSubmit> - - <ParamsBtn setSteps={setSteps} type={'back'} step={2} /> - - <ParamsBlockCard data={350} type={'grey'} /> - <ParamsBlockCard data={300} measure={'ex'} type={'orange'} /> - </SwiperSlide> - </Swiper> - </Form> - )} + }} + > + Go + </BtnSubmit> + + <ParamsBtn setSteps={setSteps} type={'back'} step={2} /> + + <ParamsBlockCard data={350} type={'grey'} /> + <ParamsBlockCard data={300} measure={'ex'} type={'orange'} /> + </SwiperSlide> + </Swiper> + </Form> + ); + }} </Formik> ); }; @@ -449,13 +533,13 @@ ParamsForm.propTypes = { }; const paramsSchema = Yup.object({ - height: Yup.number().min(150).max(250), - currentWeight: Yup.number().min(35).max(400), - desiredWeight: Yup.number().min(35).max(400), - birthday: Yup.string(), - blood: Yup.string(), - sex: Yup.string(), - levelActivity: Yup.number(), + height: Yup.number().min(150).max(250).required('Field is required'), + currentWeight: Yup.number().min(35).max(400).required('Field is required'), + desiredWeight: Yup.number().min(35).max(400).required('Field is required'), + birthday: Yup.string().required(), + blood: Yup.string().required(), + sex: Yup.string().required(), + levelActivity: Yup.number().required(), }); export default ParamsForm; diff --git a/src/components/SharedLayout/SheradLayout.styled.jsx b/src/components/SharedLayout/SheradLayout.styled.jsx index 014deacf..9ed1fa3a 100644 --- a/src/components/SharedLayout/SheradLayout.styled.jsx +++ b/src/components/SharedLayout/SheradLayout.styled.jsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { mq } from '../../utils'; export const Container = styled.div` + position: relative; margin: 0px auto; ${mq.mobile} { From 776e6fc49528b861e60f43cf1a2fbeb16b798505 Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko <cheba@MacBook-Pro-Nikita.local> Date: Tue, 26 Sep 2023 20:17:14 +0300 Subject: [PATCH 2/5] unclg Private Route --- src/App.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index fa2747dd..e446be6d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -66,12 +66,10 @@ function App() { path="/products" element={<PrivateRoute component={<Products />} redirectTo="/" />} /> - {/* <Route + <Route path="/params" element={<PrivateRoute component={<Params />} redirectTo="/" />} - /> */} - - <Route path="/params" element={<Params />} /> + /> <Route path="/exercises" element={<PrivateRoute component={<Exercises />} redirectTo="/" />} From 51d619d5f85a34c616433554d797ffd2e667fac2 Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko <cheba@MacBook-Pro-Nikita.local> Date: Wed, 27 Sep 2023 16:33:49 +0300 Subject: [PATCH 3/5] huge fix params page and form --- src/App.jsx | 5 +- src/components/ParamsBar/ParamsBar.jsx | 73 +++-- src/components/ParamsBtn/ParamsBtn.jsx | 27 +- src/components/ParamsForm/ParamsForm.jsx | 302 +++--------------- .../ParamsForm/ParamsForm.styled.jsx | 23 ++ src/pages/Params/Params.jsx | 2 +- 6 files changed, 151 insertions(+), 281 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 51302ce9..d7d373fe 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -66,10 +66,11 @@ function App() { path="/products" element={<PrivateRoute component={<Products />} redirectTo="/" />} /> - <Route + {/* <Route path="/params" element={<PrivateRoute component={<Params />} redirectTo="/" />} - /> + /> */} + <Route path="/params" element={<Params />} /> <Route path="/exercises" element={<PrivateRoute component={<Exercises />} redirectTo="/" />} diff --git a/src/components/ParamsBar/ParamsBar.jsx b/src/components/ParamsBar/ParamsBar.jsx index ded2330b..7aaf5bbb 100644 --- a/src/components/ParamsBar/ParamsBar.jsx +++ b/src/components/ParamsBar/ParamsBar.jsx @@ -2,36 +2,67 @@ import { ProgressBar, BarItem } from './ParamsBar.styled'; import PropTypes from 'prop-types'; import { colors as palette } from '../../utils'; -const ParamsBar = ({ steps }) => { - return ( - <ProgressBar> - <BarItem +const ParamsBar = ({ steps, setSteps }) => { + const Btn = ({ steps, step, setSteps, children }) => { + return ( + <button style={{ - background: steps >= 1 && `${palette.orangeSecondary}`, - boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + margin: '0', + padding: '30px 0px', + border: 'none', + backgroundColor: ' rgba(0, 0, 0, 0)', + cursor: 'pointer', }} - ></BarItem> - <BarItem - style={{ - background: steps >= 2 && steps > 1 && `${palette.orangeSecondary}`, - boxShadow: - steps >= 2 && - steps > 1 && - '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', - }} - ></BarItem> - <BarItem - style={{ - background: steps === 3 && `${palette.orangeSecondary}`, - boxShadow: steps === 3 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + onClick={() => { + if (steps > 1) { + setSteps(step); + } }} - ></BarItem> + > + {children} + </button> + ); + }; + + return ( + <ProgressBar> + <Btn step={1} setSteps={setSteps} steps={steps}> + <BarItem + style={{ + background: steps >= 1 && `${palette.orangeSecondary}`, + boxShadow: steps >= 1 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + }} + ></BarItem> + </Btn> + + <Btn step={2} setSteps={setSteps} steps={steps}> + <BarItem + style={{ + background: steps >= 2 && steps > 1 && `${palette.orangeSecondary}`, + boxShadow: + steps >= 2 && + steps > 1 && + '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + }} + ></BarItem> + </Btn> + <Btn> + <BarItem + style={{ + background: steps === 3 && `${palette.orangeSecondary}`, + boxShadow: steps === 3 && '0px 1px 10px 0px rgba(230, 83, 60, 0.8)', + }} + ></BarItem> + </Btn> </ProgressBar> ); }; ParamsBar.propTypes = { steps: PropTypes.number.isRequired, + step: PropTypes.number, + setSteps: PropTypes.func.isRequired, + children: PropTypes.any, }; export default ParamsBar; diff --git a/src/components/ParamsBtn/ParamsBtn.jsx b/src/components/ParamsBtn/ParamsBtn.jsx index 36ac8399..8b7f31aa 100644 --- a/src/components/ParamsBtn/ParamsBtn.jsx +++ b/src/components/ParamsBtn/ParamsBtn.jsx @@ -1,13 +1,34 @@ import PropTypes from 'prop-types'; import { BtnNav, Svg } from './ParamsBtn.styled'; +import Notiflix from 'notiflix'; -const ParamsBtn = ({ setSteps, type, step }) => { +const ParamsBtn = ({ setSteps, type, step, values }) => { if (type === 'next') { return ( <BtnNav type="button" onClick={() => { - setSteps(step); + if ( + step === 2 && + values.height !== '' && + values.currentWeight !== '' && + values.desiredWeight !== '' + ) { + setSteps(step); + return; + } + + if ( + step === 3 && + values.blood !== '' && + values.sex !== '' && + values.levelActivity !== '' + ) { + setSteps(step); + return; + } + + Notiflix.Notify.warning('pls fill all fields'); }} > Next @@ -39,6 +60,8 @@ ParamsBtn.propTypes = { setSteps: PropTypes.func.isRequired, type: PropTypes.string, step: PropTypes.number.isRequired, + validate: PropTypes.func, + values: PropTypes.object, }; export default ParamsBtn; diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx index 17c68a2c..35bcad3c 100644 --- a/src/components/ParamsForm/ParamsForm.jsx +++ b/src/components/ParamsForm/ParamsForm.jsx @@ -1,10 +1,9 @@ -import { Formik, Form } from 'formik'; +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; import PropTypes from 'prop-types'; +import { Formik, Form } from 'formik'; import * as Yup from 'yup'; -import { useNavigate } from 'react-router-dom'; -import { useDispatch } from 'react-redux'; import { Swiper, SwiperSlide } from 'swiper/react'; -import Notiflix from 'notiflix'; import 'swiper/css'; import { FormControl, @@ -12,7 +11,6 @@ import { FormControlLabel, RadioGroup, Radio, - colors, } from '@mui/material'; import { sub } from 'date-fns'; @@ -24,15 +22,16 @@ import { BtnsAndBlock, BtnSubmit, CalendarWrapper, + ErrorMessage, + RADIO_STYLE_OPTIONS, + RADIO_TITLE_STYLE, } from './ParamsForm.styled'; -import { colors as palette } from '../../utils'; -import { mg } from '../../utils'; - import ParamsBlockCard from '../ParamsBlockŠ”ard'; import ParamsBtn from '../ParamsBtn'; import Title from '../Title/Title'; import SubTitle from '../SubTitle/SubTitle'; import Calendar from '../Calendar/Calendar'; +import { mg } from '../../utils'; const ParamsForm = ({ setSteps, setSwiperRef }) => { const navigate = useNavigate(); @@ -67,8 +66,6 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { navigate('/diary'); Formik.resetForm(); - - setSteps(1); }} > {({ handleChange, values, setFieldValue, errors, touched }) => { @@ -97,17 +94,12 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { autoComplete="off" /> {errors.height && touched.height && ( - <p - style={{ - color: 'red', - paddingLeft: '10px', - fontSize: '7px', - }} - > + <ErrorMessage padding={true}> {errors.height} - </p> + </ErrorMessage> )} </div> + <div> <FormikField type="number" @@ -116,17 +108,12 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { autoComplete="off" /> {errors.currentWeight && touched.currentWeight && ( - <p - style={{ - color: 'red', - paddingLeft: '10px', - fontSize: '7px', - }} - > + <ErrorMessage padding={true}> {errors.currentWeight} - </p> + </ErrorMessage> )} </div> + <div> <FormikField type="number" @@ -135,17 +122,12 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { autoComplete="off" /> {errors.desiredWeight && touched.desiredWeight && ( - <p - style={{ - color: 'red', - paddingLeft: '10px', - fontSize: '7px', - }} - > + <ErrorMessage padding={true}> {errors.desiredWeight} - </p> + </ErrorMessage> )} </div> + <CalendarWrapper> <Calendar name="birthday" @@ -157,21 +139,14 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { onChange={setFieldValue} /> </CalendarWrapper> - - {errors.birthday && ( - <p - style={{ - color: 'red', - paddingLeft: '10px', - fontSize: '7px', - }} - > - {errors.birthday} - </p> - )} </InputGroup> - <ParamsBtn setSteps={setSteps} type={'next'} step={2} /> + <ParamsBtn + setSteps={setSteps} + type={'next'} + step={2} + values={values} + /> <ParamsBlockCard type={'grey'} data={350} /> @@ -188,100 +163,36 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="radio-buttons-group1" > {errors.blood && touched.blood && ( - <p - style={{ - color: 'red', - fontSize: '7px', - }} - > - {errors.blood} - </p> + <ErrorMessage>{errors.blood}</ErrorMessage> )} - <FormLabel - style={{ - color: `${palette.white}`, - fontSize: '14px', - fontWeight: 400, - lineHeight: '128.571%', - }} - > - Blood: - </FormLabel> + <FormLabel style={RADIO_TITLE_STYLE}>Blood:</FormLabel> <FormControlLabel name="blood" onChange={handleChange} value="1" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="1" /> <FormControlLabel name="blood" onChange={handleChange} value="2" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="2" /> <FormControlLabel name="blood" onChange={handleChange} value="3" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="3" /> <FormControlLabel name="blood" onChange={handleChange} value="4" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="4" /> </RadioGroup> @@ -292,63 +203,23 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { style={{ marginLeft: '64px' }} > {errors.sex && touched.sex && ( - <p - style={{ - color: 'red', - fontSize: '7px', - }} - > - {errors.sex} - </p> + <ErrorMessage>{errors.sex}</ErrorMessage> )} - <FormLabel - style={{ - color: `${palette.white}`, - fontSize: '14px', - fontWeight: 400, - lineHeight: '128.571%', - }} - > - Sex: - </FormLabel> + <FormLabel style={RADIO_TITLE_STYLE}>Sex:</FormLabel> <FormControlLabel name="sex" onChange={handleChange} value="male" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="male" /> <FormControlLabel name="sex" onChange={handleChange} value="female" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="female" /> </RadioGroup> @@ -359,44 +230,16 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="radio-buttons-group3" style={{ padding: '2px' }} > - <FormLabel - style={{ - color: `${palette.white}`, - fontSize: '14px', - fontWeight: 400, - lineHeight: '128.571%', - }} - > - Level: - </FormLabel> + <FormLabel style={RADIO_TITLE_STYLE}>Level:</FormLabel> {errors.levelActivity && touched.levelActivity && ( - <p - style={{ - color: 'red', - fontSize: '7px', - }} - > - {errors.levelActivity} - </p> + <ErrorMessage>{errors.levelActivity}</ErrorMessage> )} <FormControlLabel name="levelActivity" onChange={handleChange} value="1" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="Sedentary lifestyle (little or no physical activity)" /> @@ -404,19 +247,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="levelActivity" onChange={handleChange} value="2" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="Light activity (light exercises/sports 1-3 days per week)" /> @@ -425,19 +256,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="levelActivity" onChange={handleChange} value="3" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label=" Moderately active (moderate exercises/sports 3-5 days per week)" /> @@ -446,19 +265,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="levelActivity" onChange={handleChange} value="4" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="Very active (intense exercises/sports 6-7 days per week)" /> @@ -466,19 +273,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { name="levelActivity" onChange={handleChange} value="5" - control={ - <Radio - sx={{ - color: 'grey', - '&.Mui-checked': { - color: colors.orange[800], - }, - '& .MuiSvgIcon-root': { - fontSize: 18, - }, - }} - /> - } + control={<Radio sx={RADIO_STYLE_OPTIONS} />} label="Extremely active (very strenuous exercises/sports and physical work)" /> @@ -487,13 +282,19 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { <BtnsAndBlock> <ParamsBtn setSteps={setSteps} type={'back'} step={1} /> - <ParamsBtn setSteps={setSteps} type={'next'} step={3} /> + <ParamsBtn + setSteps={setSteps} + type={'next'} + step={3} + values={values} + /> <ParamsBlockCard data={350} type={'grey'} step={'2'} /> </BtnsAndBlock> <ParamsBlockCard type={'orange'} data={24} measure={'hours'} /> </SwiperSlide> + <SwiperSlide> <Title text={'Dear user'} margin={mg} /> @@ -503,16 +304,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => { } /> - <BtnSubmit - type="submit" - onClick={() => { - if (Object.values(values).includes('')) { - Notiflix.Notify.warning('Please, fill all fields'); - } - }} - > - Go - </BtnSubmit> + <BtnSubmit>Go</BtnSubmit> <ParamsBtn setSteps={setSteps} type={'back'} step={2} /> diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index 068739d3..fb027d27 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -140,3 +140,26 @@ export const CalendarPlaceholder = styled.p` line-height: 150%; } `; + +export const RADIO_STYLE_OPTIONS = { + color: 'grey', + '&.Mui-checked': { + color: colors.orangeSecondary, + }, + '& .MuiSvgIcon-root': { + fontSize: 18, + }, +}; + +export const RADIO_TITLE_STYLE = { + color: `${colors.white}`, + fontSize: '14px', + fontWeight: 400, + lineHeight: '128.571%', +}; + +export const ErrorMessage = styled.p` + font-size: 7px; + padding-left: ${props => (props.padding ? 10 : 0)}px; + color: ${colors.red}; +`; diff --git a/src/pages/Params/Params.jsx b/src/pages/Params/Params.jsx index 8bbd4d7a..8ff6a44e 100644 --- a/src/pages/Params/Params.jsx +++ b/src/pages/Params/Params.jsx @@ -21,7 +21,7 @@ const Params = () => { <ParamsPageWrapper steps={steps}> <ParamsForm setSwiperRef={setSwiperRef} setSteps={setSteps} /> - <ParamsBar steps={steps} /> + <ParamsBar steps={steps} setSteps={setSteps} /> </ParamsPageWrapper> </> ); From 5caf8266faae60a53f5d83a6e17d0ff4b275a9ff Mon Sep 17 00:00:00 2001 From: Nikita Chebanenko <cheba@MacBook-Pro-Nikita.local> Date: Wed, 27 Sep 2023 16:39:21 +0300 Subject: [PATCH 4/5] unclg ParamsRoute --- src/App.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d7d373fe..51302ce9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -66,11 +66,10 @@ function App() { path="/products" element={<PrivateRoute component={<Products />} redirectTo="/" />} /> - {/* <Route + <Route path="/params" element={<PrivateRoute component={<Params />} redirectTo="/" />} - /> */} - <Route path="/params" element={<Params />} /> + /> <Route path="/exercises" element={<PrivateRoute component={<Exercises />} redirectTo="/" />} From ff2002b90732d72364dfe32b6b219ec6ff373651 Mon Sep 17 00:00:00 2001 From: MargoMarm <margogerasimenko@gmail.com> Date: Wed, 27 Sep 2023 17:36:11 +0200 Subject: [PATCH 5/5] Update ParamsForm.styled.jsx --- src/components/ParamsForm/ParamsForm.styled.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ParamsForm/ParamsForm.styled.jsx b/src/components/ParamsForm/ParamsForm.styled.jsx index fb027d27..1d938826 100644 --- a/src/components/ParamsForm/ParamsForm.styled.jsx +++ b/src/components/ParamsForm/ParamsForm.styled.jsx @@ -20,7 +20,11 @@ export const InputGroup = styled.div` `; export const FormikField = styled(Field)` - width: 155px; + width: 275px; + + ${mq.mobile} { + width: 155px; + } height: 52px; padding: 14px 0 14px 14px; margin: 7px; @@ -159,7 +163,8 @@ export const RADIO_TITLE_STYLE = { }; export const ErrorMessage = styled.p` - font-size: 7px; + width: 155px; + font-size: 11px; padding-left: ${props => (props.padding ? 10 : 0)}px; color: ${colors.red}; `;