mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-31 02:26:50 +10:00
Update React Router
This commit is contained in:
parent
ae56344d0a
commit
5d32f57696
11 changed files with 69 additions and 35 deletions
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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 => ({
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -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),
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,12 @@ const House = () => <span dangerouslySetInnerHTML={{ __html: '🏠' }} />;
|
||||||
/* 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 });
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
27
yarn.lock
27
yarn.lock
|
|
@ -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"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue