1
0
mirror of https://github.com/alice-lg/alice-lg.git synced 2024-05-11 05:55:03 +00:00

load routes on demand

This commit is contained in:
Matthias Hannig
2018-08-03 18:51:50 +02:00
parent 95f402d019
commit a9b47b4f42
2 changed files with 28 additions and 20 deletions

View File

@ -6,7 +6,7 @@ import {Link} from 'react-router'
import {push} from 'react-router-redux'
const makeLinkProps = function(props) {
export const makeLinkProps = function(props) {
const linkPage = parseInt(props.page);
let pr = props.pageReceived;

View File

@ -12,6 +12,8 @@ import {fetchRoutesReceived,
fetchRoutesFiltered,
fetchRoutesNotExported} from './actions'
import {makeLinkProps} from './pagination'
// Constants
import {ROUTES_RECEIVED,
ROUTES_FILTERED,
@ -86,13 +88,15 @@ class RoutesView extends React.Component {
*/
routesNeedFetch(props) {
const type = this.props.type;
const params = this.props.routes[type];
const nextParams = props.routes[type];
const nextParams = this.props.routes[type];
const params = props.routes[type]; // Previous props
if (this.props.filterQuery != props.filterQuery ||
params.page != nextParams.page) {
return true;
if (this.props.filterQuery != props.filterQuery || // Pagination
params.page != nextParams.page || // Query
params.loadRoutes != nextParams.loadRoutes) {
return true;
}
return false;
}
@ -180,11 +184,6 @@ class RoutesView extends React.Component {
renderLoadTrigger() {
const type = this.props.type;
const state = this.props.routes[type];
const queryParam = {
[ROUTES_RECEIVED]: "pr",
[ROUTES_FILTERED]: "pf",
[ROUTES_NOT_EXPORTED]: "pn",
}[type];
const name = {
[ROUTES_RECEIVED]: "routes-received",
[ROUTES_FILTERED]: "routes-filtered",
@ -198,6 +197,19 @@ class RoutesView extends React.Component {
return null;
}
const linkProps = makeLinkProps({
loadNotExported: true,
anchor: "routes-not-exported",
page: this.props.routes.notExported.page,
pageReceived: this.props.routes.received.page,
pageFiltered: this.props.routes.filtered.page,
pageNotExported: this.props.routes.notExported.page,
routing: this.props.routing
});
return (
<div className={`card routes-view ${name}`}>
<div className="row">
@ -209,20 +221,15 @@ class RoutesView extends React.Component {
</div>
<p className="help">
Due to the high amount of routes not exported,
they are only fetched them on demand:
they are only fetched on demand.
</p>
Link to:
<button className="btn btn-danger btn-block"
onClick={() => this.triggerFetchRoutes()}
>Load Routes Not Exported</button>
<Link to={linkProps} className="btn btn-block btn-danger">
Load Routes Not Exported
</Link>
</div>
);
}
}
export default connect(
@ -273,6 +280,7 @@ export default connect(
[ROUTES_FILTERED]: filtered,
[ROUTES_NOT_EXPORTED]: notExported
},
routing: state.routing.locationBeforeTransitions
});
}
)(RoutesView);