Rename Page.js to PageLayout.js

src/components/Page/Page.js

@@ -1,23 +0,0 @@
-import React, { PropTypes } from 'react';
-import Helmet from 'react-helmet';
-import { Topbar } from '../../containers';
-
-const Page = props => {
-  const { className, title, children } = props;
-  return (
-    <div className={className}>
-      <Helmet title={title} />
-      <Topbar />
-      <h1>{title}</h1>
-      {children}
-    </div>
-  );
-};
-
-const { string, any } = PropTypes;
-
-Page.defaultProps = { className: '', children: null };
-
-Page.propTypes = { className: string, title: string.isRequired, children: any };
-
-export default Page;

src/components/PageLayout/PageLayout.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+import Helmet from 'react-helmet';
+import { Topbar } from '../../containers';
+
+const scrollToTop = () => {
+  // Todo: this might need fine tuning later
+  window.scrollTo(0, 0);
+}
+
+class PageLayout extends Component {
+
+  componentDidMount() {
+    this.historyUnlisten = this.context.history.listen(() => scrollToTop());
+  }
+
+  componentWillUnmount() {
+    this.historyUnlisten();
+  }
+
+
+  render() {
+    const { className, title, children } = this.props;
+    return (
+      <div className={className}>
+        <Helmet title={title} />
+        <Topbar />
+        <h1>{title}</h1>
+        {children}
+      </div>
+    );
+  }
+}
+
+PageLayout.contextTypes = { history: React.PropTypes.object };
+
+PageLayout.defaultProps = { className: '', children: null };
+
+const { string, any } = PropTypes;
+
+Page.propTypes = { className: string, title: string.isRequired, children: any };
+
+export default Page;

src/components/index.js

@@ -1,4 +1,4 @@
 /* eslint-disable import/prefer-default-export */
-import Page from './Page/Page';
+import PageLayout from './PageLayout/PageLayout';
 
-export { Page };
+export { PageLayout };

src/containers/AuthenticationPage/AuthenticationPage.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { Link, Redirect } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 import { fakeAuth } from '../../Routes';
 
 class AuthenticationPage extends Component {
@@ -30,30 +30,28 @@ class AuthenticationPage extends Component {
     const alternativeMethod = this.props.tab === 'login' ? toSignup : toLogin;
     const currentMethod = this.props.tab === 'login' ? 'Log in' : 'Sign up';
 
-    const fromLoginMsg = from ? (
-        <p>
-          You must log in to view the page at
-          <code>{from.pathname}</code>
-        </p>
-      ) : null;
+    const fromLoginMsg = from ? <p>
+        You must log in to view the page at
+        <code>{from.pathname}</code>
+      </p> : null;
 
     return (
-      <Page title={`Authentication page: ${this.props.tab} tab`}>
+      <PageLayout title={`Authentication page: ${this.props.tab} tab`}>
         {redirectToReferrer ? <Redirect to={from || '/'} /> : null}
         {fromLoginMsg}
         <button onClick={this.login}>{currentMethod}</button>
         <p>or {alternativeMethod}</p>
-      </Page>
+      </PageLayout>
     );
   }
 }
 
 AuthenticationPage.defaultProps = { location: {}, tab: 'signup' };
 
-const { shape, string, oneOf } = PropTypes;
+const { shape, string, object, oneOf, oneOfType } = PropTypes;
 
 AuthenticationPage.propTypes = {
-  location: shape({ state: shape({ from: string }) }),
+  location: shape({ state: shape({ from: oneOfType([object, string]) }) }),
   tab: oneOf([ 'login', 'signup' ]),
 };
 

src/containers/AuthenticationPage/AuthenticationPage.test.js

