Provide togglePageClassNames

src/components/EditListingWizard/EditListingWizard.example.js

@@ -3,20 +3,23 @@ import { flattenRoutes } from '../../util/routes';
 import routesConfiguration from '../../routesConfiguration';
 import EditListingWizard from './EditListingWizard';
 
+const noop = () => null;
+
 export const NoPhotos = {
   component: EditListingWizard,
   props: {
     flattenedRoutes: flattenRoutes(routesConfiguration),
-    history: { push: () => {} },
+    history: { push: noop },
     selectedTab: 'pricing',
     images: [],
     listing: createListing('listing1'),
     stripeConnected: true,
-    onImageUpload: () => {},
-    onUpdateImageOrder: () => {},
-    onCreateListing: () => {},
-    onCreateListingDraft: () => {},
-    onUpdateListingDraft: () => {},
+    onImageUpload: noop,
+    onUpdateImageOrder: noop,
+    onCreateListing: noop,
+    onCreateListingDraft: noop,
+    onUpdateListingDraft: noop,
+    togglePageClassNames: noop,
   },
   useDefaultWrapperStyles: false,
 };

src/components/EditListingWizard/EditListingWizard.js

@@ -70,6 +70,7 @@ const EditListingWizard = props => {
     rootClassName,
     selectedTab,
     currentUser,
+    togglePageClassNames,
   } = props;
 
   const rootClasses = rootClassName || css.root;
@@ -157,6 +158,7 @@ const EditListingWizard = props => {
         }}
         onUpdateImageOrder={onUpdateImageOrder}
         currentUser={currentUser}
+        togglePageClassNames={togglePageClassNames}
       />
     </Tabs>
   );
@@ -197,6 +199,7 @@ EditListingWizard.propTypes = {
   rootClassName: string,
   selectedTab: oneOf(STEPS).isRequired,
   currentUser: propTypes.currentUser,
+  togglePageClassNames: func.isRequired,
 };
 
 export default EditListingWizard;

src/containers/EditListingPage/EditListingPage.js

