Merge pull request #89 from Sokilskill/feature/diary

Feature/diary
Sokilskill · Jan 25, 2024 · 1c6104e · 1c6104e
2 parents d44ed59 + b2a2562
commit 1c6104e
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 183 deletions.
diff --git a/src/assets/sprite.svg b/src/assets/sprite.svg
diff --git a/src/components/DayDashboard/CardDashboard/CardDashboard.jsx b/src/components/DayDashboard/CardDashboard/CardDashboard.jsx
@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+import { useSelector } from 'react-redux';
+import sprite from '../../../assets/sprite.svg';
+import diarySelectors from '../../../redux/diary/diarySelectors';
+import {
+  ContentContainerCard,
+  TitleTextCard,
+  ValueTextCard,
+  WrapperTitleCard,
+} from '../DayDashboard.styled';
+import MyLoader from '../../Loader/DiaryLoader';
+
+const Icon = styled.svg`
+  &.orange {
+    fill: ${({ theme }) => theme.secondaryOrange};
+  }
+`;
+
+export const Card = ({ value, children }) => {
+  const isLoading = useSelector(diarySelectors.getIsLoading);
+  let icon = '';
+  let displayValue = value;
+
+  switch (children) {
+    case 'Daily calorie intake':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-fluent_food-24-filled`}></use>
+        </Icon>
+      );
+      break;
+    case 'Daily physical activity':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-dumbbell`}></use>
+        </Icon>
+      );
+      displayValue = displayValue.toString() + ' min';
+
+      break;
+    case 'Calories consumed':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-apple`}></use>
+        </Icon>
+      );
+      break;
+    case 'Calories burned':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-calories-1`}></use>
+        </Icon>
+      );
+      break;
+    case 'Calories remaining':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-bubble`}></use>
+        </Icon>
+      );
+      break;
+    case 'Sports remaining':
+      icon = (
+        <Icon width={20} height={20} className="orange">
+          <use href={`${sprite}#icon-running`}></use>
+        </Icon>
+      );
+      displayValue = displayValue.toString() + ' min';
+      break;
+  }
+  if (children === 'Calories remaining' && value < 0) {
+    displayValue = '- ' + Math.abs(value).toString();
+  }
+  if (children === 'Sports remaining' && value < 0) {
+    displayValue = '+ ' + Math.abs(value).toString() + ' min';
+  }
+  if (!displayValue) displayValue = 0;
+  return (
+    <ContentContainerCard value={value} title={children}>
+      <WrapperTitleCard>
+        {icon}
+        <TitleTextCard>{children}</TitleTextCard>
+      </WrapperTitleCard>
+      {isLoading ? (
+        <MyLoader display={'block'} />
+      ) : (
+        <ValueTextCard> {displayValue}</ValueTextCard>
+      )}
+    </ContentContainerCard>
+  );
+};
diff --git a/src/components/DayDashboard/DayDashboard.jsx b/src/components/DayDashboard/DayDashboard.jsx
@@ -1,128 +1,40 @@
-import styled from 'styled-components';
-import {
-  Container,
-  ContentContainerCard,
-  WrapperTitleCard,
-  ValueTextCard,
-  TitleTextCard,
-} from './DayDashboard.styled';
+import { Container } from './DayDashboard.styled';
 
-import sprite from '../../assets/sprite.svg';
 import { useSelector } from 'react-redux';
