Update React Router

This commit is contained in:
Kimmo Puputti 2017-04-03 12:28:17 +03:00
parent ae56344d0a
commit 5d32f57696
11 changed files with 69 additions and 35 deletions

View file

@ -20,7 +20,7 @@
"react-helmet": "^5.0.2", "react-helmet": "^5.0.2",
"react-intl": "^2.2.3", "react-intl": "^2.2.3",
"react-redux": "^5.0.3", "react-redux": "^5.0.3",
"react-router-dom": "4.0.0-beta.6", "react-router-dom": "^4.0.0",
"react-sortable-hoc": "^0.6.1", "react-sortable-hoc": "^0.6.1",
"redux": "^3.6.0", "redux": "^3.6.0",
"redux-form": "^6.6.1", "redux-form": "^6.6.1",

View file

@ -118,8 +118,14 @@ Routes.defaultProps = { staticContext: {} };
Routes.propTypes = { Routes.propTypes = {
isAuthenticated: bool.isRequired, isAuthenticated: bool.isRequired,
// from withFlattenedRoutes
flattenedRoutes: arrayOf(propTypes.route).isRequired, flattenedRoutes: arrayOf(propTypes.route).isRequired,
// from withRouter
staticContext: object, staticContext: object,
// from connect
dispatch: func.isRequired, dispatch: func.isRequired,
}; };

View file

@ -63,16 +63,15 @@ NamedLinkComponent.propTypes = {
// Link component props // Link component props
to: shape({ search: string, hash: string, state: object }), to: shape({ search: string, hash: string, state: object }),
children: any, children: any,
// Note: The Link `replace` prop conflicts with the replace function
// from withRouter. If the replace boolean is required for the Link
// component, add it here with another name.
// generic props for the underlying <a> element // generic props for the underlying <a> element
className: string, className: string,
style: object, style: object,
activeClassName: string, activeClassName: string,
// from withFlattenedRoutes // from withFlattenedRoutes
flattenedRoutes: arrayOf(propTypes.route).isRequired, flattenedRoutes: arrayOf(propTypes.route).isRequired,
// from withRouter // from withRouter
match: object, match: object,
}; };

View file

