diff --git a/opentech/static_src/src/app/src/containers/NoteListing.js b/opentech/static_src/src/app/src/containers/NoteListing.js
index 0e4e12801a3d4a1a225306e9a6628fed0045f98a..eea06b58e25604fc053ac63e073d66bfb2c9522b 100644
--- a/opentech/static_src/src/app/src/containers/NoteListing.js
+++ b/opentech/static_src/src/app/src/containers/NoteListing.js
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
+import useInterval from "@rooks/use-interval"
+
import { fetchNewNotesForSubmission } from '@actions/notes';
import Listing from '@components/Listing';
import Note from '@containers/Note';
@@ -14,49 +16,24 @@ import {
} from '@selectors/notes';
-class NoteListing extends React.Component {
- static propTypes = {
- loadNotes: PropTypes.func,
- submissionID: PropTypes.number,
- noteIDs: PropTypes.array,
- isErrored: PropTypes.bool,
- errorMessage: PropTypes.string,
- isLoading: PropTypes.bool,
- };
-
- componentDidUpdate(prevProps) {
- const { isLoading, loadNotes, submissionID } = this.props;
- const prevSubmissionID = prevProps.submissionID;
+const NoteListing = ({loadNotes, submissionID, noteIDs, isErrored, errorMessage, isLoading }) => {
+ const fetchNotes = () => loadNotes(submissionID)
- if(
- submissionID !== null && submissionID !== undefined &&
- prevSubmissionID !== submissionID && !isLoading
- ) {
- loadNotes(submissionID);
+ useEffect( () => {
+ if ( submissionID ) {
+ fetchNotes()
}
- }
+ }, [submissionID])
- componentDidMount() {
- const { isLoading, loadNotes, submissionID } = this.props;
+ useInterval(fetchNotes, 30000)
- if (submissionID && !isLoading) {
- loadNotes(submissionID);
- this.pollNotes = setInterval(() => loadNotes(submissionID), 30000)
+ const handleRetry = () => {
+ if (!isLoading || isErrored) {
+ fetchNotes()
}
}
- componentWillUnmount() {
- clearInterval(this.pollNotes)
- }
-
- handleRetry = () => {
- if (this.props.isLoading || !this.props.isErrored) {
- return;
- }
- this.props.loadNotes(this.props.submissionID);
- }
-
- renderItem = noteID => {
+ const renderItem = noteID => {
return (
<CSSTransition key={`note-${noteID}`} timeout={200} classNames="add-note">
<Note key={`note-${noteID}`} noteID={noteID} />
@@ -64,22 +41,29 @@ class NoteListing extends React.Component {
);
}
- render() {
- const { noteIDs, isLoading, isErrored, errorMessage } = this.props;
- return (
- <Listing
- isLoading={ isLoading }
- isError={ isErrored }
- error={ errorMessage }
- handleRetry={ this.handleRetry }
- renderItem={ this.renderItem }
- items={ noteIDs }
- column="notes"
- />
- );
- }
+ return (
+ <Listing
+ isLoading={ isLoading }
+ isError={ isErrored }
+ error={ errorMessage }
+ handleRetry={ handleRetry }
+ renderItem={ renderItem }
+ items={ noteIDs }
+ column="notes"
+ />
+ );
}
+NoteListing.propTypes = {
+ loadNotes: PropTypes.func,
+ submissionID: PropTypes.number,
+ noteIDs: PropTypes.array,
+ isErrored: PropTypes.bool,
+ errorMessage: PropTypes.string,
+ isLoading: PropTypes.bool,
+};
+
+
const mapDispatchToProps = dispatch => ({
loadNotes: submissionID => dispatch(fetchNewNotesForSubmission(submissionID)),
});
diff --git a/package-lock.json b/package-lock.json
index 407c8c2cc2a5689eb9f05e8b66e40a3d8925f530..19268ff324e2a31f659e208d18d2d138b7e91404 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -813,6 +813,11 @@
"through2": "^2.0.3"
}
},
+ "@rooks/use-interval": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@rooks/use-interval/-/use-interval-1.2.0.tgz",
+ "integrity": "sha512-gtYrJUNdYgflZRGwT7NjVqLRiD3EVT1ZxDqDCTStMN5jWtgIZulm8OJ3ZzZn62UTXtoSPcE/pJkQDccaD/NzhA=="
+ },
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.0.0.tgz",
@@ -8505,20 +8510,20 @@
}
},
"react-dom": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
- "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+ "version": "16.8.1",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz",
+ "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
- "scheduler": "^0.12.0"
+ "scheduler": "^0.13.1"
}
},
"react-hot-loader": {
- "version": "4.6.3",
- "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.6.3.tgz",
- "integrity": "sha512-FUvRO8dwbeLnc3mgLn8ARuSh8NnLBYJyiRjFn+grY/5GupSyPqv0U7ixgwXro77hwDplhm8z9wU7FlJ8kZqiAQ==",
+ "version": "4.6.5",
+ "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.6.5.tgz",
+ "integrity": "sha512-ZPAJEWVd8KDdm6dcK0iWrnJiGHruLrcbkIpqn/wQmNjnROpsm2nzrWh23Yh3I/XAjB+35pMa/ZgariwGqwFD9A==",
"dev": true,
"requires": {
"fast-levenshtein": "^2.0.6",
@@ -9439,9 +9444,9 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
},
"scheduler": {
- "version": "0.12.0",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
- "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+ "version": "0.13.1",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
+ "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
diff --git a/package.json b/package.json
index de38ee37b999164cb0a0d60975d79d09e9d0f1ae..a80398b653ac9d44a095ebeb03afd7cea9f11cd5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
],
"dependencies": {
"@babel/polyfill": "^7.2.5",
+ "@rooks/use-interval": "^1.2.0",
"@svgr/webpack": "^4.1.0",
"del": "^3.0.0",
"gulp": "^4.0.0",
@@ -30,7 +31,7 @@
"node-sass-import-once": "^1.2.0",
"prop-types": "^15.6.2",
"react": "^16.8.1",
- "react-dom": "^16.7.0",
+ "react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-rte": "^0.16.1",
"react-transition-group": "^2.5.3",
@@ -55,7 +56,7 @@
"gulp-sass-lint": "^1.4.0",
"gulp-sourcemaps": "^2.6.4",
"node-sass": "^4.11.0",
- "react-hot-loader": "^4.6.3",
+ "react-hot-loader": "^4.6.5",
"redux-devtools-extension": "^2.13.7",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",