-import diarySelectors from '../../redux/diary/diarySelectors';
-import authSelectors from '../../redux/auth/auth-selectors';
-import MyLoader from '../Loader/DiaryLoader';
-
-const Icon = styled.svg`
-  &.orange {
-    fill: ${({ theme }) => theme.secondaryOrange};
-  }
-`;
+// import diarySelectors from '../../redux/diary/diarySelectors';
+import { selectTargetBmr } from '../../redux/auth/auth-selectors';
+import { Card } from './CardDashboard/CardDashboard';
 
 const DayDashboard = () => {
-  const userMetricData = useSelector(authSelectors.getUserMetricData);
+  const targetBmr = Math.ceil(useSelector(selectTargetBmr));
 
-  const caloriesIntake = userMetricData ? userMetricData.dailyIntakeCalories : null;
-  const normOfSports = userMetricData ? userMetricData.dailyNormOfSport : null;
+  const caloriesIntake = targetBmr;
+  const normOfSports = 110;
 
-  const caloriesConsumed = useSelector(
-    diarySelectors.getDiary
-  ).consumedCalories;
+  const caloriesConsumed = 400;
+  // const caloriesConsumed = useSelector(
+  //   diarySelectors.getDiary
+  // ).consumedCalories;
 
-  const caloriesBurned = useSelector(diarySelectors.getDiary).burnedCalories;
+  const caloriesBurned = 500;
+  // const caloriesBurned = useSelector(diarySelectors.getDiary).burnedCalories;
 
   const restOfCalories = caloriesIntake - caloriesConsumed;
 
-  const restOfSports =
-    normOfSports -
-    Math.ceil(useSelector(diarySelectors.getDiary).sportTime / 60);
+  const restOfSports = 777;
+  // normOfSports -
+  // Math.ceil(useSelector(diarySelectors.getDiary).sportTime / 60);
 
   return (
     <Container>
       <Card value={caloriesIntake}>Daily calorie intake</Card>
-      <Card value={normOfSports}>Daily norm of sports</Card>
+      <Card value={normOfSports}>Daily physical activity</Card>
       <Card value={caloriesConsumed}>Calories consumed</Card>
       <Card value={caloriesBurned}>Calories burned</Card>
-      <Card value={restOfCalories}>The rest of the calories</Card>
-      <Card value={restOfSports}>The rest of sports</Card>
+      <Card value={restOfCalories}>Calories remaining</Card>
+      <Card value={restOfSports}>Sports remaining</Card>
     </Container>
   );
 };
 