@@ -6,11 +6,9 @@ import AuthenticationPage from './AuthenticationPage';
 describe('AuthenticationPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <AuthenticationPage location={{ state: { from: '/protected' } }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <AuthenticationPage location={{ state: { from: '/protected' } }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/CheckoutPage/CheckoutPage.js

@@ -1,11 +1,11 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const CheckoutPage = ({ params }) => (
-  <Page title={`Checkout page: ${params.listingId}`}>
+  <PageLayout title={`Checkout page: ${params.listingId}`}>
     <Link to={`/order/12345`}><button>Pay</button></Link>
-  </Page>
+  </PageLayout>
 );
 
 const { shape, string } = PropTypes;

src/containers/CheckoutPage/CheckoutPage.test.js

@@ -6,11 +6,9 @@ import CheckoutPage from './CheckoutPage';
 describe('CheckoutPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <CheckoutPage params={{ listingId: 'some-listing-id' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <CheckoutPage params={{ listingId: 'some-listing-id' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/ContactDetailsPage/ContactDetailsPage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Contact details" />
+export default () => <PageLayout title="Contact details" />;

src/containers/ContactDetailsPage/ContactDetailsPage.test.js

@@ -6,11 +6,9 @@ import ContactDetailsPage from './ContactDetailsPage';
 describe('ContactDetailsPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <ContactDetailsPage params={{ displayName: 'my-shop' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <ContactDetailsPage params={{ displayName: 'my-shop' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/ConversationPage/ConversationPage.js

@@ -1,12 +1,12 @@
 import React, { PropTypes } from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const ConversationPage = props => {
   const { params } = props;
   return (
-    <Page title="Conversation page">
+    <PageLayout title="Conversation page">
       <p>Conversation id: {params.id}</p>
-    </Page>
+    </PageLayout>
   );
 };
 

src/containers/ConversationPage/ConversationPage.test.js

@@ -6,11 +6,9 @@ import ConversationPage from './ConversationPage';
 describe('ConversationPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <ConversationPage params={{ id: 'some-conversation-id' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <ConversationPage params={{ id: 'some-conversation-id' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/EditProfilePage/EditProfilePage.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const EditProfilePage = props => {
   const { params } = props;
-  return <Page title={`Edit profile page with display name: ${params.displayName}`} />;
+  return <PageLayout title={`Edit profile page with display name: ${params.displayName}`} />;
 };
 
 const { shape, string } = PropTypes;

src/containers/EditProfilePage/EditProfilePage.test.js

@@ -6,11 +6,9 @@ import EditProfilePage from './EditProfilePage';
 describe('EditProfilePage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <EditProfilePage params={{ displayName: 'my-shop' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <EditProfilePage params={{ displayName: 'my-shop' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/InboxPage/InboxPage.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const toPath = (filter, id) => {
   switch (filter) {
@@ -16,11 +16,11 @@ const toPath = (filter, id) => {
 const InboxPage = props => {
   const { filter } = props;
   return (
-    <Page title={`${filter} page`}>
+    <PageLayout title={`${filter} page`}>
       <ul>
         <li><Link to={toPath(filter, 1234)}>Single thread</Link></li>
       </ul>
-    </Page>
+    </PageLayout>
   );
 };
 
@@ -28,6 +28,6 @@ InboxPage.defaultProps = { filter: 'conversation' };
 
 const { oneOf } = PropTypes;
 
-InboxPage.propTypes = { filter: oneOf([ 'orders', 'sales', 'conversation' ]) };
+InboxPage.propTypes = { filter: oneOf([ 'orders', 'sales', 'inbox' ]) };
 
 export default InboxPage;

src/containers/InboxPage/InboxPage.test.js

@@ -8,7 +8,7 @@ describe('InboxPage', () => {
     const component = renderer.create(
       (
         <BrowserRouter>
-          <InboxPage />
+          <InboxPage filter='inbox' />
         </BrowserRouter>
       ),
     );

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

@@ -135,7 +135,7 @@ exports[`InboxPage matches snapshot 1`] = `
     </button>
   </div>
   <h1>
-    conversation page
+    inbox page
   </h1>
   <ul>
     <li>

src/containers/LandingPage/LandingPage.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 export default () => (
-  <Page title="Landing page">
+  <PageLayout title="Landing page">
     <Link to="/s?location=helsinki">Find studios</Link>
-  </Page>
-)
+  </PageLayout>
+);

src/containers/LandingPage/LandingPage.test.js

@@ -6,11 +6,9 @@ import LandingPage from './LandingPage';
 describe('LandingPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <LandingPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <LandingPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/ListingPage/ListingPage.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const ListingPage = ({ params }) => {
   // Listing id should be located either in the end of slug
@@ -11,10 +11,10 @@ const ListingPage = ({ params }) => {
 
   // TODO: Fetch data from SDK if no data is passed through props
   return (
-    <Page title={`Listing page with listing id: #${id}`}>
+    <PageLayout title={`Listing page with listing id: #${id}`}>
       <p>Slug: {params.slug}</p>
       <Link to={`/checkout/${id}`}><button>Book</button></Link>
-    </Page>
+    </PageLayout>
   );
 };
 

src/containers/ListingPage/ListingPage.test.js

@@ -6,11 +6,9 @@ import ListingPage from './ListingPage';
 describe('ListingPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <ListingPage params={{ slug: 'really-nice-house-1234' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <ListingPage params={{ slug: 'really-nice-house-1234' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/ManageListingsPage/ManageListingsPage.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 export default () => (
-  <Page title="Manage listings">
+  <PageLayout title="Manage listings">
     <ul>
       <li><Link to="/l/1234">Listing 1234</Link></li>
     </ul>
-  </Page>
-)
+  </PageLayout>
+);

src/containers/ManageListingsPage/ManageListingsPage.test.js

@@ -6,11 +6,9 @@ import ManageListingsPage from './ManageListingsPage';
 describe('ManageListingsPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <ManageListingsPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <ManageListingsPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/NotFoundPage/NotFoundPage.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 export default () => (
-  <Page title="Page not found">
+  <PageLayout title="Page not found">
     <Link to="/">Index page</Link>
-  </Page>
-)
+  </PageLayout>
+);

src/containers/NotFoundPage/NotFoundPage.test.js

@@ -6,11 +6,9 @@ import NotFoundPage from './NotFoundPage';
 describe('NotFoundPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <NotFoundPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <NotFoundPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/NotificationSettingsPage/NotificationSettingsPage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Notification settings" />
+export default () => <PageLayout title="Notification settings" />;

src/containers/NotificationSettingsPage/NotificationSettingsPage.test.js

@@ -6,11 +6,9 @@ import NotificationSettingsPage from './NotificationSettingsPage';
 describe('NotificationSettingsPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <NotificationSettingsPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <NotificationSettingsPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/OrderPage/OrderPage.js

@@ -1,28 +1,26 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const OrderPage = props => {
   const { params } = props;
   return (
-    <Page title="Order page">
+    <PageLayout title="Order page">
       <p>Order id: {params.id}</p>
       <Link to={`/order/${params.id}/discussion`}>Discussion tab</Link>
       <br />
       <Link to={`/order/${params.id}/details`}>Details tab</Link>
       <p>Mobile layout needs different views for discussion and details.</p>
       <p>
-         Discussion view is the default if route doesn't specify mobile tab (e.g. <i>
-          /order/1234
-        </i>)
+        Discussion view is the default if route doesn't specify mobile tab (e.g. <i>/order/1234</i>)
       </p>
-    </Page>
+    </PageLayout>
   );
 };
 
-const { shape, number } = PropTypes;
+const { number, oneOfType, shape, string } = PropTypes;
 
-OrderPage.propTypes = { params: shape({ id: number.isRequired }).isRequired };
+OrderPage.propTypes = { params: shape({ id: oneOfType([number, string]).isRequired }).isRequired };
 
 export default OrderPage;

src/containers/OrderPage/OrderPage.test.js

@@ -6,11 +6,9 @@ import OrderPage from './OrderPage';
 describe('OrderPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <OrderPage params={{ id: 1234 }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <OrderPage params={{ id: 1234 }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/PasswordChangePage/PasswordChangePage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Type new password" />
+export default () => <PageLayout title="Type new password" />;

src/containers/PasswordChangePage/PasswordChangePage.test.js

@@ -6,11 +6,9 @@ import PasswordChangePage from './PasswordChangePage';
 describe('PasswordChangePage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <PasswordChangePage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <PasswordChangePage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/PasswordForgottenPage/PasswordForgottenPage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Request new password" />
+export default () => <PageLayout title="Request new password" />;

src/containers/PasswordForgottenPage/PasswordForgottenPage.test.js

@@ -6,11 +6,9 @@ import PasswordForgottenPage from './PasswordForgottenPage';
 describe('PasswordForgottenPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <PasswordForgottenPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <PasswordForgottenPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/PaymentMethodsPage/PaymentMethodsPage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Payment methods" />
+export default () => <PageLayout title="Payment methods" />;

src/containers/PaymentMethodsPage/PaymentMethodsPage.test.js

@@ -6,11 +6,9 @@ import PaymentMethodsPage from './PaymentMethodsPage';
 describe('PaymentMethodsPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <PaymentMethodsPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <PaymentMethodsPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
-export default () => <Page title="Payout preferences" />
+export default () => <PageLayout title="Payout preferences" />;

src/containers/PayoutPreferencesPage/PayoutPreferencesPage.test.js

@@ -6,11 +6,9 @@ import PayoutPreferencesPage from './PayoutPreferencesPage';
 describe('PayoutPreferencesPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <PayoutPreferencesPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <PayoutPreferencesPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/ProfilePage/ProfilePage.js

@@ -1,8 +1,8 @@
 import React, { PropTypes } from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const ProfilePage = ({ params }) => (
-  <Page title={`Profile page with display name: ${params.displayName}`} />
+  <PageLayout title={`Profile page with display name: ${params.displayName}`} />
 );
 
 const { shape, string } = PropTypes;

src/containers/ProfilePage/ProfilePage.test.js

@@ -6,11 +6,9 @@ import ProfilePage from './ProfilePage';
 describe('ProfilePage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <ProfilePage params={{ displayName: 'most-awesome-shop' }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <ProfilePage params={{ displayName: 'most-awesome-shop' }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/SalesConversationPage/SalesConversationPage.js

@@ -1,23 +1,21 @@
 /* eslint-disable react/no-unescaped-entities */
 import React, { PropTypes } from 'react';
 import { Link } from 'react-router';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 const SalesConversationPage = props => {
   const { params } = props;
   return (
-    <Page title="Sales conversation page">
+    <PageLayout title="Sales conversation page">
       <p>Sale id: {params.id}</p>
       <Link to={`/sale/${params.id}/discussion`}>Discussion tab</Link>
       <br />
       <Link to={`/sale/${params.id}/details`}>Details tab</Link>
       <p>Mobile layout needs different views for discussion and details.</p>
       <p>
-         Discussion view is the default if route doesn't specify mobile tab (e.g. <i>
-          /order/1234
-        </i>)
+        Discussion view is the default if route doesn't specify mobile tab (e.g. <i>/order/1234</i>)
       </p>
-    </Page>
+    </PageLayout>
   );
 };
 

src/containers/SalesConversationPage/SalesConversationPage.test.js

@@ -6,11 +6,9 @@ import SalesConversationPage from './SalesConversationPage';
 describe('SalesConversationPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <SalesConversationPage params={{ id: 12345 }} />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <SalesConversationPage params={{ id: 12345 }} />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

src/containers/SearchPage/SearchPage.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 import { addFlashNotification } from '../../ducks/FlashNotification';
 import { addFilter } from './SearchPageDucks';
 

src/containers/SecurityPage/SecurityPage.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Page } from '../../components';
+import { PageLayout } from '../../components';
 
 export default () => (
-  <Page title="Security">
+  <PageLayout title="Security">
     <p>Change password, delete account</p>
-  </Page>
-)
+  </PageLayout>
+);

src/containers/SecurityPage/SecurityPage.test.js

@@ -6,11 +6,9 @@ import SecurityPage from './SecurityPage';
 describe('SecurityPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
-      (
-        <BrowserRouter>
-          <SecurityPage />
-        </BrowserRouter>
-      ),
+      <BrowserRouter>
+        <SecurityPage />
+      </BrowserRouter>,
     );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();