Merge pull request #104 from MargoMarm/features/newFeaturesAddExercis…

…eModal Features/new features add exercise modal
MargoMarm · Sep 28, 2023 · f9f5a44 · f9f5a44
2 parents 16cf94f + b06f4bc
commit f9f5a44
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 106 deletions.
diff --git a/src/assets/11.png b/src/assets/11.png
diff --git a/src/assets/cursor-disabled.png b/src/assets/cursor-disabled.png
diff --git a/src/assets/cursor-pointer.png b/src/assets/cursor-pointer.png
diff --git a/src/assets/cursor.png b/src/assets/cursor.png
diff --git a/src/components/AddExerciseForm/AddExerciseForm.jsx b/src/components/AddExerciseForm/AddExerciseForm.jsx
@@ -18,6 +18,8 @@ import {
 
 import formatDate from '../../utils/formatDate';
 import { AddButton } from '../AddProductForm/AddProductForm.styled';
+import { useDispatch } from 'react-redux';
+import { changeStatusTimer } from '../../redux/exercises/slice';
 
 export default function AddExerciseForm({ data, addExercise }) {
   const {
@@ -36,6 +38,8 @@ export default function AddExerciseForm({ data, addExercise }) {
   const [isPlaying, setIsPlaying] = useState(false);
   const [intervalId, setIntervalId] = useState(null);
 
+  const dispatch = useDispatch();
+
   const countCalory = (calory, time, exTime) => {
     const burnedCalory = Math.floor((exTime * calory) / (time * 60));
     setBurnedCalory(burnedCalory);
@@ -53,6 +57,7 @@ export default function AddExerciseForm({ data, addExercise }) {
     const intervalId = setInterval(writeTime, 1000);
     setIntervalId(intervalId);
     setIsPlaying(true);
+    dispatch(changeStatusTimer(true));
   };
 
   const stopExercise = () => {
@@ -121,14 +126,15 @@ export default function AddExerciseForm({ data, addExercise }) {
         <AddButton
           disabled={burnedCalory > 10 ? false : true}
           type="button"
-          onClick={() =>
+          onClick={() => {
             addExercise({
               id: _id,
               date,
               time: exTime,
               burnedCalories: burnedCalory,
-            })
-          }
+            });
+            dispatch(changeStatusTimer(false));
+          }}
         >
           Add to diary
         </AddButton>

diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx
@@ -29,7 +29,9 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
   const authSchema = Yup.object().shape({
     name: validateName(nameIsShown),
     email: Yup.string()
-      .matches(emailLyout, { message: 'Email must be valid! For example: [email protected]' })
+      .matches(emailLyout, {
+        message: 'Email must be valid! For example: [email protected]',
+      })
       .email('Invalid email')
       .required('Email is required'),
     password: Yup.string()
@@ -69,15 +71,81 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
       validationSchema={authSchema}
     >
       {({ handleBlur, touched, errors }) => (
-
         <FormContainer>
-          ({console.log(errors)})
-        <InputContainer>
-          {nameIsShown && (
+          <InputContainer>
+            {nameIsShown && (
+              <InputWrapper>
+                <TextInput
+                  id="name"
+                  type="text"
+                  placeholder="name"
+                  name="name"
+                  onBlur={handleBlur}
+                  data-touch={touched.name && !errors.name}
+                />
+                <Warning>
+                  <ErrorMessage name="name">
+                    {msg => (
+                      <Error>
+                        <svg width="20" height="20">
+                          <use
+                            href={sprite + `#icon-checkbox-circle-fill`}
+                          ></use>
+                        </svg>
+                        {msg}
+                      </Error>
+                    )}
+                  </ErrorMessage>
+                </Warning>
+              </InputWrapper>
+            )}
+            <InputWrapper>
+              <TextInput
+                id="email"
+                type="email"
+                placeholder="Email"
+                name="email"
+                onBlur={handleBlur}
+                data-touch={touched.email && !errors.email}
+              />
+              <Warning>
+                <ErrorMessage name="email">
+                  {msg => (
+                    <Error>
+                      <svg width="20" height="20">
+                        <use href={sprite + `#icon-checkbox-circle-fill`}></use>
+                      </svg>
+                      {msg}
+                    </Error>
+                  )}
+                </ErrorMessage>
+              </Warning>
+            </InputWrapper>
             <InputWrapper>
-              <TextInput id="name" type="text" placeholder="name" name="name" onBlur={handleBlur} data-touch={touched.name && !errors.name} />
+              <TextInput
+                id="password"
+                type={typePasswordInput}
+                placeholder="Password"
+                name="password"
+                onBlur={handleBlur}
+                data-touch={touched.password && !errors.password}
+              />
+              <ButtonIconForInput
+                type="button"
+                right="16px"
+                onClick={toglePassword}
+              >
+                <svg width="20" height="20">
+                  <use
+                    href={
+                      sprite +
+                      `${isPasswordShown ? `#icon-eye-off` : `#icon-eye`}`
+                    }
+                  ></use>
+                </svg>
+              </ButtonIconForInput>
               <Warning>
-                <ErrorMessage name="name">
+                <ErrorMessage name="password">
                   {msg => (
                     <Error>
                       <svg width="20" height="20">
@@ -89,68 +157,9 @@ export default function AuthForm({ nameIsShown, btnTitle, onSubmit }) {
                 </ErrorMessage>
               </Warning>
             </InputWrapper>
-          )}
-          <InputWrapper>
-            <TextInput
-              id="email"
-              type="email"
-              placeholder="Email"
-              name="email"
-              onBlur={handleBlur} 
-              data-touch={touched.email && !errors.email}
-            />
-            <Warning>
-              <ErrorMessage name="email">
-                {msg => (
-                  <Error>
-                    <svg width="20" height="20">
-                      <use href={sprite + `#icon-checkbox-circle-fill`}></use>
-                    </svg>
-                    {msg}
-                  </Error>
-                )}
-              </ErrorMessage>
-            </Warning>
-          </InputWrapper>
-          <InputWrapper>
-            <TextInput
-              id="password"
-              type={typePasswordInput}
-              placeholder="Password"
-              name="password"
-              onBlur={handleBlur} 
-              data-touch={touched.password && !errors.password}
-            />
-            <ButtonIconForInput
-              type="button"
-              right="16px"
-              onClick={toglePassword}
-            >
-              <svg width="20" height="20">
-                <use
-                  href={
-                    sprite +
-                    `${isPasswordShown ? `#icon-eye-off` : `#icon-eye`}`
-                  }
-                ></use>
-              </svg>
-            </ButtonIconForInput>
-            <Warning>
-              <ErrorMessage name="password">
-                {msg => (
-                  <Error>
-                    <svg width="20" height="20">
-                      <use href={sprite + `#icon-checkbox-circle-fill`}></use>
-                    </svg>
-                    {msg}
-                  </Error>
-                )}
-              </ErrorMessage>
-            </Warning>
-          </InputWrapper>
-        </InputContainer>
-        <BtnSubmit title={btnTitle} fontSize="20px" />
-      </FormContainer>
+          </InputContainer>
+          <BtnSubmit title={btnTitle} fontSize="20px" />
+        </FormContainer>
       )}
     </Formik>
   );

diff --git a/src/components/AuthForm/AuthForm.styled.jsx b/src/components/AuthForm/AuthForm.styled.jsx
@@ -25,7 +25,7 @@ export const InputContainer = styled.div`
 
   ${mq.tablet} {
     gap: 34px;
-    margin-bottom: 64px;
+    margin-bottom: 54px;
   }
 `;
 

diff --git a/src/components/Calendar/Calendar.styled.js b/src/components/Calendar/Calendar.styled.js
@@ -36,7 +36,7 @@ export const GlobalStyles = css`
     display: flex;
     justify-content: center;
     text-align: center;
-    cursor: url('./assets/cursor-pointer.png'), pointer;
+    cursor: pointer;
     position: absolute;
     top: 12px;
     padding: 0;
@@ -118,7 +118,7 @@ export const GlobalStyles = css`
     height: 32px;
     border-radius: 50%;
     font-size: 14px;
-    cursor: url('./assets/cursor-pointer.png'), pointer;
+    cursor: pointer;
     transition:
       color 0.3s,
       background-color 0.3s;
@@ -132,7 +132,7 @@ export const GlobalStyles = css`
   .react-datepicker__day:active {
     background: ${colors.textWhite04};
     color: ${colors.orange};
-    cursor: url('./assets/cursor-pointer.png'), pointer;
+    cursor: pointer;
   }
 
   .react-datepicker__day--outside-month {
@@ -149,7 +149,7 @@ export const GlobalStyles = css`
     position: absolute;
     top: 16px;
     right: 40px;
-    cursor: url('./assets/cursor-pointer.png'), pointer;
+    cursor: pointer;
   }
 
   .react-datepicker__month-read-view--selected-month,

diff --git a/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx b/src/components/CustomInputForCalendar/CustomInputForCalendar.styled.jsx
@@ -7,7 +7,7 @@ export const Label = styled.label`
   background-color: inherit;
   border: none;
 
-  cursor: url('./assets/cursor-pointer.png'), pointer;
+  cursor: pointer;
   &:hover svg,
   &:hover input {
     stroke: ${colors.orange};
@@ -30,7 +30,7 @@ export const Input = styled.input`
   font-weight: 700;
   line-height: 1.11;
 
-  cursor: url('./assets/cursor-pointer.png'), pointer;
+  cursor: pointer;
   color: ${colors.white};
   border: none;
   background-color: inherit;

diff --git a/src/components/ExercisesItem/ExercisesItem.styled.js b/src/components/ExercisesItem/ExercisesItem.styled.js
@@ -8,8 +8,6 @@ export const Item = styled.li`
     margin-bottom: 0px;
   }
 
-
-
   ${mq.tablet} {
     flex-basis: calc((100% - 32px) / 3);
     margin-bottom: 0;
@@ -27,7 +25,7 @@ export const Item = styled.li`
 export const WrapCard = styled.a`
   display: block;
 
-  cursor: url('./assets/cursor-pointer.png'), pointer;
+  cursor: pointer;
   position: relative;
   border-radius: 12px;
   background-color: ${colors.background05};

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom';
 
 const modalRoot = document.querySelector('#modal-root');
 
-export const Modal = ({ children, openModal, width }) => {
+export const Modal = ({ children, openModal, width, height }) => {
   useEffect(() => {
     const handleKeyDown = e => {
       if (e.code === 'Escape') {
@@ -28,7 +28,7 @@ export const Modal = ({ children, openModal, width }) => {
 
   return createPortal(
     <Backdrop onClick={handleBackdropClick}>
-      <ModalWrap width={width}>
+      <ModalWrap width={width} height={height}>
         <ButtonExit type="button" onClick={() => openModal()}>
           <Svg>
             <use href={sprite + '#close'} />
@@ -44,11 +44,3 @@ export const Modal = ({ children, openModal, width }) => {
 
 export default Modal;
 
-// =================for testing============================================================================
-
-//  const [openModal, setOpenModal] = useState(false)
-
-//     <>
-//         <button onClick={() => setOpenModal(true)}>Open</button>
-//         {openModal && <Modal children={<YOU MODAL COMPONENT/>} openModal={setOpenModal} />}
-//     </>
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -17,18 +17,28 @@ export const ModalWrap = styled.div`
   border: 1px solid ${colors.textWhite02};
   position: absolute;
 
+  overflow: auto;
+  height: ${props => props.height[0]}px;
+
   display: flex;
   justify-content: center;
   align-items: center;
 
-  width: 335px;
+  ${mq.smallMobile} {
+    width: 300px;
+  }
+  ${mq.mobile} {
+    width: 335px;
+  }
   padding: 48px 20px;
   border-radius: 8px;
   background-color: ${colors.modalBlack};
   z-index: 1;
 
   ${mq.tablet} {
     width: ${props => props.width}px;
+    height: ${props => props.height[1]}px;
+
     padding: 48px 32px;
   }
 `;

diff --git a/src/components/ProductOrExerciseContainer/ProductOrExerciseContainer.jsx b/src/components/ProductOrExerciseContainer/ProductOrExerciseContainer.jsx
@@ -9,7 +9,6 @@ export default function ProductsOrExercisesContainer({ children, ...props }) {
   const searchParams = useSelector(getSearchParams);
 
   useEffect(() => {
-    console.log('scroll', containerRef.current.firstChild);
     containerRef.current.firstChild?.scrollIntoView();
   }, [searchParams]);
 

diff --git a/src/components/ProductsFilter/ProductsFilter.styled.jsx b/src/components/ProductsFilter/ProductsFilter.styled.jsx
@@ -10,7 +10,7 @@ export const Option = styled.option`
   border-radius: 4px;
   background-color: #fff;
   appearance: none;
-  cursor: url('./assets/cursor-pointer.png'), pointer;
+  cursor: pointer;
 `;
 
 export const Select = styled.select`
@@ -124,7 +124,7 @@ export const TextInput = styled.input`
     border: 1px solid ${colors.orange};
   }
 
-  &:focus-visible + span > svg{
+  &:focus-visible + span > svg {
     stroke: ${colors.orange};
   }
 `;