maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

NamedLink: import routeConfiguration and remove context.flattenedRoutes

Browse source 
Add displayName
This commit is contained in:
Vesa Luusua 2017-10-10 20:02:16 +03:00
parent f22d9102af
commit 3a11c6b95c
10 changed files with 86 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/FilterPanel/__snapshots__/FilterPanel.test.js.snap
View file

@ -3,13 +3,13 @@ exports[`FilterPanel matches snapshot 1`] = `
<h1>
Filters
</h1>
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SearchListingsPage">
See studios
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
name="SearchListingsPage">
X
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
`;

4
src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
View file

@ -1,5 +1,5 @@
exports[`ListingCard matches snapshot 1`] = `
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
className=""
name="ListingPage"
params={
@ -58,5 +58,5 @@ exports[`ListingCard matches snapshot 1`] = `
</div>
</div>
</div>
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
`;

4
src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap
View file

@ -1,5 +1,5 @@
exports[`ManageListingCard matches snapshot 1`] = `
<withRouter(NamedLink)
<NamedLink
className=""
name="ListingPage"
params={
@ -111,5 +111,5 @@ exports[`ManageListingCard matches snapshot 1`] = `
values={Object {}} />
</button>
</div>
</withRouter(NamedLink)>
</NamedLink>
`;

8
src/components/MapPanel/__snapshots__/MapPanel.test.js.snap
View file

@ -4,13 +4,13 @@ exports[`MapPanel matches snapshot 1`] = `
Map
</div>
<div />
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SearchFiltersPage">
Filters
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
name="SearchListingsPage">
X
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
`;

18
src/components/NamedLink/NamedLink.js
View file

@ -20,17 +20,15 @@
import React, { PropTypes } from 'react';
import { Link, withRouter } from 'react-router-dom';
import classNames from 'classnames';
import routeConfiguration from '../../routeConfiguration';
import { pathByRouteName } from '../../util/routes';
import { withFlattenedRoutes } from '../../util/contextHelpers';
import * as propTypes from '../../util/propTypes';
export const NamedLinkComponent = props => {
const { name, params, flattenedRoutes, title } = props;
const { name, params, title } = props;
// Link props
const { to, children } = props;
const pathname = pathByRouteName(name, flattenedRoutes, params);
const pathname = pathByRouteName(name, routeConfiguration(), params);
const { match } = props;
const active = match.url && match.url === pathname;
@ -45,7 +43,7 @@ export const NamedLinkComponent = props => {
return <Link to={{ pathname, ...to }} {...aElemProps}>{children}</Link>;
};
const { arrayOf, object, string, shape, any } = PropTypes;
const { object, string, shape, any } = PropTypes;
NamedLinkComponent.defaultProps = {
params: {},
@ -76,11 +74,11 @@ NamedLinkComponent.propTypes = {
activeClassName: string,
title: string,
// from withFlattenedRoutes
flattenedRoutes: arrayOf(propTypes.route).isRequired,
// from withRouter
match: object,
};
export default withFlattenedRoutes(withRouter(NamedLinkComponent));
const NamedLink = withRouter(NamedLinkComponent);
NamedLink.displayName = 'NamedLink';
export default NamedLink;

35
src/components/NamedLink/NamedLink.test.js
View file

@ -1,33 +1,27 @@
import React from 'react';
import { RoutesProvider } from '../index';
import { renderShallow, renderDeep } from '../../util/test-helpers';
import NamedLink, { NamedLinkComponent } from './NamedLink';
describe('NamedLinkComponent', () => {
it('should mark the link as active if the current URL matches', () => {
const routesConf = [
{ path: '/a', name: 'APage', component: () => null },
{ path: '/b', name: 'BPage', component: () => null },
];
const activeClassName = 'my-active-class';
const aProps = {
name: 'APage',
const landingPageProps = {
name: 'LandingPage',
activeClassName,
flattenedRoutes: routesConf,
match: { url: '/a' },
match: { url: '/' },
};
const bProps = {
name: 'BPage',
const searchPageProps = {
name: 'SearchPage',
activeClassName,
flattenedRoutes: routesConf,
match: { url: '/a' },
match: { url: '/' },
};
const tree = renderDeep(
<div>
<NamedLinkComponent {...aProps}>link to a</NamedLinkComponent>
<NamedLinkComponent {...bProps}>link to b</NamedLinkComponent>
<NamedLinkComponent {...landingPageProps}>link to a</NamedLinkComponent>
<NamedLinkComponent {...searchPageProps}>link to b</NamedLinkComponent>
</div>
);
const aLink = tree.children[0];
const bLink = tree.children[1];
expect(aLink.type).toEqual('a');
@ -40,16 +34,11 @@ describe('NamedLinkComponent', () => {
describe('NamedLink', () => {
it('should contain correct link', () => {
const id = 12;
const routesConf = [
{ path: '/somepage/:id', name: 'SomePage', component: () => <div>blaa</div> },
];
const tree = renderDeep(
<RoutesProvider flattenedRoutes={routesConf}>
<NamedLink name="SomePage" params={{ id }}>to SomePage</NamedLink>
</RoutesProvider>
<NamedLink name="ListingPageCanonical" params={{ id }}>to ListingPage</NamedLink>
);
expect(tree.type).toEqual('a');
expect(tree.props.href).toEqual(`/somepage/${id}`);
expect(tree.children).toEqual(['to SomePage']);
expect(tree.props.href).toEqual(`/l/${id}`);
expect(tree.children).toEqual(['to ListingPage']);
});
});

24
src/components/OrderDetailsPanel/__snapshots__/OrderDetailsPanel.test.js.snap
View file

@ -60,7 +60,7 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
id="OrderDetailsPanel.orderAcceptedSubtitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -69,7 +69,7 @@ exports[`OrderDetailsPanel accepted matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</span>
@ -452,7 +452,7 @@ exports[`OrderDetailsPanel autorejected matches snapshot 1`] = `
id="OrderDetailsPanel.orderAutoRejectedTitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -461,7 +461,7 @@ exports[`OrderDetailsPanel autorejected matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -853,7 +853,7 @@ exports[`OrderDetailsPanel canceled matches snapshot 1`] = `
id="OrderDetailsPanel.orderPreauthorizedSubtitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -862,7 +862,7 @@ exports[`OrderDetailsPanel canceled matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</span>
@ -1238,7 +1238,7 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
id="OrderDetailsPanel.orderDeliveredTitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -1247,7 +1247,7 @@ exports[`OrderDetailsPanel delivered matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -1639,7 +1639,7 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
id="OrderDetailsPanel.orderPreauthorizedSubtitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -1648,7 +1648,7 @@ exports[`OrderDetailsPanel preauthorized matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</span>
@ -2024,7 +2024,7 @@ exports[`OrderDetailsPanel rejected matches snapshot 1`] = `
id="OrderDetailsPanel.orderRejectedTitle"
values={
Object {
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -2033,7 +2033,7 @@ exports[`OrderDetailsPanel rejected matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>

56
src/components/PaginationLinks/__snapshots__/PaginationLinks.test.js.snap
View file

@ -8,7 +8,7 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
</div>
<div
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
className="undefined"
name="SomePage"
params={
@ -23,7 +23,7 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
}
}>
1
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
<div
className="">
@ -36,7 +36,7 @@ exports[`PaginationLinks should match snapshot with both links disabled 1`] = `
exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
<nav
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SomePage"
params={
Object {
@ -51,10 +51,10 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}>
<PrevPageIcon
className={null} />
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
<div
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
className=""
name="SomePage"
params={
@ -69,8 +69,8 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}
}>
1
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className="undefined"
name="SomePage"
params={
@ -85,8 +85,8 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}
}>
2
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className=""
name="SomePage"
params={
@ -101,9 +101,9 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}
}>
3
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SomePage"
params={
Object {
@ -118,7 +118,7 @@ exports[`PaginationLinks should match snapshot with both links enabled 1`] = `
}>
<NextPageIcon
className={null} />
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</nav>
`;
@ -132,7 +132,7 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
</div>
<div
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
className="undefined"
name="SomePage"
params={
@ -147,8 +147,8 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
}
}>
1
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className=""
name="SomePage"
params={
@ -163,8 +163,8 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
}
}>
2
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className=""
name="SomePage"
params={
@ -179,9 +179,9 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
}
}>
3
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SomePage"
params={
Object {
@ -196,14 +196,14 @@ exports[`PaginationLinks should match snapshot with prev disabled and next enabl
}>
<NextPageIcon
className={null} />
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</nav>
`;
exports[`PaginationLinks should match snapshot with prev enabled and next disabled 1`] = `
<nav
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="SomePage"
params={
Object {
@ -218,10 +218,10 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
}>
<PrevPageIcon
className={null} />
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
<div
className="">
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
className=""
name="SomePage"
params={
@ -236,8 +236,8 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
}
}>
1
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className=""
name="SomePage"
params={
@ -252,8 +252,8 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
}
}>
2
</withFlattenedRoutes(withRouter(NamedLink))>
<withFlattenedRoutes(withRouter(NamedLink))
</NamedLink>
<NamedLink
className="undefined"
name="SomePage"
params={
@ -268,7 +268,7 @@ exports[`PaginationLinks should match snapshot with prev enabled and next disabl
}
}>
3
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
<div
className="">

24
src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap
View file

@ -68,7 +68,7 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -77,7 +77,7 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -422,7 +422,7 @@ exports[`SaleDetailsPanel autorejected matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -431,7 +431,7 @@ exports[`SaleDetailsPanel autorejected matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -776,7 +776,7 @@ exports[`SaleDetailsPanel canceled matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -785,7 +785,7 @@ exports[`SaleDetailsPanel canceled matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -1142,7 +1142,7 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -1151,7 +1151,7 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -1496,7 +1496,7 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -1505,7 +1505,7 @@ exports[`SaleDetailsPanel preauthorized matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>
@ -1862,7 +1862,7 @@ exports[`SaleDetailsPanel rejected matches snapshot 1`] = `
values={
Object {
"customerName": "customer1 display name",
"listingLink": <withFlattenedRoutes(withRouter(NamedLink))
"listingLink": <NamedLink
name="ListingPage"
params={
Object {
@ -1871,7 +1871,7 @@ exports[`SaleDetailsPanel rejected matches snapshot 1`] = `
}
}>
listing1 title
</withFlattenedRoutes(withRouter(NamedLink))>,
</NamedLink>,
}
} />
</h1>

4
src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap
View file

@ -4,7 +4,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
logoutError={null}
title="CheckoutPage.title">
<div>
<withFlattenedRoutes(withRouter(NamedLink))
<NamedLink
name="LandingPage">
<LogoIcon
alt="Logo"
@ -15,7 +15,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
alt="CheckoutPage.goToLandingPage"
className={null}
isMobile={false} />
</withFlattenedRoutes(withRouter(NamedLink))>
</NamedLink>
</div>
<div>
<div>