Merge pull request #122 from VasylievYurii/ModalAddExerciseForm

fixed, PlayIcon

src/components/AddExerciseForm/AddExerciseForm.jsx

@@ -1,7 +1,9 @@
 import ExersiceFormList from './AddExersiceFormList/AddExersiceFormList';
+
 import BasicModalWindow from '../BasicModalWindow/BasicModalWindow';
 import AddExerciseSuccess from '../AddExerciseSuccess/AddExerciseSuccess';
 import {Container,  Gif,  TimerWrapper,  ButtonContainer, Button, Title} from './AddExerciseForm.styled'
+
 import Timer from '../Timer/Timer';
 import { getUserParams } from '../../redux/auth/operations';
 import { useDispatch } from 'react-redux';
@@ -11,13 +13,6 @@ import { addWorkout } from '../../redux/workouts/workoutsOperations';
 import { selectOneWorkout } from '../../redux/selectors';
 import { useSelector } from 'react-redux';
 
-// const formatDate = date => {
-//   const day = String(date.getDate()).padStart(2, '0');
-//   const month = String(date.getMonth() + 1).padStart(2, '0');
-//   const year = date.getFullYear();
-//   return `${day}/${month}/${year}`;
-// };
-
 
 export const AddExerciseForm = ({
   onClick,
@@ -34,6 +29,7 @@ export const AddExerciseForm = ({
   const [dinamicBurnCal, setDinamicBurnCal] = useState(0);
   const [dinamicTime, setDinamicTime] = useState(0);
   const [showModal, setShowModal] = useState(false);
+
   const dispatch = useDispatch();
 
   const handleOpenSuccessModal = () => {
@@ -50,20 +46,19 @@ export const AddExerciseForm = ({
 
   return (
     <Container>
+
       <Gif src={gifUrl} alt={name} />
+
       <Title>Time</Title>
 
       <TimerWrapper>
-
-               {/* <Timer
-
-            data={data}
-            setDinamicBurnCal={setDinamicBurnCal}
-            dinamicBurnCal={dinamicBurnCal}
-            setDinamicTime={setDinamicTime}
-            /> */}
+        <Timer
+        // data={data}
+        // setDinamicBurnCal={setDinamicBurnCal}
+        // dinamicBurnCal={dinamicBurnCal}
+        // setDinamicTime={setDinamicTime}
+        />
       </TimerWrapper>
-
       <div>
         <ExersiceFormList
           name={name}

src/components/AddExerciseForm/AddExerciseForm.styled.js

@@ -52,28 +52,20 @@ align-items: center;
 }
 `;
 export const Title = styled.h2`
-color: var( --color-back-two);
+color: rgba(239, 237, 232, 0.3);
 font-size: 10px;
 line-height: 1.4;
 margin-bottom: 4px;
 ;`
 
 
-// export const CloseBtnWrapper = styled.svg`
+//  export const CloseBtnWrapper = styled.svg`
 
+//  @media screen and (min-width: 768px) {
+// };
+// `;
 
 
-//  /* @media screen and (min-width: 768px) {
-//  position: absolute;
-//   cursor: pointer;
-//   width: 22px;
-//   height: 22px;
-//   stroke: var(--color-text);
-//   top: 14px;
-//   right: 14px; */
-//  /* }; */
-// ;`
-
 export const ButtonContainer = styled.div`
   @media screen and (min-width: 768px) {
     grid-area: button;

src/components/Timer/Circle/Circle.jsx

@@ -1,12 +1,2 @@
-import { TimerProgress, TimerProgressCircle } from './Circle.styled';
 
-const Circle = () => {
-  return (
-    <TimerProgress viewBox="0 0 220 220">
-      <TimerProgressCircle cx="110" cy="110" r="105"></TimerProgressCircle>
-      <circle cx="110" cy="110" r="105"></circle>
-    </TimerProgress>
-  );
-};
 
-export default Circle;

src/components/Timer/Circle/Circle.styled.js

@@ -1,20 +1,2 @@
 import styled from 'styled-components';
 
-export const TimerProgress = styled.svg`
-  rotate: 90deg;
-  max-width: 220px;
-  margin-top: 4px;
-`;
-
-export const TimerProgressCircle = styled.circle`
-  fill: transparent;
-  stroke-width: 4;
-  stroke: rgba(239, 237, 232, 0.1);
-`;
-
-export const TimerProgressCircleSec = styled.circle`
-  fill: transparent;
-  stroke-width: 4;
-  stroke: var(--orange-color);
-  transition: stroke-dashoffset 0.25s linear;
-`;

src/components/Timer/Timer.jsx

@@ -1,59 +1,25 @@
-import { CountdownCircleTimer } from 'react-countdown-circle-timer';
+// import { CountdownCircleTimer } from 'react-countdown-circle-timer';
 import {
-  FormattedTitle,
   PlayIcon,
   TimerBtn,
   TimerSub,
   TimerText,
-  TimerTitle,
   TimerWrapper,
 } from './Timer.styled';
 import symbolDefs from '../../assets/sprite.svg';
 import { useState } from 'react';
-// import _ from 'lodash.throttle';
-// import { duration } from '@mui/material';
 
-const Timer = ({ data, setDinamicBurnCal, dinamicBurnCal, setDinamicTime }) => {
+
+ const Timer = ({  dinamicBurnCal }) => {
   const [isPlaying, setIsPlaying] = useState(false);
 
   const handlePlay = () => {
     setIsPlaying(!isPlaying);
   };
-  const children = ({ remainingTime }) => {
-    const duration = data.time * 60;
-
-    setDinamicBurnCal(() => {
-      const time = (duration - remainingTime) / duration;
-
-      const burnCal = time * data.burnedCalories;
-      return Math.round(burnCal);
-    });
-    setDinamicTime(() => duration - remainingTime);
-
-    const minutes = Math.floor(remainingTime / 60);
-    const seconds = remainingTime % 60;
-
-    return `${minutes}:${seconds}`;
-  };
+
   return (
     <TimerWrapper>
-      <TimerTitle>Time</TimerTitle>
-      {/* <CountdownCircleTimer
-        strokeWidth={2}
-        size={124}
-        isPlaying={isPlaying}
-        duration={data.time * 60}
-        colors={'var(--color-main-one)'}
-        remainingTime={data.time * 60}
-        // colorsTime={[7, 5, 2, 0]}
-      >
-        {({ remainingTime }) => (
-          <div style={{ color: '#efede8' }} role="timer" aria-live="assertive">
-            {children({ remainingTime })}
-          </div>
-        )} */}
-      {/* </CountdownCircleTimer> */}
-      {/* <FormattedTitle>{data.time} minutes</FormattedTitle> */}
+
       <TimerBtn onClick={handlePlay}>
         <PlayIcon>
           <use

src/components/Timer/Timer.styled.js

@@ -34,13 +34,13 @@ export const TimerBtn = styled.button`
 export const PlayIcon = styled.svg`
   width: 20px;
   height: 20px;
+  color: var(-color-text);
 `;
 
 export const TimerText = styled.p`
   color: rgba(239, 237, 232, 0.3);
   font-size: 12px;
   line-height: 1.28;
-
   margin-top: 8px;
 `;