Merge pull request #115 from TheMainOne/update/replace-resize-aware

replaces resize lib with mediaQuery matcher
TheMainOne · Feb 26, 2023 · eb259c1 · eb259c1
2 parents b0e216a + f1622fc
commit eb259c1
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "react-icons": "^4.4.0",
     "react-loader-spinner": "^5.1.5",
     "react-redux": "^8.0.2",
-    "react-resize-aware": "^3.1.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.5",

diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -7,7 +7,7 @@ import { useDispatch } from 'react-redux';
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer } from 'react-toastify';
 import { authOperations } from 'redux/auth';
-import { useSetDocumentTitle } from 'hooks/ui';
+import { MediaContextProvider, useSetDocumentTitle } from 'hooks/ui';
 import { AppRouter } from './AppRouter';
 import '../../translation/i18n';
 const App = () => {
@@ -22,7 +22,9 @@ const App = () => {
   return (
     <ThemeProvider theme={theme}>
       <MuiThemeProvider theme={muiTheme}>
-        <AppRouter />
+        <MediaContextProvider>
+          <AppRouter />
+        </MediaContextProvider>
       </MuiThemeProvider>
       <GlobalStyle />
       <ToastContainer />

diff --git a/src/components/BackgroundLayout/BackgroundLayout.jsx b/src/components/BackgroundLayout/BackgroundLayout.jsx
@@ -1,19 +1,14 @@
 import { useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import ImagesContainer from './ImagesContainer';
 import { Background } from './BackgroundLayout.styled';
 
 const BackgroundLayout = ({ children }) => {
   const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
-  const { pathname } = useLocation();
-  const isMainPage = pathname === '/';
 
   return (
     <Background>
       {children}
-      {!isLoggedIn && (
-        <ImagesContainer isMainPage={isMainPage} isAuth={isLoggedIn} />
-      )}
+      {!isLoggedIn && <ImagesContainer isAuth={isLoggedIn} />}
     </Background>
   );
 };

diff --git a/src/components/BackgroundLayout/ImagesContainer/ImagesContainer.jsx b/src/components/BackgroundLayout/ImagesContainer/ImagesContainer.jsx
@@ -5,7 +5,6 @@ import leavesTabletAuth from 'images/background/leaves-tablet-auth.png';
 import strawberry from 'images/background/strawberry.png';
 import strawberryTablet from 'images/background/strawberry-tablet.png';
 import greyBackground from 'images/background/grey-background.svg';
-import useResizeAware from 'react-resize-aware';
 
 import {
   ImagesWrapper,
@@ -14,15 +13,20 @@ import {
   BananaImg,
   StrawberryImg,
 } from './ImagesContainer.styled';
+import { useLocation } from 'react-router-dom';
+import { useMedia } from 'hooks/ui';
 
 const DESKTOP_WIDTH_BREAKPOINT = 1280;
 const DESKTOP_HEIGHT_BREAKPOINT = 850;
 
-const ImagesContainer = ({ isMainPage = false }) => {
-  const [resizeListener, { width, height }] = useResizeAware();
+const ImagesContainer = () => {
+  const { width, height } = useMedia();
   const isTablet = width < DESKTOP_WIDTH_BREAKPOINT;
   const shouldResizeBg = height > DESKTOP_HEIGHT_BREAKPOINT;
 
+  const { pathname } = useLocation();
+  const isMainPage = pathname === '/';
+
   const strawberryImageSource = !isTablet
     ? strawberry
     : isMainPage
@@ -37,7 +41,6 @@ const ImagesContainer = ({ isMainPage = false }) => {
 
   return (
     <ImagesWrapper>
-      {resizeListener}
       <GreyBackgroundImg
         shouldResizeBg={shouldResizeBg}
         src={greyBackground}

diff --git a/src/components/DiaryPageContent/DiaryPageContent.jsx b/src/components/DiaryPageContent/DiaryPageContent.jsx
@@ -9,17 +9,14 @@ import { useShowForm } from './hooks';
 import { useTranslation } from 'react-i18next';
 import EmptyListTitle from 'components/EmptyListTitle';
 import { DiaryCalendarAndForm } from './DiaryCalendarAndForm';
-import { useMobileModal } from 'hooks/ui';
+import { useMedia, useMobileModal } from 'hooks/ui';
 import {
   AddProductButton,
   AddProductButtonWrapper,
   AddProductIcon,
 } from 'components/Forms/DiaryAddProductForm/AddProduct.mui';
-import useResizeAware from 'react-resize-aware';
 import { AlertModal } from 'components/AlertModal';
 
-const TABLET = 768;
-
 export const DiaryPageContent = () => {
   const { t } = useTranslation();
   const [showModal, setShowModal] = useState(false);
@@ -50,14 +47,12 @@ export const DiaryPageContent = () => {
     setShowModal(!showModal);
   };
 
-  const [resizeListener, { width }] = useResizeAware();
-  const isMobile = width < TABLET;
+  const { isMobile } = useMedia();
+
   const [, openMobileModal] = useMobileModal();
 
   return (
     <BlockWrapper>
-      {resizeListener}
-
       <DiaryPageStyled>
         <DiaryCalendarAndForm
           addProduct={addProduct}

diff --git a/src/components/Forms/CalculatorСalorieForm/CalculatorСalorieForm.jsx b/src/components/Forms/CalculatorСalorieForm/CalculatorСalorieForm.jsx
@@ -14,8 +14,7 @@ import { getIsLoggedIn } from 'redux/auth/authSelector';
 import { useTranslation } from 'react-i18next';
 import { setUserData } from 'redux/auth/authSlice';
 import { transformUserData } from './transformUserData';
-import { useMobileModal } from 'hooks/ui';
-import useResizeAware from 'react-resize-aware';
+import { useMedia, useMobileModal } from 'hooks/ui';
 import { Button } from 'components/Button';
 import { Input } from 'components/Input';
 import * as yup from 'yup';
@@ -25,10 +24,10 @@ const typeBlood = [1, 2, 3, 4];
 const CalculatorСalorieForm = ({ openModal, getPrivatDailyNorma }) => {
   const { t } = useTranslation();
   const [selectedTypeBlood, setSelectedTypeBlood] = useState(1);
-  const [resizeListener, { width }] = useResizeAware();
+  const { isMobile } = useMedia();
   const dispatch = useDispatch();
   const isLoggedIn = useSelector(getIsLoggedIn);
-  const mobileWidth = width <= 767;
+
   const [, openMobileModal] = useMobileModal();
 
   const validationSchema = yup.object({
@@ -72,10 +71,10 @@ const CalculatorСalorieForm = ({ openModal, getPrivatDailyNorma }) => {
         await getPrivatDailyNorma(paramsUser);
       }
 
-      if (formik.dirty && !isLoggedIn && !mobileWidth) {
+      if (formik.dirty && !isLoggedIn && !isMobile) {
         await openModal();
       }
-      if (formik.dirty && !isLoggedIn && mobileWidth) {
+      if (formik.dirty && !isLoggedIn && isMobile) {
         await openMobileModal();
       }
       resetForm();
@@ -84,7 +83,6 @@ const CalculatorСalorieForm = ({ openModal, getPrivatDailyNorma }) => {
 
   return (
     <Form onSubmit={formik.handleSubmit}>
-      {resizeListener}
       <InputContainer>
         <Wrapper>
           <Input

diff --git a/src/components/Header/Navigation/Navigation.jsx b/src/components/Header/Navigation/Navigation.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import useResizeAware from 'react-resize-aware';
 import Logo from '../Logo';
 import MenuIcon from '@material-ui/icons/Menu';
 import CloseIcon from '@material-ui/icons/Close';
@@ -26,7 +25,7 @@ import { Languages } from '../Languages';
 import IconButton from 'components/IconButton';
 import { createPortal } from 'react-dom';
 import { getRefs } from 'utils';
-import { useMobileModal } from 'hooks/ui';
+import { useMedia, useMobileModal } from 'hooks/ui';
 import { ReturnButtonWrapper } from '../UserInfo/UserInfo.styled';
 import { IconReturnLeft } from 'components/MobileModal/MobileModal.styled';
 
@@ -91,15 +90,9 @@ const NavigationOnMobile = ({ visibleMenu, handleMenuBtnClick }) => {
   );
 };
 
-const TABLET = 768;
-const DESKTOP = 1280;
-
 const Header = () => {
   const { t } = useTranslation();
-  const [resizeListener, { width }] = useResizeAware();
-  const mobileWidth = width < TABLET;
-  const tabletWidth = width >= TABLET && width < DESKTOP;
-  const desktopWidth = width >= DESKTOP;
+  const { isMobile, isTablet, isDesktop } = useMedia();
 
   const isLogged = useSelector(getIsLoggedIn);
   const [showMobileModal, , hideMobileModal] = useMobileModal();
@@ -109,8 +102,6 @@ const Header = () => {
 
   return (
     <div>
-      {resizeListener}
-
       <HeaderStyled isLogged={isLogged}>
         <Container>
           <HeaderNavigation>
@@ -121,7 +112,7 @@ const Header = () => {
             <HeaderLinksWrapper isLogged={isLogged}>
               {!isLogged && <NavigationForGuest />}
 
-              {isLogged && mobileWidth && (
+              {isLogged && isMobile && (
                 <div>
                   <NavigationOnMobile
                     visibleMenu={visibleMenu}
@@ -130,7 +121,7 @@ const Header = () => {
                 </div>
               )}
 
-              {isLogged && tabletWidth && (
+              {isLogged && isTablet && (
                 <>
                   <UserInfo />
                   <NavigationOnMobile
@@ -140,7 +131,7 @@ const Header = () => {
                 </>
               )}
 
-              {isLogged && desktopWidth && (
+              {isLogged && isDesktop && (
                 <>
                   <div>
                     <Wrapp>
@@ -166,13 +157,13 @@ const Header = () => {
         </Container>
       </HeaderStyled>
 
-      {isLogged && mobileWidth && (
+      {isLogged && isMobile && (
         <HeaderButtonsWrapper>
           <UserInfo />
         </HeaderButtonsWrapper>
       )}
 
-      {!isLogged && mobileWidth && showMobileModal && (
+      {!isLogged && isMobile && showMobileModal && (
         <HeaderButtonsWrapper>
           <Container>
             <ReturnButtonWrapper>

diff --git a/src/components/Header/UserInfo/UserInfo.jsx b/src/components/Header/UserInfo/UserInfo.jsx
@@ -1,4 +1,3 @@
-import useResizeAware from 'react-resize-aware';
 import { useSelector } from 'react-redux';
 import { getName } from 'redux/auth/authSelector';
 import {
@@ -9,22 +8,18 @@ import {
   ReturnButtonWrapper,
 } from './UserInfo.styled';
 import { Alert } from './Alert';
-import { useMobileModal } from 'hooks/ui';
+import { useMedia, useMobileModal } from 'hooks/ui';
 import IconButton from 'components/IconButton';
 
-const TABLET = 768;
-
 export default function UserInfo() {
-  const [resizeListener, { width }] = useResizeAware();
-  const isMobile = width < TABLET;
+  const { isMobile } = useMedia();
+
   const name = useSelector(getName);
   const [showMobileModal, , hideMobileModal] = useMobileModal();
 
   return (
     <MobileContainer>
       <HeaderNavButtonsContainer>
-        {resizeListener}
-
         {showMobileModal && isMobile && (
           <ReturnButtonWrapper>
             <IconButton icon={<IconReturnLeft />} onClick={hideMobileModal} />

diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -3,9 +3,8 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 
 import { ModalContent } from './ModalContent/ModalContent';
-import useResizeAware from 'react-resize-aware';
 import { MobileModal } from 'components/MobileModal';
-import { useMobileModal } from 'hooks/ui';
+import { useMedia, useMobileModal } from 'hooks/ui';
 
 const MuiDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialogContent-root': {
@@ -15,8 +14,7 @@ const MuiDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 export const Modal = ({ showModal, setShowModal }) => {
-  const [resizeListener, { width }] = useResizeAware();
-  const mobileWidth = width <= 767;
+  const { isMobile } = useMedia();
 
   const [showMobileModal, , hideMobileModal] = useMobileModal();
 
@@ -30,9 +28,7 @@ export const Modal = ({ showModal, setShowModal }) => {
 
   return (
     <div>
-      {resizeListener}
-
-      {!mobileWidth ? (
+      {!isMobile ? (
         <div>
           <MuiDialog
             onClose={handleClose}

diff --git a/src/hooks/ui/index.js b/src/hooks/ui/index.js
@@ -2,3 +2,4 @@ export * from './useMobileModal';
 export * from './useSetDocumentTitle';
 export * from './useToggleNoScroll';
 export * from './useListenEscKeyDown';
+export * from './useMedia';