PasswordForgottenPage: update PageLayout and Topbar handling

src/containers/PasswordForgottenPage/PasswordForgottenPage.js

@@ -1,5 +1,11 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
-import { PageLayout } from '../../components';
+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';
 import { PasswordForgottenForm } from '../../containers';
 
 const sendPasswordResetEmail = values => {
@@ -7,10 +13,95 @@ const sendPasswordResetEmail = values => {
   console.log('submit with values:', values);
 };
 
-const PasswordForgottenPage = () => (
+export const PasswordForgottenPageComponent = props => {
-  <PageLayout title="Request new password">
+  const {
-    <PasswordForgottenForm onSubmit={sendPasswordResetEmail} />
+    authInfoError,
-  </PageLayout>
+    authInProgress,
+    currentUser,
+    currentUserHasListings,
+    history,
+    isAuthenticated,
+    location,
+    logoutError,
+    notificationCount,
+    onLogout,
+    onManageDisableScrolling,
+  } = props;
+
+  return (
+    <PageLayout authInfoError={authInfoError} logoutError={logoutError} title="Request new password">
+      <Topbar
+        authInProgress={authInProgress}
+        currentUser={currentUser}
+        currentUserHasListings={currentUserHasListings}
+        history={history}
+        isAuthenticated={isAuthenticated}
+        location={location}
+        notificationCount={notificationCount}
+        onLogout={onLogout}
+        onManageDisableScrolling={onManageDisableScrolling}
+      />
+      <PasswordForgottenForm onSubmit={sendPasswordResetEmail} />
+    </PageLayout>
+  );
+};
+
+PasswordForgottenPageComponent.defaultProps = {
+  authInfoError: null,
+  currentUser: null,
+  logoutError: null,
+  notificationCount: 0,
+};
+
+const { bool, func, instanceOf, number, object, shape } = PropTypes;
+
+PasswordForgottenPageComponent.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 PasswordForgottenPage = compose(connect(mapStateToProps, mapDispatchToProps), withRouter)(
+  PasswordForgottenPageComponent
 );
 
 export default PasswordForgottenPage;

src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js

@@ -1,10 +1,24 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import PasswordForgottenPage from './PasswordForgottenPage';
+import { PasswordForgottenPageComponent } from './PasswordForgottenPage';
 
-describe('PasswordForgottenPage', () => {
+const noop = () => null;
+
+describe('ContactDetailsPage', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<PasswordForgottenPage />);
+    const tree = renderShallow(
+      <PasswordForgottenPageComponent
+        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/PasswordForgottenPage/__snapshots__/PasswordForgottenPage.test.js.snap

@@ -1,7 +1,27 @@
-exports[`PasswordForgottenPage matches snapshot 1`] = `
+exports[`ContactDetailsPage matches snapshot 1`] = `
-<Connect(withRouter(PageLayout))
+<withRouter(PageLayout)
+  authInfoError={null}
+  logoutError={null}
   title="Request new password">
+  <Topbar
+    authInProgress={false}
+    currentUser={null}
+    currentUserHasListings={false}
+    history={
+      Object {
+        "push": [Function],
+      }
+    }
+    isAuthenticated={false}
+    location={
+      Object {
+        "search": "",
+      }
+    }
+    notificationCount={0}
+    onLogout={[Function]}
+    onManageDisableScrolling={[Function]} />
   <ReduxForm
     onSubmit={[Function]} />
-</Connect(withRouter(PageLayout))>
+</withRouter(PageLayout)>
 `;