Merge pull request #81 from MargoMarm/feature/addEx

Feature/add ex

package.json

@@ -29,6 +29,7 @@
     "overlayscrollbars-react": "^0.5.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-countdown-circle-timer": "^3.2.1",
     "react-datepicker": "^4.18.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^5.4.5",

src/components/AddExerciseForm/AddExerciseForm.jsx

@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+
+import Timer from '../Timer';
+import {
+  Watch,
+  ButtonWrapper,
+  CardInfo,
+  CardTitle,
+  GifContainer,
+  Img,
+  InfoCard,
+  InfoCardConteiner,
+  TimerContainer,
+  Container,
+} from './AddExerciseForm.styled';
+
+import formatDate from '../../utils/formatDate';
+import { AddButton } from '../AddProductForm/AddProductForm.styled';
+
+export default function AddExerciseForm({ data, addExercise }) {
+  const {
+    _id,
+    burnedCalories: calories,
+    name,
+    bodyPart,
+    gifUrl,
+    target,
+    equipment,
+    time,
+  } = data;
+
+  const [burnedCalory, setBurnedCalory] = useState(0);
+  const [exTime, setExTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [intervalId, setIntervalId] = useState(null);
+
+  const countCalory = (calory, time, exTime) => {
+    const burnedCalory = Math.floor((exTime * calory) / (time * 60));
+    setBurnedCalory(burnedCalory);
+  };
+
+  useEffect(() => {
+    countCalory(calories, time, exTime);
+  }, [calories, time, exTime]);
+
+  const writeTime = () => {
+    setExTime(prevSt => prevSt + 1);
+  };
+
+  const startExercise = () => {
+    const intervalId = setInterval(writeTime, 1000);
+    setIntervalId(intervalId);
+    setIsPlaying(true);
+  };
+
+  const stopExercise = () => {
+    setIsPlaying(false);
+    clearInterval(intervalId);
+    setIntervalId(null);
+  };
+
+  const date = formatDate(new Date());
+
+  const writeRemainengTime = ({ remainingTime }) => {
+    const minutes =
+      Math.floor(remainingTime / 60).toString().length > 1
+        ? Math.floor(remainingTime / 60)
+        : '0' + Math.floor(remainingTime / 60);
+    const seconds =
+      (remainingTime % 60).toString().length > 1
+        ? remainingTime % 60
+        : '0' + (remainingTime % 60);
+
+    return (
+      <Watch>
+        {minutes}:{seconds}
+      </Watch>
+    );
+  };
+
+  return (
+    <Container>
+      <TimerContainer>
+        <GifContainer>
+          <Img src={gifUrl} alt="gif of exercise" />
+        </GifContainer>
+        <Timer
+          startExercise={startExercise}
+          stopExercise={stopExercise}
+          countCalory={countCalory}
+          calory={burnedCalory}
+          writeTime={writeRemainengTime}
+          isPlaying={isPlaying}
+        />
+      </TimerContainer>
+      <InfoCardConteiner>
+        <InfoCard>
+          <CardTitle>Name</CardTitle>
+          <CardInfo>{name}</CardInfo>
+        </InfoCard>
+        <InfoCard>
+          <CardTitle>Target</CardTitle>
+          <CardInfo>{target}</CardInfo>
+        </InfoCard>
+        <InfoCard>
+          <CardTitle>Body Part</CardTitle>
+          <CardInfo>{bodyPart}</CardInfo>
+        </InfoCard>
+        <InfoCard>
+          <CardTitle>Equipment</CardTitle>
+          <CardInfo>{equipment}</CardInfo>
+        </InfoCard>
+        <InfoCard>
+          <CardTitle>Time</CardTitle>
+          <CardInfo>{time} minutes</CardInfo>
+        </InfoCard>
+      </InfoCardConteiner>
+      <ButtonWrapper>
+        <AddButton
+          type="button"
+          onClick={() =>
+            addExercise({
+              id: _id,
+              date,
+              time: exTime,
+              burnedCalories: burnedCalory,
+            })
+          }
+        >
+          Add to diary
+        </AddButton>
+      </ButtonWrapper>
+    </Container>
+  );
+}
+
+AddExerciseForm.propTypes = {
+  data: PropTypes.object.isRequired,
+  addExercise: PropTypes.func,
+};

src/components/AddExerciseForm/AddExerciseForm.styled.jsx

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { colors, mq } from '../../utils';
+
+export const Container = styled.div`
+  position: relative;
+  z-index: 100;
+  width: 335px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  border: transparent;
+
+  background-color: ${colors.modalBackground};
+  ${mq.tablet} {
+    width: 694px;
+    display: flex;
+    gap: 15px;
+  }
+`;
+
+export const GifContainer = styled.div`
+  width: 270px;
+  height: 226px;
+  overflow: hidden;
+  border: 1px solid ${colors.textWhite02};
+  border-radius: 12px;
+`;
+
+export const Img = styled.img`
+  width: 270px;
+  height: 226px;
+`;
+
+export const TimerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 40px;
+  ${mq.tablet} {
+    margin-bottom: 0;
+  }
+`;
+
+export const InfoCardConteiner = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+  ${mq.tablet} {
+    height: 226px;
+  }
+`;
+
+export const InfoCard = styled.div`
+  flex-basis: calc((100% - 8px) / 2);
+
+  min-height: 62px;
+  padding: 12px 18px;
+  border-radius: 12px;
+  border: 1px solid ${colors.textWhite02};
+  background-color: ${colors.textWhite005};
+  ${mq.tablet} {
+    min-height: 68px;
+  }
+`;
+
+export const CardTitle = styled.div`
+  margin-bottom: 4px;
+  font-size: 12px;
+  line-height: 133%;
+  color: ${colors.textWhite04};
+`;
+
+export const CardInfo = styled.div`
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 128.571%;
+  color: ${colors.white};
+  ${mq.tablet} {
+    font-size: 16px;
+    line-height: 150%;
+  }
+`;
+
+export const ButtonWrapper = styled.div`
+  ${mq.tablet} {
+    position: absolute;
+    bottom: 48px;
+    right: 32px;
+  }
+`;
+
+export const Watch = styled.span`
+  font-size: 16px;
+  line-height: 150%;
+  color: ${colors.white};
+`;

src/components/BtnSubmit/BtnSubmit.styled.jsx

@@ -23,7 +23,7 @@ export const ButtonSubmit = styled.button`
   line-height: 112.5%;
 
   ${mq.tablet} {
-    padding: 16px 60px;
+    padding: 16px 45px;
     font-size: ${fontSize => fontSize};
     line-height: 120%;
     margin-top: ${({ margin }) => margin?.top.tab || 0};

src/components/Modal/Modal.styled.jsx

@@ -15,23 +15,21 @@ export const Backdrop = styled.div`
 
 export const ModalWrap = styled.div`
   border: 1px solid ${colors.textWhite02};
-  box-sizing: border-box;
   position: absolute;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
   width: 335px;
-  padding: 48px 0;
+  padding: 48px 20px;
   border-radius: 8px;
   background-color: ${colors.modalBlack};
   z-index: 1;
 
   ${mq.tablet} {
-    min-width: 430px;
+    width: ${props => props.width}px;
     padding: 48px 32px;
-    box-sizing: content-box;
   }
 `;
 

src/components/ProductOrExerciseModal/ProductOrExerciseModal.jsx

@@ -14,24 +14,26 @@ import { nanoid } from '@reduxjs/toolkit';
 
 function ProductOrExerciseModal({ modalType, data, btnNext }) {
   const transformKey = key => {
-    if (key === 'yourTime') {
-      return 'Your  time: ';
+    if (key === 'time') {
+      return 'Your  time:   ';
     }
     if (key === 'burnedCalories') {
-      return 'Burned calories:  ';
+      return 'Burned calories:    ';
     }
     if (key === 'calories') {
-      return 'calories: ';
+      return 'Calories: ';
     }
   };
 
   const mappedData = data => {
     const keys = Object.keys(data);
     const renderKeys = keys.map(key => {
+      console.log("KEY",key);
       return (
         <li key={nanoid()}>
           <Key>
-            {transformKey(key)} <Value>{data[key]}</Value>
+          {`${transformKey(key)} `}
+           <Value>{key === "time" && `${data[key]} seconds` } {key === "burnedCalories" && `${data[key]}`} {key === "calories" && `${data[key]}`} </Value>
           </Key>
         </li>
       );

src/components/ProductOrExerciseModal/ProductOrExerciseModal.styled.jsx

@@ -53,6 +53,7 @@ export const Value = styled.span`
   font-style: normal;
   font-weight: 400;
   line-height: ${14 / 18};
+  margin-left: 5px;
 `;
 
 export const ToDiary = styled(NavLink)`