@ -15,7 +15,7 @@ const scrollToTop = () => {
class PageLayout extends Component { class PageLayout extends Component {
componentDidMount() { componentDidMount() {
this.historyUnlisten = this.props.listen(() => scrollToTop()); this.historyUnlisten = this.props.history.listen(() => scrollToTop());
} }
componentWillUnmount() { componentWillUnmount() {
@ -62,7 +62,7 @@ class PageLayout extends Component {
} }
} }
const { any, string, instanceOf, func } = PropTypes; const { any, string, instanceOf, func, shape } = PropTypes;
PageLayout.defaultProps = { className: '', children: null, authInfoError: null, logoutError: null }; PageLayout.defaultProps = { className: '', children: null, authInfoError: null, logoutError: null };
@ -72,8 +72,11 @@ PageLayout.propTypes = {
children: any, children: any,
authInfoError: instanceOf(Error), authInfoError: instanceOf(Error),
logoutError: instanceOf(Error), logoutError: instanceOf(Error),
// history.listen function from withRouter
listen: func.isRequired, // from withRouter
history: shape({
listen: func.isRequired,
}).isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({

View file

@ -8,13 +8,13 @@ import * as propTypes from '../../util/propTypes';
import css from './LandingPage.css'; import css from './LandingPage.css';
export const LandingPageComponent = props => { export const LandingPageComponent = props => {
const { push: historyPush, flattenedRoutes } = props; const { history, flattenedRoutes } = props;
const handleSubmit = values => { const handleSubmit = values => {
const selectedPlace = values && values.location ? values.location.selectedPlace : null; const selectedPlace = values && values.location ? values.location.selectedPlace : null;
const { address, origin, bounds } = selectedPlace || {}; const { address, origin, bounds } = selectedPlace || {};
const searchParams = { address, origin, bounds }; const searchParams = { address, origin, bounds };
historyPush(createResourceLocatorString('SearchPage', flattenedRoutes, {}, searchParams)); history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, searchParams));
}; };
return ( return (
@ -26,13 +26,15 @@ export const LandingPageComponent = props => {
); );
}; };
const { func, arrayOf } = PropTypes; const { func, arrayOf, shape } = PropTypes;
LandingPageComponent.propTypes = { LandingPageComponent.propTypes = {
flattenedRoutes: arrayOf(propTypes.route).isRequired, flattenedRoutes: arrayOf(propTypes.route).isRequired,
// history.push from withRouter // from withRouter
push: func.isRequired, history: shape({
push: func.isRequired,
}).isRequired,
}; };
export default withRouter(LandingPageComponent); export default withRouter(LandingPageComponent);

View file

@ -9,7 +9,11 @@ const noop = () => null;
describe('LandingPage', () => { describe('LandingPage', () => {
it('matches snapshot', () => { it('matches snapshot', () => {
const tree = renderShallow( const tree = renderShallow(
<LandingPageComponent onLocationChanged={v => v} push={noop} flattenedRoutes={[]} /> <LandingPageComponent
onLocationChanged={v => v}
history={{ push: noop }}
flattenedRoutes={[]}
/>
); );
expect(tree).toMatchSnapshot(); expect(tree).toMatchSnapshot();
}); });

View file

@ -32,7 +32,7 @@ export const SearchPageComponent = props => {
listings, listings,
location, location,
pagination, pagination,
push: historyPush, history,
searchInProgress, searchInProgress,
searchListingsError, searchListingsError,
searchParams, searchParams,
@ -88,7 +88,7 @@ export const SearchPageComponent = props => {
const onNextPage = hasNext const onNextPage = hasNext
? () => { ? () => {
const urlParams = { address, origin, bounds, page: page + 1 }; const urlParams = { address, origin, bounds, page: page + 1 };
historyPush(createResourceLocatorString('SearchPage', flattenedRoutes, {}, urlParams)); history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, urlParams));
} }
: null; : null;
@ -96,7 +96,7 @@ export const SearchPageComponent = props => {
const onPreviousPage = hasPrev const onPreviousPage = hasPrev
? () => { ? () => {
const urlParams = { address, origin, bounds, page: page - 1 }; const urlParams = { address, origin, bounds, page: page - 1 };
historyPush(createResourceLocatorString('SearchPage', flattenedRoutes, {}, urlParams)); history.push(createResourceLocatorString('SearchPage', flattenedRoutes, {}, urlParams));
} }
: null; : null;
@ -152,8 +152,12 @@ SearchPageComponent.propTypes = {
totalItems: number, totalItems: number,
totalPages: number.isRequired, totalPages: number.isRequired,
}), }),
// history.push from withRouter
push: func.isRequired, // from withRouter
history: shape({
push: func.isRequired,
}).isRequired,
searchParams: object, searchParams: object,
searchInProgress: bool.isRequired, searchInProgress: bool.isRequired,
searchListingsError: instanceOf(Error), searchListingsError: instanceOf(Error),

View file

@ -21,7 +21,9 @@ describe('SearchPageComponent', () => {
const props = { const props = {
flattenedRoutes: [], flattenedRoutes: [],
location: { search: '' }, location: { search: '' },
push: () => console.log('HistoryPush called'), history: {
push: () => console.log('HistoryPush called'),
},
tab: 'listings', tab: 'listings',
searchInProgress: false, searchInProgress: false,
}; };

View file

@ -11,12 +11,12 @@ const House = () => <span dangerouslySetInnerHTML={{ __html: '&#127968;' }} />;
/* eslint-enable react/no-danger */ /* eslint-enable react/no-danger */
const Topbar = props => { const Topbar = props => {
const { isAuthenticated, onLogout, push: historyPush } = props; const { isAuthenticated, onLogout, history } = props;
const handleLogout = () => { const handleLogout = () => {
// History push function is passed to the action to enable // History push function is passed to the action to enable
// redirect to home when logout succeeds. // redirect to home when logout succeeds.
onLogout(historyPush); onLogout(history.push);
}; };
return ( return (
@ -37,13 +37,16 @@ const Topbar = props => {
Topbar.defaultProps = { user: null }; Topbar.defaultProps = { user: null };
const { bool, func } = PropTypes; const { bool, func, shape } = PropTypes;
Topbar.propTypes = { Topbar.propTypes = {
isAuthenticated: bool.isRequired, isAuthenticated: bool.isRequired,
onLogout: func.isRequired, onLogout: func.isRequired,
// history.push prop from withRouter
push: func.isRequired, // from withRouter
history: shape({
push: func.isRequired,
}).isRequired,
}; };
const mapStateToProps = state => ({ isAuthenticated: state.Auth.isAuthenticated }); const mapStateToProps = state => ({ isAuthenticated: state.Auth.isAuthenticated });

View file

@ -56,8 +56,8 @@ export const matchPathname = (pathname, routesConfiguration) => {
return flattenedRoutes.reduce( return flattenedRoutes.reduce(
(matches, route) => { (matches, route) => {
const { exact = false } = route; const { path, exact = false } = route;
const match = !route.path || matchPath(pathname, route.path, { exact }); const match = matchPath(pathname, { path, exact });
if (match) { if (match) {
matches.push({ matches.push({
route, route,

View file

@ -2888,6 +2888,16 @@ history@^4.5.1:
value-equal "^0.2.0" value-equal "^0.2.0"
warning "^3.0.0" warning "^3.0.0"
history@^4.6.0:
version "4.6.1"
resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.0.0"
value-equal "^0.2.0"
warning "^3.0.0"
hmac-drbg@^1.0.0: hmac-drbg@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.0.tgz#3db471f45aae4a994a0688322171f51b8b91bee5" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.0.tgz#3db471f45aae4a994a0688322171f51b8b91bee5"
@ -5400,21 +5410,22 @@ react-redux@^5.0.3:
lodash-es "^4.2.0" lodash-es "^4.2.0"
loose-envify "^1.1.0" loose-envify "^1.1.0"
react-router-dom@4.0.0-beta.6: react-router-dom@^4.0.0:
version "4.0.0-beta.6" version "4.0.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0-beta.6.tgz#bdbd8f2fea3def52970735778db03b24cc082a02" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.0.0.tgz#4fa4418e14b8cfc5bcc0bdea0c4083fb8c2aef10"
dependencies: dependencies:
history "^4.5.1" history "^4.5.1"
react-router "^4.0.0-beta.6" react-router "^4.0.0"
react-router@^4.0.0-beta.6: react-router@^4.0.0:
version "4.0.0-beta.6" version "4.0.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.0.0-beta.6.tgz#561ac0bf1929960813bf201319ff85d821d5547b" resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.0.0.tgz#6532075231f0bb5077c2005c1d417ad6165b3997"
dependencies: dependencies:
history "^4.5.1" history "^4.6.0"
invariant "^2.2.2" invariant "^2.2.2"
loose-envify "^1.3.1" loose-envify "^1.3.1"
path-to-regexp "^1.5.3" path-to-regexp "^1.5.3"
warning "^3.0.0"
react-side-effect@^1.1.0: react-side-effect@^1.1.0:
version "1.1.0" version "1.1.0"