feat(Header, ContentLayout): calculate isMobile by screen size (#1228)

* fix(Header, ContentLayout): calculate isMobile by screen size

* fix: requested changes

Author: PahaN47

src/blocks/ContentLayout/ContentLayout.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 
 import {BackgroundImage, FileLink} from '../../components';
-import {MobileContext} from '../../context/mobileContext';
 import {useTheme} from '../../context/theme';
 import {Col} from '../../grid';
 import {ContentLayoutBlockProps, ContentSize, ContentTextSize} from '../../models';
 import {Content} from '../../sub-blocks';
 import {block, getThemedValue} from '../../utils';
 
 import './ContentLayout.scss';
+import {useWindowWidth} from '../../context/windowWidthContext';
+import {BREAKPOINTS} from '../../constants';
 
 const b = block('content-layout-block');
 
@@ -35,7 +36,9 @@ function getTextWidth(size: ContentTextSize) {
 }
 
 export const ContentLayoutBlock = (props: ContentLayoutBlockProps) => {
-    const isMobile = React.useContext(MobileContext);
+    const windowWidth = useWindowWidth();
+    const isMobile = windowWidth <= BREAKPOINTS.sm;
+
     const {
         textContent,
         fileContent,

src/blocks/Header/Header.tsx

@@ -6,7 +6,6 @@ import {Button, Media, RouterLink} from '../../components';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs/HeaderBreadcrumbs';
 import {getMediaImage} from '../../components/Media/Image/utils';
 import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
-import {MobileContext} from '../../context/mobileContext';
 import {useTheme} from '../../context/theme';
 import {Col, Grid, Row} from '../../grid';
 import {ClassNameProps, HeaderBlockBackground, HeaderBlockProps} from '../../models';
@@ -15,6 +14,8 @@ import {mergeVideoMicrodata} from '../../utils/microdata';
 
 import {getImageSize, getTitleSizes, titleWithImageSizes} from './utils';
 import './Header.scss';
+import {useWindowWidth} from '../../context/windowWidthContext';
+import {BREAKPOINTS} from '../../constants';
 
 const b = block('header-block');
 
@@ -85,7 +86,8 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
         centered,
         additionalInfo,
     } = props;
-    const isMobile = React.useContext(MobileContext);
+    const windowWidth = useWindowWidth();
+    const isMobile = windowWidth <= BREAKPOINTS.sm;
     const theme = useTheme();
     const hasRightSideImage = Boolean((image || video) && !centered);
     const curImageSize = imageSize || getImageSize(width);
@@ -101,10 +103,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
     const videoThemed = video && getThemedValue(video, theme);
     const mediaWithMicrodata = mergeVideoMicrodata(
         {video: videoThemed, image: imageThemed},
-        {
-            name: title,
-            description,
-        },
+        {name: title, description},
     );
     const fullWidth = backgroundThemed?.fullWidth || backgroundThemed?.fullWidthMedia;
     const titleId = useUniqId();
@@ -149,9 +148,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                                     tagName="div"
                                                     className={b('overtitle')}
                                                     content={overtitle}
-                                                    modifiers={{
-                                                        constructor: true,
-                                                    }}
+                                                    modifiers={{constructor: true}}
                                                 />
                                             ) : (
                                                 overtitle
@@ -162,10 +159,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                         content={title}
                                         contentClassName={b('title')}
                                         className={b('title-container')}
-                                        modifiers={{
-                                            constructor: true,
-                                            constructorTheme: textTheme,
-                                        }}
+                                        modifiers={{constructor: true, constructorTheme: textTheme}}
                                         tagName="h1"
                                         contentPosition="end"
                                     >

src/containers/PageConstructor/Provider.tsx

@@ -19,6 +19,7 @@ import {
 import {SSRContext, SSRContextProps} from '../../context/ssrContext';
 import {ThemeContext} from '../../context/theme';
 import {Theme} from '../../models';
+import {WindowWidthProvider} from '../../context/windowWidthContext';
 
 export interface PageConstructorProviderProps {
     isMobile?: boolean;
@@ -62,6 +63,7 @@ export const PageConstructorProvider = (
         <AnalyticsContext.Provider value={analytics} />,
         <FormsContext.Provider value={forms} />,
         <SSRContext.Provider value={{isServer: ssrConfig?.isServer}} />,
+        <WindowWidthProvider />,
     ].reduceRight((prev, provider) => React.cloneElement(provider, {}, prev), children);
     /* eslint-enable react/jsx-key */
 

src/context/windowWidthContext/BreakpointContext.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import throttle from 'lodash/throttle';
+import {SSRContext} from '../ssrContext';
+import {BREAKPOINTS} from '../../constants';
+
+const DEFAULT_WIDTH = BREAKPOINTS.xl;
+const UPDATE_FREQUENCY_MS = 100;
+
+export const WindowWidthContext = React.createContext<number>(DEFAULT_WIDTH);
+
+export const WindowWidthProvider = ({children}: React.PropsWithChildren) => {
+    const {isServer} = React.useContext(SSRContext);
+
+    const [windowWidth, setWindowWidth] = React.useState(DEFAULT_WIDTH);
+
+    React.useEffect(() => {
+        if (isServer) {
+            return;
+        }
+
+        const handleResize = throttle(
+            () => {
+                setWindowWidth(window.innerWidth);
+            },
+            UPDATE_FREQUENCY_MS,
+            {leading: true},
+        );
+
+        handleResize();
+
+        window.addEventListener('resize', handleResize, {passive: true});
+
+        // eslint-disable-next-line consistent-return
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isServer]);
+
+    return (
+        <WindowWidthContext.Provider value={windowWidth}>{children}</WindowWidthContext.Provider>
+    );
+};
+
+export const useWindowWidth = () => React.useContext(WindowWidthContext);

src/context/windowWidthContext/index.ts

@@ -0,0 +1 @@
+export * from './BreakpointContext';