From 118fcc0c15b4b92b06e97a63db986e878e2da41f Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Thu, 20 Dec 2018 16:04:44 +0200
Subject: [PATCH] Improve result table lifecycle handling
---
src/client/components/ResultTable.js | 27 ++++++++++++++++++------
src/client/components/ResultTableHead.js | 9 ++------
src/client/containers/MapApp.js | 2 +-
src/client/reducers/search.js | 4 ++--
4 files changed, 25 insertions(+), 17 deletions(-)
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index 5fd925b6..f092b384 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -65,29 +65,42 @@ class ResultTable extends React.Component {
let page;
if (this.props.routeProps.location.search === '') {
page = this.props.page === -1 ? 0 : this.props.page;
- this.props.routeProps.history.replace({
+ this.props.routeProps.history.push({
pathname: '/manuscripts/table',
- search: `?page=${page}`,
+ search: `?page=${this.props.page}`,
});
+ //console.log(`result table mounted WITHOUT page parameter, set page to ${page}`);
} else {
+ //console.log(this.props.routeProps.location.search)
page = parseInt(parse(this.props.routeProps.location.search).page);
+ // console.log(`result table mounted with page parameter, set page to ${page}`);
}
this.props.updatePage(page);
- // console.log('mounted, fetching manuscripts')
- this.props.fetchManuscripts();
+
}
componentDidUpdate = prevProps => {
if (prevProps.page != this.props.page) {
+ // console.log(`previous page: ${prevProps.page}`)
+ // console.log(`page updated to ${this.props.page}, fetch manuscripts`)
+ this.props.fetchManuscripts();
this.props.routeProps.history.push({
pathname: '/manuscripts/table',
search: `?page=${this.props.page}`,
});
}
if (prevProps.facetFilters != this.props.facetFilters) {
- // console.log('filters updated')
+ // console.log('filters updated, to page 0')
this.props.updatePage(0);
- this.props.fetchManuscripts();
+ if (this.props.page == 0) {
+ this.props.fetchManuscripts();
+ }
+ }
+ }
+
+ handleChangePage = (event, page) => {
+ if (event != null) {
+ this.props.updatePage(page);
}
}
@@ -254,7 +267,7 @@ class ResultTable extends React.Component {
<Table className={classes.table}>
<ResultTableHead
fetchManuscripts={this.props.fetchManuscripts}
- updatePage={this.props.updatePage}
+ onChangePage={this.handleChangePage}
resultCount={this.props.resultCount}
page={this.props.page}
routeProps={this.props.routeProps}
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index c1ffc9eb..70a11b23 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -78,11 +78,6 @@ class ResultTableHead extends React.Component {
orderBy: 'productionPlace',
};
- handleChangePage = (event, page) => {
- this.props.updatePage(page);
- this.props.fetchManuscripts();
- };
-
handleChangeRowsPerPage = event => {
this.setState({ rowsPerPage: event.target.value });
};
@@ -121,7 +116,7 @@ class ResultTableHead extends React.Component {
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[5]}
page={page}
- onChangePage={this.handleChangePage}
+ onChangePage={this.props.onChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
ActionsComponent={ResultTablePaginationActions}
classes={{root: classes.paginationRoot}}
@@ -147,7 +142,7 @@ ResultTableHead.propTypes = {
classes: PropTypes.object.isRequired,
resultCount: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
- updatePage: PropTypes.func.isRequired,
+ onChangePage: PropTypes.func.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired,
};
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index e9daff2b..cb24a27c 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -77,7 +77,7 @@ let MapApp = (props) => {
const { classes } = props;
// browser
// error,
- console.log(props.search)
+ ///console.log(props.search)
return (
<div className={classes.root}>
<div className={classes.appFrame}>
diff --git a/src/client/reducers/search.js b/src/client/reducers/search.js
index 3bfaaf7b..8f4ffa9b 100644
--- a/src/client/reducers/search.js
+++ b/src/client/reducers/search.js
@@ -87,8 +87,8 @@ const search = (state = INITIAL_STATE, action) => {
fetchingSuggestions: false
};
case UPDATE_MANUSCRIPTS:
- console.log('updating manuscripts:');
- console.log(action);
+ // console.log('updating manuscripts in reducer:');
+ // console.log(action);
return {
...state,
manuscriptCount: parseInt(action.data.manuscriptCount),
--
GitLab