bugfix some features in styles

MargoMarm · Sep 21, 2023 · 4b122a4 · 4b122a4
1 parent 7e0d110
commit 4b122a4
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>{' '}