Merge pull request #101 from VasylievYurii/DiaryPart8

Diary8 - FixBig Nan and adaptive
VasylievYurii · Nov 18, 2023 · d62548d · d62548d
2 parents 565871e + c7adbfc
commit d62548d
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 22 deletions.
diff --git a/src/components/DayDashboard/DayDashboard.jsx b/src/components/DayDashboard/DayDashboard.jsx
@@ -8,6 +8,7 @@ import {
   WrapDashText,
   DashIconExclamationWrapper,
   IconWrapper,
+  Message,
 } from './DayDashboard.styled';
 import { useSelector } from 'react-redux';
 import {
@@ -60,7 +61,7 @@ const DayDashboard = () => {
             </DashIconWrapper>
             Daily calorie intake
           </DashTitle>
-          {dayCalories}
+          {dayCalories !== 0 ? dayCalories : <Message>Please enter your details in the profile</Message>}
         </DashIndicators>
         <DashIndicators color="var(--color-main-one)">
           <DashTitle color="rgba(239, 237, 232, 0.80)">
@@ -98,7 +99,7 @@ const DayDashboard = () => {
           </DashTitle>
           {burnCalories}
         </DashIndicators>
-        <DashIndicators $borderColor={borderColorRestCalories}>
+        <DashIndicators $border={borderColorRestCalories}>
           <DashTitle>
             <DashIconWrapper
               fill="var(--color-main-two)"
@@ -110,7 +111,7 @@ const DayDashboard = () => {
           </DashTitle>
           {restCalories}
         </DashIndicators>
-        <DashIndicators $borderColor={borderColorRestWorkoutsTime}>
+        <DashIndicators $border={borderColorRestWorkoutsTime}>
           <DashTitle>
             <DashIconWrapper
               fill="var(--color-main-two)"

diff --git a/src/components/DayDashboard/DayDashboard.styled.js b/src/components/DayDashboard/DayDashboard.styled.js
@@ -80,6 +80,11 @@ export const DashTitle = styled.h3`
   }
 `;
 
+export const Message = styled.p`
+    font-size: 12px;
+    font-weight: 400;
+`;
+
 export const WrapDashText = styled.div`
   display: flex;
   gap: 8px;

diff --git a/src/components/DayExercises/DayExercises.jsx b/src/components/DayExercises/DayExercises.jsx
@@ -44,22 +44,22 @@ const DayExercises = () => {
       {workouts.length !== 0 ? (
         <>
           <WrapTitlesTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '206px' : '212px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '90px' : '115px'}>
               Body Part
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '130px' : '166px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '132px' : '157px'}>
               Equipment
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '130px' : '166px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '128px' : '131px'}>
               Name
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '92px' : '105px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '84px' : '106px'}>
               Target
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '92px' : '105px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '78px' : '91px'}>
               Burned Calories
             </DiarySupTitleTablet>
-            <DiarySupTitleTablet width={points < 1440 ? '82px' : '110px'}>
+            <DiarySupTitleTablet width={points < 1440 ? '72px' : '82px'}>
               Time
             </DiarySupTitleTablet>
           </WrapTitlesTablet>

diff --git a/src/components/DayExercisesItem/DayExercisesItem.jsx b/src/components/DayExercisesItem/DayExercisesItem.jsx
@@ -29,34 +29,34 @@ const DayExercisesItem = ({ workout, points }) => {
     <DiaryCard key={_id}>     
       <DescriptionItem>
         <DiarySupTitle>Body Part</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '204px' : ((points >= 1440) ? '212px' : '100%')}>{bodyPart}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '115px' : '100%')}>
+          {bodyPart}</ValueBox>
       </DescriptionItem>
       <DescriptionItem>
         <DiarySupTitle>Equipment</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '166px' : '100%')}>{equipment}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '132px' : ((points >= 1440) ? '157px' : '100%')}>
+          {equipment}</ValueBox>
           </DescriptionItem>
           <DescriptionItem>
         <DiarySupTitle>Name</DiarySupTitle>
-        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '166px' : '100%')}>{name}</ValueBox>
+        <ValueBox width={(points < 1440 && points >= 768) ? '128px' : ((points >= 1440) ? '131px' : '100%')}>
+          {name}</ValueBox>
       </DescriptionItem>
       <WrapLastDescrBox>
         <DescriptionItem>
           <DiarySupTitle>Target</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '105px' : '100%')}>
-            {target}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '84px' : ((points >= 1440) ? '106px' : '100%')}>
+            {target}</ValueBox>
         </DescriptionItem>
         <DescriptionItem>
           <DiarySupTitle size="80px">Burned Calories</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '90px' : ((points >= 1440) ? '105px' : '100%')}>
-            {burnedCalories}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '78px' : ((points >= 1440) ? '91px' : '100%')}>
+            {burnedCalories}</ValueBox>
         </DescriptionItem>
         <DescriptionItem>
           <DiarySupTitle>Time</DiarySupTitle>
-          <ValueBox width={(points < 1440 && points >= 768) ? '80px' : ((points >= 1440) ? '110px' : '100%')}>
-            {time}
-          </ValueBox>
+          <ValueBox width={(points < 1440 && points >= 768) ? '72px' : ((points >= 1440) ? '82px' : '100%')}>
+            {time}</ValueBox>
         </DescriptionItem>
         <DiaryTrashButton
           type="button"

diff --git a/src/pages/Diary.jsx b/src/pages/Diary.jsx
@@ -14,6 +14,7 @@ import {
   DiaryWrapContent,
   DiaryWrapTitle,
 } from './Diary/Diary.styled';
+import { getIndicatorsThunk } from '../redux/userIndicators/userIndicOperations';
 
 const Diary = () => {
   const dispatch = useDispatch();
@@ -44,6 +45,10 @@ const Diary = () => {
     dispatch(getDiaryWorkoutThunk(selectedDate));
   }, [selectedDate]);
 
+  useEffect(() => {
+    dispatch(getIndicatorsThunk());
+  }, []);
+
   return (
     <SectionTemplate>
       <DiaryWrapTitle>

diff --git a/src/pages/Diary/Diary.styled.js b/src/pages/Diary/Diary.styled.js
@@ -120,7 +120,11 @@ export const WrapTitlesTablet = styled.ul`
 `;
 
 export const DiarySupTitleTablet = styled.li`
+  display: inline-block;
   width: ${(props) => props.width || '100%'};
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
 export const DiaryLists = styled.ul`

diff --git a/src/redux/userIndicators/userIndicatorsSlice.js b/src/redux/userIndicators/userIndicatorsSlice.js
@@ -2,7 +2,10 @@ import { createSlice } from '@reduxjs/toolkit';
 import { getIndicatorsThunk } from './userIndicOperations';
 
 const initialIndState = {
-  indicators: {},
+  indicators: {
+        targetBmr: 0,
+        targetTime: 110
+  },
   isLoading: false,
   error: null,
 };