mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
Format with Prettier
This commit is contained in:
parent
a1236c66a8
commit
ef1a8eb15d
45 changed files with 273 additions and 254 deletions
126
src/Routes.js
126
src/Routes.js
|
|
@ -40,22 +40,19 @@ export const fakeAuth = {
|
|||
this.isAuthenticated = false;
|
||||
cb();
|
||||
window.setTimeout(cb, 100); // weird bug if async?
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// User must be authenticated before he can see certain pages
|
||||
export const MatchWhenAuthorized = ({ component: Component, ...rest }) => (
|
||||
<Match {...rest} render={
|
||||
(props) => (
|
||||
fakeAuth.isAuthenticated ?
|
||||
( <Component { ...props } /> ) :
|
||||
( <Redirect to={{
|
||||
pathname: '/login',
|
||||
state: { from: props.location }
|
||||
}}/>
|
||||
)
|
||||
)
|
||||
}/>
|
||||
<Match
|
||||
{...rest}
|
||||
render={props => {
|
||||
return fakeAuth.isAuthenticated
|
||||
? <Component {...props} />
|
||||
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
class Routes extends React.Component {
|
||||
|
|
@ -66,138 +63,127 @@ class Routes extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Match exactly pattern="/" component={ LandingPage } />
|
||||
<Match exactly pattern="/" component={LandingPage} />
|
||||
|
||||
{/* Search view */}
|
||||
<Match exactly pattern="/s" component={ SearchPage } />
|
||||
<Match exactly pattern="/s" component={SearchPage} />
|
||||
|
||||
{/* Listing view */}
|
||||
<Match exactly pattern="/l/:slug" component={ ListingPage } />
|
||||
<Match exactly pattern="/l" component={ RedirectLandingPage } />
|
||||
<Match exactly pattern="/l/:slug" component={ListingPage} />
|
||||
<Match exactly pattern="/l" component={RedirectLandingPage} />
|
||||
|
||||
{/* profile / storefront view */}
|
||||
<Match exactly pattern="/u/:displayName" component={ ProfilePage } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/u/:displayName/edit"
|
||||
component={ EditProfilePage } />
|
||||
<Match exactly pattern="/u" component={ RedirectLandingPage } />
|
||||
<Match exactly pattern="/u/:displayName" component={ProfilePage} />
|
||||
<MatchWhenAuthorized exactly pattern="/u/:displayName/edit" component={EditProfilePage} />
|
||||
<Match exactly pattern="/u" component={RedirectLandingPage} />
|
||||
|
||||
{/* checkout */}
|
||||
<Match exactly pattern="/checkout/:listingId" component={ CheckoutPage } />
|
||||
<Match exactly pattern="/checkout/:listingId" component={CheckoutPage} />
|
||||
|
||||
{/* Login and signup */}
|
||||
<Match
|
||||
exactly
|
||||
pattern="/login"
|
||||
component={
|
||||
(props) => <AuthenticationPage { ...props } tab='login' />
|
||||
} />
|
||||
component={props => <AuthenticationPage {...props} tab="login" />}
|
||||
/>
|
||||
<Match
|
||||
exactly
|
||||
pattern="/signup"
|
||||
component={
|
||||
(props) => <AuthenticationPage { ...props } tab='signup' />
|
||||
} />
|
||||
component={props => <AuthenticationPage {...props} tab="signup" />}
|
||||
/>
|
||||
|
||||
{/* Password forgotten */}
|
||||
<Match
|
||||
exactly
|
||||
pattern="/password/forgotten"
|
||||
component={ PasswordForgottenPage } />
|
||||
<Match exactly pattern="/password/forgotten" component={PasswordForgottenPage} />
|
||||
|
||||
{/* Change password */}
|
||||
<Match
|
||||
exactly
|
||||
pattern="/password/change"
|
||||
component={ PasswordChangePage } />
|
||||
<Match exactly pattern="/password/change" component={PasswordChangePage} />
|
||||
|
||||
{/* Inbox and filtered views */}
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/inbox"
|
||||
component={ (props) => <InboxPage { ...props } filter="inbox" /> } />
|
||||
component={props => <InboxPage {...props} filter="inbox" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/orders"
|
||||
component={ (props) => <InboxPage { ...props } filter="orders" /> } />
|
||||
component={props => <InboxPage {...props} filter="orders" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sales"
|
||||
component={ (props) => <InboxPage { ...props } filter="sales" /> } />
|
||||
component={props => <InboxPage {...props} filter="sales" />}
|
||||
/>
|
||||
|
||||
{/* Order/Conversation and mobile views */}
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/conversation/:id"
|
||||
component={ ConversationPage } />
|
||||
<MatchWhenAuthorized exactly pattern="/conversation/:id" component={ConversationPage} />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id"
|
||||
component={ (props) => <OrderPage { ...props } tab="discussion" /> } />
|
||||
component={props => <OrderPage {...props} tab="discussion" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id/discussion"
|
||||
component={ (props) => <OrderPage { ...props } tab="discussion" /> } />
|
||||
component={props => <OrderPage {...props} tab="discussion" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/order/:id/details"
|
||||
component={ (props) => <OrderPage { ...props } tab="details" /> } />
|
||||
component={props => <OrderPage {...props} tab="details" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="discussion" /> } />
|
||||
component={props => <SalesConversationPage {...props} tab="discussion" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id/discussion"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="discussion" /> } />
|
||||
component={props => <SalesConversationPage {...props} tab="discussion" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/sale/:id/details"
|
||||
component={ (props) => <SalesConversationPage { ...props } tab="details" /> } />
|
||||
component={props => <SalesConversationPage {...props} tab="details" />}
|
||||
/>
|
||||
|
||||
{/* Manage listings */}
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/listings"
|
||||
component={ ManageListingsPage } />
|
||||
<MatchWhenAuthorized exactly pattern="/listings" component={ManageListingsPage} />
|
||||
|
||||
{/* Account settings */}
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account"
|
||||
component={ () => <Redirect to="/account/contact-details" /> } />
|
||||
component={() => <Redirect to="/account/contact-details" />}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account/contact-details"
|
||||
component={ ContactDetailsPage } />
|
||||
component={ContactDetailsPage}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account/notifications"
|
||||
component={ NotificationSettingsPage } />
|
||||
component={NotificationSettingsPage}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account/payment-methods"
|
||||
component={ PaymentMethodsPage } />
|
||||
component={PaymentMethodsPage}
|
||||
/>
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account/payout-preferences"
|
||||
component={ PayoutPreferencesPage } />
|
||||
<MatchWhenAuthorized
|
||||
exactly
|
||||
pattern="/account/security"
|
||||
component={ SecurityPage } />
|
||||
|
||||
|
||||
<Miss component={ NotFoundPage } />
|
||||
|
||||
component={PayoutPreferencesPage}
|
||||
/>
|
||||
<MatchWhenAuthorized exactly pattern="/account/security" component={SecurityPage} />
|
||||
<Miss component={NotFoundPage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Routes.childContextTypes = {
|
||||
router: React.PropTypes.object
|
||||
};
|
||||
Routes.childContextTypes = { router: React.PropTypes.object };
|
||||
|
||||
export default Routes;
|
||||
|
|
|
|||
14
src/app.js
14
src/app.js
|
|
@ -4,19 +4,19 @@ import Helmet from 'react-helmet';
|
|||
import { BrowserRouter, ServerRouter } from 'react-router';
|
||||
import Routes from './Routes';
|
||||
|
||||
const RoutesWithRouterProp = ({ router }) => <Routes router={router} />
|
||||
const RoutesWithRouterProp = ({ router }) => <Routes router={router} />;
|
||||
|
||||
export const ClientApp = () => (
|
||||
<BrowserRouter>
|
||||
{ RoutesWithRouterProp }
|
||||
{RoutesWithRouterProp}
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
export const ServerApp = (props) => {
|
||||
export const ServerApp = props => {
|
||||
const { url, context } = props;
|
||||
return (
|
||||
<ServerRouter location={ url } context={ context } >
|
||||
{ RoutesWithRouterProp }
|
||||
<ServerRouter location={url} context={context}>
|
||||
{RoutesWithRouterProp}
|
||||
</ServerRouter>
|
||||
);
|
||||
};
|
||||
|
|
@ -32,9 +32,7 @@ export const ServerApp = (props) => {
|
|||
* - {Object} head: Application head metadata from react-helmet
|
||||
*/
|
||||
export const renderApp = (url, serverContext) => {
|
||||
const body = ReactDOMServer.renderToString(
|
||||
<ServerApp url={ url } context={ serverContext }/>
|
||||
);
|
||||
const body = ReactDOMServer.renderToString(<ServerApp url={url} context={serverContext} />);
|
||||
const head = Helmet.rewind();
|
||||
return { head, body };
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,11 +5,8 @@ import { forEach } from 'lodash';
|
|||
import { createServerRenderContext } from 'react-router';
|
||||
import { ClientApp, ServerApp } from './app';
|
||||
|
||||
const render = (url, context) => (
|
||||
ReactDOMServer.renderToString(
|
||||
<ServerApp url={ url } context={ context }/>
|
||||
)
|
||||
);
|
||||
const render = (url, context) =>
|
||||
ReactDOMServer.renderToString(<ServerApp url={url} context={context} />);
|
||||
|
||||
describe('Application', () => {
|
||||
it('renders in the client without crashing', () => {
|
||||
|
|
@ -65,6 +62,5 @@ describe('Application', () => {
|
|||
const result = context.getResult();
|
||||
expect(result.redirect.pathname).toEqual(redirectPath);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ import React from 'react';
|
|||
import Helmet from 'react-helmet';
|
||||
import { Topbar } from '../../containers';
|
||||
|
||||
export default (props) => {
|
||||
export default props => {
|
||||
const { className, title, children } = props;
|
||||
return (
|
||||
<div className={ className }>
|
||||
<Helmet title={ title } />
|
||||
<div className={className}>
|
||||
<Helmet title={title} />
|
||||
<Topbar />
|
||||
<h1>{ title }</h1>
|
||||
{ children }
|
||||
<h1>{title}</h1>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,9 @@ import { Page } from '../../components';
|
|||
import { fakeAuth } from '../../Routes';
|
||||
|
||||
class AuthenticationPage extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
redirectToReferrer: false,
|
||||
};
|
||||
this.state = { redirectToReferrer: false };
|
||||
|
||||
this.login = this.login.bind(this);
|
||||
}
|
||||
|
|
@ -17,36 +14,35 @@ class AuthenticationPage extends Component {
|
|||
login() {
|
||||
fakeAuth.authenticate(() => {
|
||||
this.setState({ redirectToReferrer: true });
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { from } = this.props.location.state || '/';
|
||||
const { redirectToReferrer } = this.state;
|
||||
|
||||
const toLogin = <Link to={{ pathname: '/login', state: { from: from || '/' }}}>Log in</Link>;
|
||||
const toSignup = <Link to={{ pathname: '/signup', state: { from: from || '/' }}}>Sign up</Link>;
|
||||
const toLogin = <Link to={{ pathname: '/login', state: { from: from || '/' } }}>Log in</Link>;
|
||||
const toSignup = (
|
||||
<Link to={{ pathname: '/signup', state: { from: from || '/' } }}>Sign up</Link>
|
||||
);
|
||||
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` }>
|
||||
{ redirectToReferrer ?
|
||||
( <Redirect to={from || '/'}/> ):
|
||||
null
|
||||
}
|
||||
{ fromLoginMsg }
|
||||
<button onClick={this.login}>{ currentMethod }</button>
|
||||
<p>or { alternativeMethod }</p>
|
||||
<Page title={`Authentication page: ${this.props.tab} tab`}>
|
||||
{redirectToReferrer ? <Redirect to={from || '/'} /> : null}
|
||||
{fromLoginMsg}
|
||||
<button onClick={this.login}>{currentMethod}</button>
|
||||
<p>or {alternativeMethod}</p>
|
||||
</Page>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Link } from 'react-router';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default ({ params }) => (
|
||||
<Page title={ `Checkout page: ${params.listingId}`}>
|
||||
<Link to={ `/order/12345` }><button>Pay</button></Link>
|
||||
<Page title={`Checkout page: ${params.listingId}`}>
|
||||
<Link to={`/order/12345`}><button>Pay</button></Link>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ import CheckoutPage from './CheckoutPage';
|
|||
describe('CheckoutPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
<BrowserRouter>
|
||||
<CheckoutPage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
(
|
||||
<BrowserRouter>
|
||||
<CheckoutPage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import React from 'react';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default () => (
|
||||
<Page title="Contact details"></Page>
|
||||
);
|
||||
export default () => <Page title="Contact details"></Page>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
export default props => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Conversation page">
|
||||
<p>Conversation id: { params.id }</p>
|
||||
<p>Conversation id: {params.id}</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ import ConversationPage from './ConversationPage';
|
|||
describe('ConversationPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
<BrowserRouter>
|
||||
<ConversationPage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
(
|
||||
<BrowserRouter>
|
||||
<ConversationPage params={{ displayName: 'my-shop' }} />
|
||||
</BrowserRouter>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ import { Page } from '../../components';
|
|||
export default (props, context) => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page
|
||||
title={ `Edit profile page with display name: ${ params.displayName }` }>
|
||||
<Page title={`Edit profile page with display name: ${params.displayName}`}>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Link } from 'react-router';
|
|||
import { Page } from '../../components';
|
||||
|
||||
const toPath = (filter, id) => {
|
||||
switch(filter) {
|
||||
switch (filter) {
|
||||
case 'orders':
|
||||
return `/order/${id}`;
|
||||
case 'sales':
|
||||
|
|
@ -11,15 +11,15 @@ const toPath = (filter, id) => {
|
|||
default:
|
||||
return `/conversation/${id}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default (props) => {
|
||||
export default props => {
|
||||
const { filter } = props;
|
||||
return (
|
||||
<Page title={ `${filter} page`}>
|
||||
<Page title={`${filter} page`}>
|
||||
<ul>
|
||||
<li><Link to={ toPath(filter, 1234) }>Single thread</Link></li>
|
||||
<li><Link to={toPath(filter, 1234)}>Single thread</Link></li>
|
||||
</ul>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ import InboxPage from './InboxPage';
|
|||
describe('InboxPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
<BrowserRouter>
|
||||
<InboxPage />
|
||||
</BrowserRouter>
|
||||
(
|
||||
<BrowserRouter>
|
||||
<InboxPage />
|
||||
</BrowserRouter>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ export default () => (
|
|||
<Page title="Landing page">
|
||||
<Link to="/s?location=helsinki">Find studios</Link>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { Link } from 'react-router';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default ({ params }) => {
|
||||
|
||||
// Listing id should be located either in the end of slug
|
||||
// - https://example.com/l/listing-title-as-slug-12345
|
||||
// - https://example.com/l/12345
|
||||
|
|
@ -11,11 +10,10 @@ export default ({ params }) => {
|
|||
const id = slugAndId[slugAndId.length - 1];
|
||||
|
||||
// TODO: Fetch data from SDK if no data is passed through props
|
||||
|
||||
return (
|
||||
<Page title={ `Listing page with listing id: #${ id }` }>
|
||||
<p>Slug: { params.slug }</p>
|
||||
<Link to={ `/checkout/${id}` }><button>Book</button></Link>
|
||||
<Page title={`Listing page with listing id: #${id}`}>
|
||||
<p>Slug: {params.slug}</p>
|
||||
<Link to={`/checkout/${id}`}><button>Book</button></Link>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -3,10 +3,9 @@ import { Link } from 'react-router';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default () => (
|
||||
<Page title="Manage listings" >
|
||||
<Page title="Manage listings">
|
||||
<ul>
|
||||
<li><Link to="/l/1234">Listing 1234</Link></li>
|
||||
</ul>
|
||||
</Page>
|
||||
);
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ export default () => (
|
|||
<Page title="Page not found">
|
||||
<Link to="/">Index page</Link>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ import { Page } from '../../components';
|
|||
export default () => (
|
||||
<Page title="Notification settings">
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
/* eslint-disable react/no-unescaped-entities */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
export default props => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Order page" >
|
||||
<p>Order id: { params.id }</p>
|
||||
<Link to={ `/order/${params.id}/discussion` }>Discussion tab</Link>
|
||||
<Page 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>
|
||||
<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>)</p>
|
||||
<p>
|
||||
Discussion view is the default if route doesn't specify mobile tab (e.g. <i>
|
||||
/order/1234
|
||||
</i>)
|
||||
</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ import { Page } from '../../components';
|
|||
export default () => (
|
||||
<Page title="Type new password">
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ import { Page } from '../../components';
|
|||
export default () => (
|
||||
<Page title="Request new password">
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ import React from 'react';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default () => (
|
||||
<Page title="Payment methods" >
|
||||
<Page title="Payment methods">
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ import { Page } from '../../components';
|
|||
export default () => (
|
||||
<Page title="Payout preferences">
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -2,6 +2,6 @@ import React from 'react';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default ({ params }) => (
|
||||
<Page title={ `Profile page with display name: ${ params.displayName }` }>
|
||||
<Page title={`Profile page with display name: ${params.displayName}`}>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -1,17 +1,22 @@
|
|||
/* eslint-disable react/no-unescaped-entities */
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { Page } from '../../components';
|
||||
|
||||
export default (props) => {
|
||||
export default props => {
|
||||
const { params } = props;
|
||||
return (
|
||||
<Page title="Sales conversation page" >
|
||||
<p>Sale id: { params.id }</p>
|
||||
<Link to={ `/sale/${params.id}/discussion` }>Discussion tab</Link>
|
||||
<Page 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>
|
||||
<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>)</p>
|
||||
<p>
|
||||
Discussion view is the default if route doesn't specify mobile tab (e.g. <i>
|
||||
/order/1234
|
||||
</i>)
|
||||
</p>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ export default () => (
|
|||
<Page title="Search page">
|
||||
<Link to="/l/Nice+studio-in-Helsinki-345">Nice studio in Helsinki</Link>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ import SearchPage from './SearchPage';
|
|||
describe('SearchPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const component = renderer.create(
|
||||
<BrowserRouter>
|
||||
<SearchPage />
|
||||
</BrowserRouter>
|
||||
(
|
||||
<BrowserRouter>
|
||||
<SearchPage />
|
||||
</BrowserRouter>
|
||||
),
|
||||
);
|
||||
const tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import { Page } from '../../components';
|
||||
|
||||
export default () => (
|
||||
<Page title="Security" >
|
||||
<Page title="Security">
|
||||
<p>Change password, delete account</p>
|
||||
</Page>
|
||||
);
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ 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();
|
||||
|
|
|
|||
|
|
@ -3,45 +3,44 @@ import { Link } from 'react-router';
|
|||
import { fakeAuth } from '../../Routes';
|
||||
import css from './Topbar.css';
|
||||
|
||||
|
||||
const SignoutButton = (props) => {
|
||||
const SignoutButton = props => {
|
||||
const { router } = props;
|
||||
const handleClick = () => {
|
||||
fakeAuth.signout(() => {
|
||||
router.transitionTo('/');
|
||||
});
|
||||
};
|
||||
return (<button onClick={ handleClick } >Sign out</button>);
|
||||
return <button onClick={handleClick}>Sign out</button>;
|
||||
};
|
||||
|
||||
|
||||
const Topbar = (props, context) => {
|
||||
const linkProps = { className: css.link };
|
||||
|
||||
return (<div className={css.container}>
|
||||
<Link to="/" { ...linkProps } >Home</Link>
|
||||
<Link to="/s" { ...linkProps } >Search</Link>
|
||||
<Link to="/l/Bike-Pelago-12345" { ...linkProps } >Listing page</Link>
|
||||
<Link to="/u/Bikerrs" { ...linkProps } >Profile</Link>
|
||||
<Link to="/u/Bikerrs/edit" { ...linkProps } >Edit profile</Link>
|
||||
<Link to="/checkout/lid1234" { ...linkProps } >Checkout</Link>
|
||||
<Link to="/inbox" { ...linkProps } >Inbox</Link>
|
||||
<Link to="/orders" { ...linkProps } >Orders</Link>
|
||||
<Link to="/sales" { ...linkProps } >Sales</Link>
|
||||
<Link to="/password/forgotten" { ...linkProps } >Request password</Link>
|
||||
<Link to="/password/change" { ...linkProps } >Change password</Link>
|
||||
<Link to="/listings" { ...linkProps } >Manage listings</Link>
|
||||
<Link to="/account" { ...linkProps } >Account settings</Link>
|
||||
<Link to="/account/contact-details" { ...linkProps } >Contact details</Link>
|
||||
<Link to="/account/notifications" { ...linkProps } >Notification settings</Link>
|
||||
<Link to="/account/payment-methods" { ...linkProps } >Payment methods</Link>
|
||||
<Link to="/account/payout-preferences" { ...linkProps } >Payout preferences</Link>
|
||||
<Link to="/account/security" { ...linkProps } >Security</Link>
|
||||
<SignoutButton router={ context.router } />
|
||||
</div>);
|
||||
return (
|
||||
<div className={css.container}>
|
||||
<Link to="/" {...linkProps}>Home</Link>
|
||||
<Link to="/s" {...linkProps}>Search</Link>
|
||||
<Link to="/l/Bike-Pelago-12345" {...linkProps}>Listing page</Link>
|
||||
<Link to="/u/Bikerrs" {...linkProps}>Profile</Link>
|
||||
<Link to="/u/Bikerrs/edit" {...linkProps}>Edit profile</Link>
|
||||
<Link to="/checkout/lid1234" {...linkProps}>Checkout</Link>
|
||||
<Link to="/inbox" {...linkProps}>Inbox</Link>
|
||||
<Link to="/orders" {...linkProps}>Orders</Link>
|
||||
<Link to="/sales" {...linkProps}>Sales</Link>
|
||||
<Link to="/password/forgotten" {...linkProps}>Request password</Link>
|
||||
<Link to="/password/change" {...linkProps}>Change password</Link>
|
||||
<Link to="/listings" {...linkProps}>Manage listings</Link>
|
||||
<Link to="/account" {...linkProps}>Account settings</Link>
|
||||
<Link to="/account/contact-details" {...linkProps}>Contact details</Link>
|
||||
<Link to="/account/notifications" {...linkProps}>Notification settings</Link>
|
||||
<Link to="/account/payment-methods" {...linkProps}>Payment methods</Link>
|
||||
<Link to="/account/payout-preferences" {...linkProps}>Payout preferences</Link>
|
||||
<Link to="/account/security" {...linkProps}>Security</Link>
|
||||
<SignoutButton router={context.router} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Topbar.contextTypes = { router: React.PropTypes.object };
|
||||
|
||||
export default Topbar;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue