Removed universality of Page level class toggle. (Might be added later.)

src/components/ModalInMobile/ModalInMobile.example.js

@@ -1,9 +1,14 @@
 /* eslint-disable no-console, import/prefer-default-export */
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import { Button } from '../../components';
 import ModalInMobile from './ModalInMobile';
 import css from './ModalInMobile.example.css';
 
+const togglePageClassNames = (className, addClass = true) => {
+  // We are just checking the value for now
+  console.log('Toggling ModalInMobile - currently:', className, addClass);
+}
+
 class ModalInMobileWrapper extends Component {
   constructor(props) {
     super(props);
@@ -11,15 +16,6 @@ class ModalInMobileWrapper extends Component {
     this.handleOpen = this.handleOpen.bind(this);
   }
 
-  getChildContext() {
-    return {
-      togglePageClassNames: (className, addClass = true) => {
-        // We are just checking the value for now
-        console.log('Toggling ModalInMobile - currently:', className, addClass);
-      },
-    };
-  }
-
   handleOpen() {
     this.setState({ isOpen: true });
   }
@@ -28,7 +24,10 @@ class ModalInMobileWrapper extends Component {
     return (
       <div>
         Wrapper text before ModalInMobile
-        <ModalInMobile {...this.props} isModalOpenOnMobile={this.state.isOpen}>
+        <ModalInMobile
+          {...this.props}
+          isModalOpenOnMobile={this.state.isOpen}
+          togglePageClassNames={togglePageClassNames}>
           Some content inside ModalInMobile component
         </ModalInMobile>
         <Button onClick={this.handleOpen} className={css.visibleOnMobileLayout}>Open</Button>
@@ -37,8 +36,6 @@ class ModalInMobileWrapper extends Component {
   }
 }
 
-ModalInMobileWrapper.childContextTypes = { togglePageClassNames: PropTypes.func.isRequired };
-
 export const Empty = {
   component: ModalInMobileWrapper,
   props: {

src/components/ModalInMobile/ModalInMobile.js

@@ -15,7 +15,6 @@ import React, { Component, PropTypes } from 'react';
 import classNames from 'classnames';
 import { intlShape, injectIntl } from 'react-intl';
 import { Button } from '../../components';
-import { withTogglePageClassNames } from '../../util/contextHelpers';
 import css from './ModalInMobile.css';
 
 export class ModalInMobileComponent extends Component {
@@ -139,4 +138,4 @@ ModalInMobileComponent.propTypes = {
   togglePageClassNames: func.isRequired,
 };
 
-export default withTogglePageClassNames(injectIntl(ModalInMobileComponent));
+export default injectIntl(ModalInMobileComponent);

src/components/PageLayout/PageLayout.js

@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import { union, without } from 'lodash';
 import classNames from 'classnames';
 import { Topbar } from '../../containers';
 
@@ -15,18 +14,6 @@ const scrollToTop = () => {
 };
 
 class PageLayout extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      pageClassNames: '',
-    };
-    this.togglePageClassNames = this.togglePageClassNames.bind(this);
-  }
-
-  getChildContext() {
-    return { togglePageClassNames: this.togglePageClassNames };
-  }
-
   componentDidMount() {
     this.historyUnlisten = this.props.history.listen(() => scrollToTop());
   }
@@ -37,17 +24,6 @@ class PageLayout extends Component {
     }
   }
 
-  togglePageClassNames(className, addClass = true) {
-    this.setState(prevState => {
-      const prevPageClassNames = prevState.pageClassNames.split(' ');
-      const pageClassNames = addClass
-        ? union(prevPageClassNames, [className]).join(' ')
-        : without(prevPageClassNames, className).join(' ');
-
-      return { pageClassNames };
-    });
-  }
-
   render() {
     const { className, title, children, authInfoError, logoutError } = this.props;
 
@@ -63,7 +39,7 @@ class PageLayout extends Component {
     /* eslint-enable no-console */
 
     return (
-      <div className={classNames(css.root, className, this.state.pageClassNames)}>
+      <div className={classNames(css.root, className)}>
         <Helmet>
           <title>{title}</title>
         </Helmet>
@@ -88,8 +64,6 @@ class PageLayout extends Component {
 
 const { any, string, instanceOf, func, shape } = PropTypes;
 
-PageLayout.childContextTypes = { togglePageClassNames: func.isRequired };
-
 PageLayout.defaultProps = { className: '', children: null, authInfoError: null, logoutError: null };
 
 PageLayout.propTypes = {

src/containers/ListingPage/ListingPage.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { intlShape, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { union, without } from 'lodash';
 import config from '../../config';
 import { types } from '../../util/sdkLoader';
 import { convertMoneyToNumber } from '../../util/currency';
@@ -36,7 +37,20 @@ export class ListingPageComponent extends Component {
     const tab = props.tab;
     this.state = {
       isBookingModalOpenOnMobile: tab && tab === 'book',
+      pageClassNames: '',
     };
+    this.togglePageClassNames = this.togglePageClassNames.bind(this);
+  }
+
+  togglePageClassNames(className, addClass = true) {
+    this.setState(prevState => {
+      const prevPageClassNames = prevState.pageClassNames.split(' ');
+      const pageClassNames = addClass
+        ? union(prevPageClassNames, [className]).join(' ')
+        : without(prevPageClassNames, className).join(' ');
+
+      return { pageClassNames };
+    });
   }
 
   render() {
@@ -100,6 +114,7 @@ export class ListingPageComponent extends Component {
             onClose={() => this.setState({ isBookingModalOpenOnMobile: false })}
             showAsModalMaxWidth={MODAL_BREAKPOINT}
             title={bookBtnMessage}
+            togglePageClassNames={this.togglePageClassNames}
           >
             <span>ModalInMobile content</span>
           </ModalInMobile>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -17,15 +17,16 @@ exports[`ListingPage matches snapshot 1`] = `
           "__html": "listing1 description",
         }
       } />
-    <withTogglePageClassNames(InjectIntl(ModalInMobileComponent))
+    <InjectIntl(ModalInMobileComponent)
       isModalOpenOnMobile={false}
       onClose={[Function]}
       showAsModalMaxWidth={2500}
-      title="ListingPage.ctaButtonMessage">
+      title="ListingPage.ctaButtonMessage"
+      togglePageClassNames={[Function]}>
       <span>
         ModalInMobile content
       </span>
-    </withTogglePageClassNames(InjectIntl(ModalInMobileComponent))>
+    </InjectIntl(ModalInMobileComponent)>
     <div>
       <Map
         address="listing1 address"

src/util/__snapshots__/contextHelpers.test.js.snap

@@ -5,42 +5,3 @@ exports[`util/contextHelpers.js withFlattenedRoutes should inject the provided r
   SomePage
 </div>
 `;
-
-exports[`util/contextHelpers.js withTogglePageClassNames should inject the provided function 1`] = `
-<div
-  className="">
-  <div
-    className={undefined}>
-    <div>
-      <a
-        className="NamedLink_active"
-        href="/"
-        onClick={[Function]}
-        style={Object {}}>
-        <span
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "&#127968;",
-            }
-          } />
-      </a>
-    </div>
-    <div
-      className={undefined}>
-      <a
-        className=""
-        href="/login"
-        onClick={[Function]}
-        style={Object {}}>
-        Login
-      </a>
-    </div>
-  </div>
-  <div
-    className={undefined}>
-    <div>
-      function
-    </div>
-  </div>
-</div>
-`;

src/util/contextHelpers.test.js

@@ -29,21 +29,4 @@ describe('util/contextHelpers.js', () => {
       expect(deepTree).toMatchSnapshot();
     });
   });
-
-  describe('withTogglePageClassNames', () => {
-    it('should inject the provided function', () => {
-      const CompComp = props => <div>{typeof props.togglePageClassNames}</div>;
-      CompComp.propTypes = { togglePageClassNames: func.isRequired };
-      const Comp = withTogglePageClassNames(CompComp);
-
-      const deepTree = renderDeep(
-        <RoutesProvider flattenedRoutes={flattenRoutes(routesConfiguration)}>
-          <PageLayout title="testing withTogglePageClassNames">
-            <Comp />
-          </PageLayout>
-        </RoutesProvider>
-      );
-      expect(deepTree).toMatchSnapshot();
-    });
-  });
 });