-const Card = ({ value, children }) => {
-  const isLoading = useSelector(diarySelectors.getIsLoading);
-  let icon = '';
-  let displayValue = value;
-
-  switch (children) {
-    case 'Daily calorie intake':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-fluent_food-24-filled`}></use>
-        </Icon>
-      );
-      break;
-    case 'Daily norm of sports':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-dumbbell`}></use>
-        </Icon>
-      );
-      displayValue =
-        displayValue !== null && displayValue !== undefined
-          ? displayValue.toString() + ' min'
-          : 'N/A';
-      break;
-    case 'Calories consumed':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-apple`}></use>
-        </Icon>
-      );
-      break;
-    case 'Calories burned':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-calories-1`}></use>
-        </Icon>
-      );
-      break;
-    case 'The rest of the calories':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-bubble`}></use>
-        </Icon>
-      );
-      break;
-    case 'The rest of sports':
-      icon = (
-        <Icon width={20} height={20} className="orange">
-          <use href={`${sprite}#icon-running`}></use>
-        </Icon>
-      );
-      displayValue = displayValue.toString() + ' min';
-      break;
-  }
-  if (children === 'The rest of the calories' && value < 0) {
-    displayValue = '- ' + Math.abs(value).toString();
-  }
-  if (children === 'The rest of sports' && value < 0) {
-    displayValue = '+ ' + Math.abs(value).toString() + ' min';
-  }
-  if (!displayValue) displayValue = 0;
-  return (
-    <ContentContainerCard value={value} title={children}>
-      <WrapperTitleCard>
-        {icon}
-        <TitleTextCard>{children}</TitleTextCard>
-      </WrapperTitleCard>
-      {isLoading ? (
-        <MyLoader display={'block'} />
-      ) : (
-        <ValueTextCard> {displayValue}</ValueTextCard>
-      )}
-    </ContentContainerCard>
-  );
-};
-
-export { DayDashboard };
+export { DayDashboard };
diff --git a/src/components/DayDashboard/DayDashboard.styled.jsx b/src/components/DayDashboard/DayDashboard.styled.jsx
@@ -72,19 +72,19 @@ export const ContentContainerCard = styled.div`
   ${(props) => {
     // console.log(props.title);
     switch (true) {
-      case props.title === 'The rest of the calories' && props.value < 0:
+      case props.title === 'Calories remaining' && props.value < 0:
         return `
           border-color: var(--red);          
         `;
-      case props.title === 'The rest of sports' && props.value < 0:
+      case props.title === 'Sports remaining' && props.value < 0:
         return `
           border-color: var(--green);          
         `;
     }
 
     switch (true) {
       case props.title === 'Daily calorie intake' ||
-        props.title === 'Daily norm of sports':
+        props.title === 'Daily physical activity':
         return `
           background-color: var(--orange);          
         `;
@@ -113,21 +113,20 @@ export const TitleTextCard = styled.p`
   line-height: 16px;
   @media screen and (min-width: 375px) {
     white-space: ${(props) =>
-    props.children === 'The rest of the calories' ? 'normal' : 'nowrap'};
+      props.children === 'Sports remaining' ? 'normal' : 'nowrap'};
   }
 
   @media screen and (min-width: 768px) {
     line-height: 18px;
   }
   @media screen and (min-width: 1440px) {
-
   }
 
   ${(props) => {
     // console.log(props.title);
     switch (true) {
       case props.children === 'Daily calorie intake' ||
-        props.children === 'Daily norm of sports':
+        props.children === 'Daily physical activity':
         return `
           color: var(--white)
         `;

diff --git a/src/components/DayExercises/DayExercises.jsx b/src/components/DayExercises/DayExercises.jsx
@@ -42,25 +42,26 @@ const Icon = styled.svg`
 `;
 
 export const DayExercises = () => {
-  const visibleExercises = useSelector(diarySelectors.getDiary).doneExercises;
+  const diaryDate = useSelector(diarySelectors.getDiary).date;
+  const visibleExercises = useSelector(diarySelectors.getDiary).exercises;
 
   return (
     <ContainerEx>
       <TitleMainEx>
         <SubTitleEx>Execrcises</SubTitleEx>
-        <StyledLinkEx to="/exercises/bodyParts">
+        <StyledLinkEx to="/exercises/body">
           <AddProductEx>Add exercise</AddProductEx>
           <Icon width={16} height={16} className="orange">
             <use href={`${sprite}#icon-start`}></use>
           </Icon>
         </StyledLinkEx>
       </TitleMainEx>
-      <ExercisesTable exercises={visibleExercises} />
+      <ExercisesTable exercises={visibleExercises} date={diaryDate} />
     </ContainerEx>
   );
 };
 
-export const ExercisesTable = ({ exercises }) => {
+export const ExercisesTable = ({ exercises, date }) => {
   const dispatch = useDispatch();
   const isLoading = useSelector(diarySelectors.getIsLoading);
 
@@ -77,7 +78,6 @@ export const ExercisesTable = ({ exercises }) => {
             {exercises.map(
               ({
                 burnedCalories,
-                date,
                 exerciseId: { bodyPart, equipment, name, target },
                 time,
                 _id,
@@ -92,7 +92,7 @@ export const ExercisesTable = ({ exercises }) => {
                   <WrapMobileEx>
                     <WrapItemProductsEx>
                       <ItemProductEx value={target}>Target</ItemProductEx>
-                      <ItemProductEx value={burnedCalories}>
+                      <ItemProductEx value={Math.round(burnedCalories)}>
                         Burned Calories
                       </ItemProductEx>
                       <ItemProductEx value={time}>Time</ItemProductEx>
@@ -104,7 +104,7 @@ export const ExercisesTable = ({ exercises }) => {
                           diaryOperations.deleteDiaryExercise({
                             exerciseId: _id,
                             date,
-                          }),
+                          })
                         );
                       }}
                     >
@@ -116,7 +116,7 @@ export const ExercisesTable = ({ exercises }) => {
                     </ButtonEx>
                   </WrapMobileEx>
                 </ListItemEx>
-              ),
+              )
             )}
           </TableListEx>
         </>