@@ -1,8 +1,9 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { compose } from 'redux';
 import { withRouter } from 'react-router-dom';
 import { intlShape, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
+import { union, without } from 'lodash';
 import { types } from '../../util/sdkLoader';
 import { createSlug } from '../../util/urlHelpers';
 import * as propTypes from '../../util/propTypes';
@@ -42,74 +43,93 @@ const formatRequestData = values => {
 };
 
 // N.B. All the presentational content needs to be extracted to their own components
-export const EditListingPageComponent = props => {
-  const {
-    flattenedRoutes,
-    history,
-    intl,
-    onCreateListing,
-    onImageUpload,
-    onUpdateImageOrder,
-    page,
-    params,
-    tab,
-    type,
-    currentUser,
-    getListing,
-    onCreateListingDraft,
-    onUpdateListingDraft,
-  } = props;
-  const isNew = type === 'new';
-  const hasIdParam = params && params.id;
-  const id = page.submittedListingId || (hasIdParam ? new types.UUID(params.id) : null);
-  const currentListing = getListing(id);
-
-  const shouldRedirect = page.submittedListingId && currentListing;
-  const showForm = isNew || currentListing;
-
-  if (shouldRedirect) {
-    // If page has already listingId (after submit) and current listings exist
-    // redirect to listing page
-    const slug = currentListing ? createSlug(currentListing.attributes.title) : null;
-    return <NamedRedirect name="ListingPage" params={{ id: id.uuid, slug }} />;
-  } else if (showForm) {
-    // Show form if user is posting a new listing or editing existing one
-    const disableForm = page.redirectToListing && !page.showListingsError;
-
-    // Images are passed to EditListingForm so that it can generate thumbnails out of them
-    const images = page.imageOrder.map(i => page.images[i]);
-
-    const title = isNew
-      ? intl.formatMessage({ id: 'EditListingPage.titleCreateListing' })
-      : intl.formatMessage({ id: 'EditListingPage.titleEditListing' });
-
-    return (
-      <PageLayout title={title}>
-        <EditListingWizard
-          disabled={disableForm}
-          flattenedRoutes={flattenedRoutes}
-          history={history}
-          images={images}
-          listing={page.listingDraft}
-          onCreateListing={onCreateListing}
-          onCreateListingDraft={onCreateListingDraft}
-          onUpdateListingDraft={onUpdateListingDraft}
-          onImageUpload={onImageUpload}
-          onUpdateImageOrder={onUpdateImageOrder}
-          selectedTab={tab}
-          currentUser={currentUser}
-        />
-      </PageLayout>
-    );
-  } else {
-    // If user has come to this page through a direct linkto edit existing listing,
-    // we need to load it first.
-    const loadingPageMsg = {
-      id: 'ListingPage.loadingListingData',
-    };
-    return <PageLayout title={intl.formatMessage(loadingPageMsg)} />;
+export class EditListingPageComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 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() {
+    const {
+      flattenedRoutes,
+      history,
+      intl,
+      onCreateListing,
+      onImageUpload,
+      onUpdateImageOrder,
+      page,
+      params,
+      tab,
+      type,
+      currentUser,
+      getListing,
+      onCreateListingDraft,
+      onUpdateListingDraft,
+    } = this.props;
+    const isNew = type === 'new';
+    const hasIdParam = params && params.id;
+    const id = page.submittedListingId || (hasIdParam ? new types.UUID(params.id) : null);
+    const currentListing = getListing(id);
+
+    const shouldRedirect = page.submittedListingId && currentListing;
+    const showForm = isNew || currentListing;
+
+    if (shouldRedirect) {
+      // If page has already listingId (after submit) and current listings exist
+      // redirect to listing page
+      const slug = currentListing ? createSlug(currentListing.attributes.title) : null;
+      return <NamedRedirect name="ListingPage" params={{ id: id.uuid, slug }} />;
+    } else if (showForm) {
+      // Show form if user is posting a new listing or editing existing one
+      const disableForm = page.redirectToListing && !page.showListingsError;
+
+      // Images are passed to EditListingForm so that it can generate thumbnails out of them
+      const images = page.imageOrder.map(i => page.images[i]);
+
+      const title = isNew
+        ? intl.formatMessage({ id: 'EditListingPage.titleCreateListing' })
+        : intl.formatMessage({ id: 'EditListingPage.titleEditListing' });
+
+      return (
+        <PageLayout title={title} className={this.state.pageClassNames}>
+          <EditListingWizard
+            disabled={disableForm}
+            flattenedRoutes={flattenedRoutes}
+            history={history}
+            images={images}
+            listing={page.listingDraft}
+            onCreateListing={onCreateListing}
+            onCreateListingDraft={onCreateListingDraft}
+            onUpdateListingDraft={onUpdateListingDraft}
+            onImageUpload={onImageUpload}
+            onUpdateImageOrder={onUpdateImageOrder}
+            selectedTab={tab}
+            currentUser={currentUser}
+            togglePageClassNames={this.togglePageClassNames}
+          />
+        </PageLayout>
+      );
+    } else {
+      // If user has come to this page through a direct linkto edit existing listing,
+      // we need to load it first.
+      const loadingPageMsg = {
+        id: 'ListingPage.loadingListingData',
+      };
+      return <PageLayout title={intl.formatMessage(loadingPageMsg)} />;
+    }
+  }
+}
 
 EditListingPageComponent.loadData = id => {
   requestShowListing({ id, include: ['author', 'images'] });

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

@@ -1,5 +1,6 @@
 exports[`EditListingPageComponent matches snapshot 1`] = `
 <Connect(withRouter(PageLayout))
+  className=""
   title="EditListingPage.titleCreateListing">
   <EditListingWizard
     className={null}
@@ -18,6 +19,7 @@ exports[`EditListingPageComponent matches snapshot 1`] = `
     onUpdateImageOrder={[Function]}
     onUpdateListingDraft={[Function]}
     rootClassName={null}
-    selectedTab="description" />
+    selectedTab="description"
+    togglePageClassNames={[Function]} />
 </Connect(withRouter(PageLayout))>
 `;