DOP-1749: Fix walkabout, refactor screen size hooks (#328)

package.json

@@ -83,7 +83,6 @@
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
     "react-loadable": "^5.5.0",
-    "react-responsive": "^8.2.0",
     "sanitize-html": "^2.2.0"
   },
   "husky": {

src/components/Heading.js

@@ -17,7 +17,7 @@ const Heading = ({ sectionDepth, nodeData, ...rest }) => {
   const HeadingTag = sectionDepth >= 1 && sectionDepth <= 6 ? `h${sectionDepth}` : 'h6';
 
   const isPageTitle = sectionDepth === 1;
-  const { isTabletOrMobile, isSmallScreen } = useScreenSize();
+  const { isMobile, isTabletOrMobile } = useScreenSize();
   const shouldShowMobileHeader = isPageTitle && isTabletOrMobile;
   const { selectors } = useContext(TabContext);
   const hasSelectors = selectors && Object.keys(selectors).length > 0;
@@ -27,10 +27,10 @@ const Heading = ({ sectionDepth, nodeData, ...rest }) => {
       condition={shouldShowMobileHeader}
       wrapper={children => (
         <>
-          <HeadingContainer stackVertically={isSmallScreen}>
+          <HeadingContainer stackVertically={isMobile}>
             {children}
-            <ChildContainer isStacked={isSmallScreen}>
-              {hasSelectors ? <TabSelectors /> : <FeedbackHeading isStacked={isSmallScreen} />}
+            <ChildContainer isStacked={isMobile}>
+              {hasSelectors ? <TabSelectors /> : <FeedbackHeading isStacked={isMobile} />}
             </ChildContainer>
           </HeadingContainer>
           <Contents />

src/components/Widgets/FeedbackWidget/FeedbackForm.js

@@ -25,11 +25,11 @@ export function FeedbackContent({ view }) {
 }
 
 export default function FeedbackForm(props) {
-  const { isTabletOrMobile, isSmallScreen } = useScreenSize();
+  const { isMobile, isTabletOrMobile } = useScreenSize();
   const { view } = useFeedbackState();
   const isOpen = view !== 'waiting';
 
-  const displayAs = isSmallScreen ? 'fullscreen' : isTabletOrMobile ? 'modal' : 'floating';
+  const displayAs = isMobile ? 'fullscreen' : isTabletOrMobile ? 'modal' : 'floating';
   const Container = {
     // If big screen, render a floating card
     floating: FeedbackCard,

src/components/Widgets/FeedbackWidget/views/SubmittedView.js

@@ -6,7 +6,7 @@ import { Layout, Heading, Subheading } from '../components/view-components';
 
 export default function SubmittedView(props) {
   const { abandon } = useFeedbackState();
-  const { isSmallScreen } = useScreenSize();
+  const { isMobile } = useScreenSize();
   return (
     <Layout>
       <Heading>We appreciate your feedback.</Heading>
@@ -15,7 +15,7 @@ export default function SubmittedView(props) {
         <span>For additional support, explore the </span>
         <a href="https://developer.mongodb.com/community/forums/">MongoDB discussion forum.</a>
       </Subheading>
-      {isSmallScreen && <Button onClick={() => abandon()}>Return to the Documentation</Button>}
+      {isMobile && <Button onClick={() => abandon()}>Return to the Documentation</Button>}
     </Layout>
   );
 }

src/hooks/useScreenSize.js

@@ -1,21 +1,13 @@
-import { useMediaQuery } from 'react-responsive';
 import useMedia from './use-media';
 import { theme } from '../theme/docsTheme';
 
 export default function useScreenSize() {
-  const isSmallScreen = useMediaQuery({ query: '(max-width: 750px)' });
-  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
   const isMobile = useMedia(theme.screenSize.upToSmall);
-  // const isDesktopOrLaptop = useMediaQuery({ query: '(min-device-width: 1224px)' });
-  // const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' });
-  // const isTabletOrMobileDevice = useMediaQuery({ query: '(max-device-width: 1224px)' });
-  // const isPortrait = useMediaQuery({ query: '(orientation: portrait)' });
-  // const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' });
+  const isTabletOrMobile = useMedia(theme.screenSize.upToLarge);
 
   const screen = {
     isMobile,
     isTabletOrMobile,
-    isSmallScreen,
   };
   return screen;
 }

src/templates/document.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { getNestedValue } from '../utils/get-nested-value';
 import Breadcrumbs from '../components/Breadcrumbs';
@@ -7,7 +7,6 @@ import Sidebar from '../components/Sidebar';
 import RightColumn from '../components/RightColumn';
 import TabSelectors from '../components/TabSelectors';
 import Contents from '../components/Contents';
-import { useWindowSize } from '../hooks/use-window-size.js';
 import useScreenSize from '../hooks/useScreenSize.js';
 import style from '../styles/navigation.module.css';
 import { isBrowser } from '../utils/is-browser.js';
@@ -20,20 +19,21 @@ const Document = ({
     metadata: { parentPaths, publishedBranches, slugToTitle: slugTitleMapping, toctree, toctreeOrder },
   },
 }) => {
-  const windowSize = useWindowSize();
-  const minWindowWidth = 1093; /* Specific value from docs-tools/themes/mongodb/src/css/mongodb-base.css */
-
-  const [showLeftColumn, setShowLeftColumn] = useState(windowSize.width > minWindowWidth);
+  const { isTabletOrMobile } = useScreenSize();
+  const [showLeftColumn, setShowLeftColumn] = useState(!isTabletOrMobile);
   /* Add the postRender CSS class without disturbing pre-render functionality */
   const renderStatus = isBrowser ? style.postRender : '';
   const pageOptions = getNestedValue(['ast', 'options'], page);
   const showPrevNext = !(pageOptions && pageOptions.noprevnext === '');
+  const showRightColumn = !isTabletOrMobile;
+
   const toggleLeftColumn = () => {
     setShowLeftColumn(!showLeftColumn);
   };
 
-  const { isTabletOrMobile } = useScreenSize();
-  const showRightColumn = !isTabletOrMobile;
+  useEffect(() => {
+    setShowLeftColumn(!isTabletOrMobile);
+  }, [isTabletOrMobile]);
 
   return (
     <div className="content">
@@ -60,7 +60,7 @@ const Document = ({
             <div className="bodywrapper">
               <div className="body">
                 <Breadcrumbs parentPaths={getNestedValue([slug], parentPaths)} slugTitleMapping={slugTitleMapping} />
-                {children}
+                <div>{children}</div>
                 {showPrevNext && (
                   <InternalPageNav slug={slug} slugTitleMapping={slugTitleMapping} toctreeOrder={toctreeOrder} />
                 )}