Merge pull request #140 from ViktorSvertoka/Dima_Diary

Author: ViktorSvertoka

src/components/DailyStatsCards/DailyStatsCards.jsx

@@ -26,14 +26,15 @@ const DailyStatsCards = ({
         <Label>{label}</Label>
       </KeyWrap>
 
-      <KeyValue>{keyValue}</KeyValue>
+      <KeyValue>{String(keyValue)}</KeyValue>
     </CardWrap>
   );
 };
 
 DailyStatsCards.propTypes = {
   icon: PropTypes.string.isRequired,
-  keyValue: PropTypes.string.isRequired,
+  keyValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
   label: PropTypes.string.isRequired,
   border: PropTypes.oneOf(['green', 'red', 'default']),
   fill: PropTypes.oneOf(['true', 'false']),

src/components/DairyStatisticList/DairyStatisticList.jsx

@@ -2,17 +2,40 @@ import { List } from './DairyStatisticList.styled';
 import DailyStatsCards from '../DailyStatsCards/DailyStatsCards';
 import { useSelector } from 'react-redux';
 import { selectUser } from '../../redux/auth/selectors';
+import {
+  getBurnedCalories,
+  getCalories,
+  getDoneExercisesTime,
+} from '../../redux/diary/selectors';
 
 const DairyStatisticList = () => {
   const user = useSelector(selectUser);
+  const consumedCalories = useSelector(getCalories);
+  const doneExercisesTime = useSelector(getDoneExercisesTime);
+  const burnedCalories = useSelector(getBurnedCalories);
+
+  const defaultDayTime = 110;
+  const bmr = user.bmr;
+  const restCalories = bmr - consumedCalories;
+
+  function secondsToMinutesAndSeconds(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+
+    return { minutes, seconds: remainingSeconds };
+  }
+
+  const totalMinutes = doneExercisesTime / 60;
+  const result = secondsToMinutesAndSeconds(totalMinutes * 60);
+  let resultTime = defaultDayTime - result.minutes;
 
   return (
     <List>
       <DailyStatsCards
         icon="icon-fork-knife"
         fill="true"
         label="Daily calorie intake"
-        keyValue={user.bmr !== undefined ? String(user.bmr) : '2200'}
+        keyValue={bmr !== undefined ? String(bmr) : '2200'}
       ></DailyStatsCards>
       <DailyStatsCards
         icon="icon-dumbbell"
@@ -23,22 +46,26 @@ const DairyStatisticList = () => {
       <DailyStatsCards
         icon="icon-apple"
         label="Сalories consumed"
-        keyValue={'0'}
+        keyValue={
+          consumedCalories !== undefined ? String(consumedCalories) : '0'
+        }
       ></DailyStatsCards>
       <DailyStatsCards
         icon="icon-fire"
         label="Сalories burned"
-        keyValue={'0'}
+        keyValue={burnedCalories}
       ></DailyStatsCards>
       <DailyStatsCards
         icon="icon-bubble"
         label="The rest of the calories"
-        keyValue={'2200'}
+        keyValue={restCalories !== undefined ? String(restCalories) : '0'}
+        border={restCalories < 0 ? 'red' : 'green'}
       ></DailyStatsCards>
       <DailyStatsCards
         icon="icon-running-figure"
         label="The rest of sports"
-        keyValue={'110 min'}
+        keyValue={resultTime !== undefined ? String(resultTime) + ' min' : '0'}
+        border={resultTime > defaultDayTime ? 'green' : 'default'}
       ></DailyStatsCards>
     </List>
   );

src/components/DiaryTable/DiaryTable.jsx

@@ -67,9 +67,9 @@ const TableForDiary = ({
                       <Cell>{item.amount}</Cell>
                       <Cell>
                         <BeforeForCell
-                          bgcolor={item.recommend ? '#419B09' : '#E9101D'}
+                          bgcolor={item.recommended ? '#419B09' : '#E9101D'}
                         />
-                        {item.recommend ? 'Yes' : 'No'}
+                        {item.recommended ? 'Yes' : 'No'}
                       </Cell>
                       <Cell>
                         <DeleteBtn onClick={() => onDelete({ id: item._id })}>

src/redux/diary/operations.js

@@ -54,7 +54,6 @@ export const deleteProduct = createAsyncThunk(
   'deleteProduct',
   async (productDetails, { rejectWithValue }) => {
     const { id, date } = productDetails;
-    console.log('productDetailsDELETE', productDetails);
 
     try {
       await axios.delete(`/diary/deleteproduct?id=${id}&date=${date}`);

src/redux/diary/selectors.js

@@ -4,6 +4,12 @@ export const getDiaryExercises = state => state.diary.exercises;
 
 export const getIsLoadingDiary = state => state.diary.isLoading;
 
+export const getCalories = state => state.diary.consumedCalories;
+
+export const getDoneExercisesTime = state => state.diary.doneExercisesTime;
+
+export const getBurnedCalories = state => state.diary.burnedCalories;
+
 export const getError = state => state.diary.error;
 
 export const getErrorProductsAndExercisesError = state =>