PayoutPreferencesPage: update PageLayout and Topbar handling

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js

@@ -1,4 +1,100 @@
-import React from 'react';
-import { PageLayout } from '../../components';
+import React, { PropTypes } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import * as propTypes from '../../util/propTypes';
+import { logout, authenticationInProgress } from '../../ducks/Auth.duck';
+import { manageDisableScrolling, isScrollingDisabled } from '../../ducks/UI.duck';
+import { PageLayout, Topbar } from '../../components';
 
-export default () => <PageLayout title="Payout preferences" />;
+export const PayoutPreferencesPageComponent = props => {
+  const {
+    authInfoError,
+    authInProgress,
+    currentUser,
+    currentUserHasListings,
+    history,
+    isAuthenticated,
+    location,
+    logoutError,
+    notificationCount,
+    onLogout,
+    onManageDisableScrolling,
+  } = props;
+
+  return (
+    <PageLayout authInfoError={authInfoError} logoutError={logoutError} title="Payout preferences">
+      <Topbar
+        authInProgress={authInProgress}
+        currentUser={currentUser}
+        currentUserHasListings={currentUserHasListings}
+        history={history}
+        isAuthenticated={isAuthenticated}
+        location={location}
+        notificationCount={notificationCount}
+        onLogout={onLogout}
+        onManageDisableScrolling={onManageDisableScrolling}
+      />
+    </PageLayout>
+  );
+};
+
+PayoutPreferencesPageComponent.defaultProps = {
+  authInfoError: null,
+  currentUser: null,
+  logoutError: null,
+  notificationCount: 0,
+};
+
+const { bool, func, instanceOf, number, object, shape } = PropTypes;
+
+PayoutPreferencesPageComponent.propTypes = {
+  authInfoError: instanceOf(Error),
+  authInProgress: bool.isRequired,
+  currentUser: propTypes.currentUser,
+  currentUserHasListings: bool.isRequired,
+  isAuthenticated: bool.isRequired,
+  logoutError: instanceOf(Error),
+  notificationCount: number,
+  onLogout: func.isRequired,
+  onManageDisableScrolling: func.isRequired,
+
+  // from withRouter
+  history: shape({
+    push: func.isRequired,
+  }).isRequired,
+  location: shape({ state: object }).isRequired,
+};
+
+const mapStateToProps = state => {
+  // PageLayout needs authInfoError and logoutError, Topbar needs isAuthenticated
+  const { authInfoError, isAuthenticated, logoutError } = state.Auth;
+  // Topbar needs user info.
+  const {
+    currentUser,
+    currentUserHasListings,
+    currentUserNotificationCount: notificationCount,
+  } = state.user;
+  return {
+    authInfoError,
+    authInProgress: authenticationInProgress(state),
+    currentUser,
+    currentUserHasListings,
+    currentUserNotificationCount: notificationCount,
+    isAuthenticated,
+    logoutError,
+    scrollingDisabled: isScrollingDisabled(state),
+  };
+};
+
+const mapDispatchToProps = dispatch => ({
+  onLogout: historyPush => dispatch(logout(historyPush)),
+  onManageDisableScrolling: (componentId, disableScrolling) =>
+    dispatch(manageDisableScrolling(componentId, disableScrolling)),
+});
+
+const PayoutPreferencesPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
+  PayoutPreferencesPageComponent
+);
+
+export default PayoutPreferencesPage;

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js

@@ -1,10 +1,24 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import PayoutPreferencesPage from './PayoutPreferencesPage';
+import { PayoutPreferencesPageComponent } from './PayoutPreferencesPage';
+
+const noop = () => null;
 
 describe('PayoutPreferencesPage', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<PayoutPreferencesPage />);
+    const tree = renderShallow(
+      <PayoutPreferencesPageComponent
+        params={{ displayName: 'my-shop' }}
+        history={{ push: noop }}
+        location={{ search: '' }}
+        scrollingDisabled={false}
+        authInProgress={false}
+        currentUserHasListings={false}
+        isAuthenticated={false}
+        onLogout={noop}
+        onManageDisableScrolling={noop}
+      />
+    );
     expect(tree).toMatchSnapshot();
   });
 });

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

@@ -1,4 +1,25 @@
 exports[`PayoutPreferencesPage matches snapshot 1`] = `
-<Connect(withRouter(PageLayout))
-  title="Payout preferences" />
+<withRouter(PageLayout)
+  authInfoError={null}
+  logoutError={null}
+  title="Payout preferences">
+  <Topbar
+    authInProgress={false}
+    currentUser={null}
+    currentUserHasListings={false}
+    history={
+      Object {
+        "push": [Function],
+      }
+    }
+    isAuthenticated={false}
+    location={
+      Object {
+        "search": "",
+      }
+    }
+    notificationCount={0}
+    onLogout={[Function]}
+    onManageDisableScrolling={[Function]} />
+</withRouter(PageLayout)>
 `;