Merge pull request #62 from MargoMarm/features/reduxProductsAndExercises

Features/redux products and exercises
MargoMarm · Sep 21, 2023 · 35182e5 · 35182e5
2 parents 81a8fd8 + 435674a
commit 35182e5
Show file tree

Hide file tree

Showing 17 changed files with 349 additions and 148 deletions.
diff --git a/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx b/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
@@ -11,14 +11,28 @@ import {
 import sprite from '../../assets/sprite.svg';
 import TableForDiary from '../TableForDiary/TableForDiary';
 import TableForDiaryOnMobile from '../TableForDiaryOnMobile/TableForDiaryOnMobile';
+import { useDispatch } from 'react-redux';
+import { deleteExercise, deleteProduct } from '../../redux/diary/operations';
 
 const DayDiaryProductsOrExercises = ({
   to,
   marginBottom,
   list,
   productTable,
   exerciseTable,
+  date,
 }) => {
+  const dispatch = useDispatch();
+
+  const handleDelete = ({ date, id }) => {
+    if (productTable) {
+      dispatch(deleteProduct({ productId: id, date }));
+    }
+    if (exerciseTable) {
+      dispatch(deleteExercise({ exerciseId: id, date }));
+    }
+  };
+
   return (
     <DayDiaryContainer marginBottom={marginBottom}>
       <DayDiarySubDiv>
@@ -38,11 +52,15 @@ const DayDiaryProductsOrExercises = ({
             list={list}
             productTable={productTable}
             exerciseTable={exerciseTable}
+            onDelete={handleDelete}
+            date={date}
           />
           <TableForDiaryOnMobile
             list={list}
             productTable={productTable}
             exerciseTable={exerciseTable}
+            onDelete={handleDelete}
+            date={date}
           />
         </>
       ) : (
@@ -60,6 +78,7 @@ DayDiaryProductsOrExercises.propTypes = {
   list: PropTypes.array,
   productTable: PropTypes.bool,
   exerciseTable: PropTypes.bool,
+  date: PropTypes.string,
 };
 
 export default DayDiaryProductsOrExercises;
diff --git a/src/components/TableForDiary/TableForDiary.jsx b/src/components/TableForDiary/TableForDiary.jsx
@@ -7,6 +7,7 @@ import {
   HeaderCont,
   ColumnNameProducts,
   ColumnNameExercises,
+  BeforeForCell,
   CustomContainer,
 } from './TableForDiary.styled';
 import {
@@ -23,7 +24,13 @@ import PropTypes from 'prop-types';
 
 const stylesForExercises = { ...BASELINE_THEME, ...BASELINE_THEME_EXERCISES };
 
-const TableForDiary = ({ list, productTable, exerciseTable }) => {
+const TableForDiary = ({
+  list,
+  productTable,
+  exerciseTable,
+  onDelete,
+  date,
+}) => {
   const data = { nodes: list };
 
   return (
@@ -53,14 +60,21 @@ const TableForDiary = ({ list, productTable, exerciseTable }) => {
 
                 <Body>
                   {tableList.map(item => (
-                    <Row key={item._id.$oid} item={item}>
+                    <Row key={item._id} item={item}>
                       <Cell>{item.title}</Cell>
                       <Cell>{item.category}</Cell>
                       <Cell>{item.calories}</Cell>
-                      <Cell>{item.weight}</Cell>
-                      <Cell>{item.groupBloodNotAllowed ? 'Yes' : 'No'}</Cell>
+                      <Cell>{item.amount}</Cell>
                       <Cell>
-                        <DeleteBtn>
+                        <BeforeForCell
+                          bgColor={item.recommend ? '#419B09' : '#E9101D'}
+                        />
+                        {item.recommend ? 'Yes' : 'No'}
+                      </Cell>
+                      <Cell>
+                        <DeleteBtn
+                          onClick={() => onDelete({ date, id: item._id })}
+                        >
                           <DeleteIcon>
                             <use href={sprite + `#icon-trash`}></use>
                           </DeleteIcon>
@@ -107,15 +121,17 @@ const TableForDiary = ({ list, productTable, exerciseTable }) => {
 
                 <Body>
                   {tableList.map(item => (
-                    <Row key={item.name} item={item}>
+                    <Row key={item._id} item={item}>
                       <Cell>{item.bodyPart}</Cell>
                       <Cell>{item.equipment}</Cell>
                       <Cell>{item.name}</Cell>
                       <Cell>{item.target}</Cell>
                       <Cell>{item.burnedCalories}</Cell>
                       <Cell>{item.time}</Cell>
                       <Cell>
-                        <DeleteBtn>
+                        <DeleteBtn
+                          onClick={() => onDelete({ date, id: item._id })}
+                        >
                           <DeleteIcon>
                             <use href={sprite + `#icon-trash`}></use>
                           </DeleteIcon>
@@ -137,6 +153,8 @@ TableForDiary.propTypes = {
   list: PropTypes.array,
   productTable: PropTypes.bool,
   exerciseTable: PropTypes.bool,
+  onDelete: PropTypes.func,
+  date: PropTypes.string,
 };
 
 export default TableForDiary;
diff --git a/src/components/TableForDiary/TableForDiary.styled.jsx b/src/components/TableForDiary/TableForDiary.styled.jsx
@@ -129,6 +129,14 @@ export const ColumnNameExercises = styled.p`
   }
 `;
 
+export const BeforeForCell = styled.div`
+  width: 14px;
+  height: 14px;
+  border-radius: 10px;
+  margin-right: 8px;
+  background: ${props => props.bgColor};
+`;
+
 export const BASELINE_THEME_EXERCISES = {
   Table: `
     --data-table-library_grid-template-columns:  98px 140px 136px 92px 86px 84px 28px;
@@ -224,13 +232,8 @@ export const BASELINE_THEME = {
       padding: 0
     }  
 
-    :nth-of-type(5)::before {
-      content: '';
-      width: 14px;
-      height: 14px;
-      border-radius: 10px;
-      background: #419B09;
-      margin-right: 8px;
-    }
+    >div {
+      display: flex;
+      align-items: center;}
   `,
 };
diff --git a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.jsx b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.jsx
@@ -11,13 +11,19 @@ import {
   CustomContainer,
 } from './TableForDiaryOnMobile.styled';
 
-const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => {
+const TableForDiaryOnMobile = ({
+  list,
+  productTable,
+  exerciseTable,
+  onDelete,
+  date,
+}) => {
   return (
     <>
       {productTable && (
         <CustomContainer>
           {list.map(item => (
-            <ContainerForTable key={item._id.$oid}>
+            <ContainerForTable key={item._id}>
               <Cell>
                 Title<CellValue>{item.title}</CellValue>
               </Cell>
@@ -32,17 +38,19 @@ const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => {
                 </Cell>
 
                 <Cell>
-                  Weight <CellValue>{item.weight}</CellValue>
+                  Weight <CellValue>{item.amount}</CellValue>
                 </Cell>
 
                 <Cell>
-                  Recommend <CellValue before>{'YES'}</CellValue>
+                  Recommend
+                  <CellValue before colorBefore={item.recommend}>
+                    {item.recommend ? 'Yes' : 'No'}
+                  </CellValue>
                 </Cell>
 
                 <Cell>
-                  {' '}
                   <CellValue>
-                    <DeleteBtn>
+                    <DeleteBtn onClick={() => onDelete({ date, id: item._id })}>
                       <DeleteIcon>
                         <use href={sprite + `#icon-trash`}></use>
                       </DeleteIcon>
@@ -58,7 +66,7 @@ const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => {
       {exerciseTable && (
         <CustomContainer>
           {list.map(item => (
-            <ContainerForTable key={item.name}>
+            <ContainerForTable key={item._id}>
               <Cell>
                 Body Part<CellValue>{item.bodyPart}</CellValue>
               </Cell>
@@ -87,7 +95,9 @@ const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => {
                 <Cell>
                   {' '}
                   <CellValue>
-                    <DeleteBtn>
+                    <DeleteBtn
+                      onClick={() => onDelete({ date, id: item._id })}
+                    >
                       <DeleteIcon>
                         <use href={sprite + `#icon-trash`}></use>
                       </DeleteIcon>
@@ -107,6 +117,8 @@ TableForDiaryOnMobile.propTypes = {
   list: PropTypes.array,
   productTable: PropTypes.bool,
   exerciseTable: PropTypes.bool,
+  onDelete: PropTypes.func,
+  date: PropTypes.string,
 };
 
 export default TableForDiaryOnMobile;
diff --git a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
@@ -6,6 +6,15 @@ export const CustomContainer = styled.div`
   margin-top: 22px;
   height: 254px;
 
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 90px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: ${colors.textWhite01};
+    border-radius: 12px;
+  }
+
   ${mq.tablet} {
     display: none;
   }
@@ -17,7 +26,7 @@ export const ContainerForTable = styled.div`
   height: auto;
 
   &:last-child {
-    margin-bottom: 0;
+    margin-bottom: 8px;
   }
 `;
 
@@ -103,7 +112,7 @@ export const CellValue = styled.p`
       width: 14px;
       height: 14px;
       border-radius: 10px;
-      background: #419b09;
+      background: ${props.colorBefore ? '#419B09' : '#E9101D'};
       margin-right: 8px;
     `}
   }