From 4b122a48586fc27cb439b34abe4fd319a8f1d69a Mon Sep 17 00:00:00 2001
From: TaurusVB <114020229+TaurusVB@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:16:03 +0300
Subject: [PATCH] bugfix some features in styles

---
 .../DayDiaryProductsOrExercises.jsx           | 26 +++++++------------
 .../TableForDiary/TableForDiary.jsx           |  9 ++++---
 .../TableForDiary/TableForDiary.styled.jsx    |  7 +++++
 .../TableForDiaryOnMobile.styled.jsx          | 12 ++++-----
 src/pages/Diary/Diary.jsx                     | 16 ------------
 5 files changed, 28 insertions(+), 42 deletions(-)

diff --git a/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx b/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
index d6e33b2e..d1d610d3 100644
--- a/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
+++ b/src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
@@ -18,7 +18,6 @@ const DayDiaryProductsOrExercises = ({
   list,
   productTable,
   exerciseTable,
-  windowWidth,
 }) => {
   return (
     <DayDiaryContainer marginBottom={marginBottom}>
@@ -35,20 +34,16 @@ const DayDiaryProductsOrExercises = ({
       </DayDiarySubDiv>
       {list.length !== 0 ? (
         <>
-          {windowWidth >= 768 && (
-            <TableForDiary
-              list={list}
-              productTable={productTable}
-              exerciseTable={exerciseTable}
-            />
-          )}
-          {windowWidth < 768 && (
-            <TableForDiaryOnMobile
-              list={list}
-              productTable={productTable}
-              exerciseTable={exerciseTable}
-            />
-          )}
+          <TableForDiary
+            list={list}
+            productTable={productTable}
+            exerciseTable={exerciseTable}
+          />
+          <TableForDiaryOnMobile
+            list={list}
+            productTable={productTable}
+            exerciseTable={exerciseTable}
+          />
         </>
       ) : (
         <DayNoContentText>
@@ -65,7 +60,6 @@ DayDiaryProductsOrExercises.propTypes = {
   list: PropTypes.array,
   productTable: PropTypes.bool,
   exerciseTable: PropTypes.bool,
-  windowWidth: PropTypes.number,
 };
 
 export default DayDiaryProductsOrExercises;
diff --git a/src/components/TableForDiary/TableForDiary.jsx b/src/components/TableForDiary/TableForDiary.jsx
index f0c7efd0..6d693af2 100644
--- a/src/components/TableForDiary/TableForDiary.jsx
+++ b/src/components/TableForDiary/TableForDiary.jsx
@@ -7,6 +7,7 @@ import {
   HeaderCont,
   ColumnNameProducts,
   ColumnNameExercises,
+  CustomContainer,
 } from './TableForDiary.styled';
 import {
   Table,
@@ -28,7 +29,7 @@ const TableForDiary = ({ list, productTable, exerciseTable }) => {
   return (
     <>
       {productTable && (
-        <>
+        <CustomContainer>
           <HeaderCont>
             <ColumnNameProducts>Title</ColumnNameProducts>
             <ColumnNameProducts>Category</ColumnNameProducts>
@@ -71,11 +72,11 @@ const TableForDiary = ({ list, productTable, exerciseTable }) => {
               </>
             )}
           </Table>
-        </>
+        </CustomContainer>
       )}
 
       {exerciseTable && (
-        <>
+        <CustomContainer>
           <HeaderCont>
             <ColumnNameExercises>Body Part</ColumnNameExercises>
             <ColumnNameExercises>Equipment</ColumnNameExercises>
@@ -126,7 +127,7 @@ const TableForDiary = ({ list, productTable, exerciseTable }) => {
               </>
             )}
           </Table>
-        </>
+        </CustomContainer>
       )}
     </>
   );
diff --git a/src/components/TableForDiary/TableForDiary.styled.jsx b/src/components/TableForDiary/TableForDiary.styled.jsx
index 61f9a4c1..130c591f 100644
--- a/src/components/TableForDiary/TableForDiary.styled.jsx
+++ b/src/components/TableForDiary/TableForDiary.styled.jsx
@@ -2,6 +2,13 @@ import styled from '@emotion/styled';
 
 import { colors, mq } from '../../utils';
 
+export const CustomContainer = styled.div`
+  display: none;
+  
+  ${mq.tablet} {
+    display: block;
+  }`
+
 export const DeleteBtn = styled.button`
   padding: 0;
   margin: 0;
diff --git a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
index aff4a834..2b83aa9d 100644
--- a/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
+++ b/src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
@@ -5,6 +5,10 @@ export const CustomContainer = styled.div`
   overflow: auto;
   margin-top: 22px;
   height: 254px;
+
+  ${mq.tablet} {
+    display: none;
+  }
 `;
 
 export const ContainerForTable = styled.div`
@@ -59,18 +63,14 @@ export const BottomContainer = styled.div`
 
   & > div {
     &:nth-of-type(4) {
-      
-
       & > p {
         padding: 0;
         margin-top: 35px;
-        
+
         border: none;
-        }
       }
     }
-  
-
+  }
 `;
 
 export const Cell = styled.div`
diff --git a/src/pages/Diary/Diary.jsx b/src/pages/Diary/Diary.jsx
index af64756e..b2da1042 100644
--- a/src/pages/Diary/Diary.jsx
+++ b/src/pages/Diary/Diary.jsx
@@ -135,20 +135,6 @@ const listExercises = [
 ];
 
 const Diary = () => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    window.addEventListener('resize', updateWindowWidth);
-
-    return () => {
-      window.removeEventListener('resize', updateWindowWidth);
-    };
-  }, []);
-
-  const updateWindowWidth = () => {
-    setWindowWidth(window.innerWidth);
-  };
-
   return (
     <>
       <Title text={'Diary'} margin={mgForTitle} />
@@ -167,14 +153,12 @@ const Diary = () => {
             marginBottom={40}
             list={listProducts}
             productTable
-            windowWidth={windowWidth}
             to={'/products'}
           />
 
           <DayDiaryProductsOrExercises
             list={listExercises}
             exerciseTable
-            windowWidth={windowWidth}
             to={'/exercises'}
           />
         </CustomDivForTables>{' '}