From 85b0b716c5233e1defa5c8ff59fb024035280694 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Tue, 20 Oct 2020 01:03:46 -0400 Subject: [PATCH 1/4] convert ScrollToTop component to functional && use prop-types --- web/src/components/scroll_to_top.js | 22 +++++++++---------- web/src/components/waypoint_direction.js | 12 +++++++++- web/src/index.js | 5 +++-- web/src/views/analyze_sleep/index.js | 2 +- web/src/views/performance/index.js | 8 ++++++- .../spectrogram_scrollytelling.js | 6 +++++ .../stacked_bar_chart_scrollytelling.js | 5 +++++ 7 files changed, 44 insertions(+), 16 deletions(-) diff --git a/web/src/components/scroll_to_top.js b/web/src/components/scroll_to_top.js index 26a72721..3afcff18 100644 --- a/web/src/components/scroll_to_top.js +++ b/web/src/components/scroll_to_top.js @@ -1,16 +1,16 @@ -import React from 'react'; +import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; +import PropTypes from 'prop-types'; -class ScrollToTop extends React.Component { - componentDidUpdate(prevProps) { - if (this.props.location.pathname !== prevProps.location.pathname) { - window.scrollTo(0, 0); - } - } +const ScrollToTop = ({ location, children }) => { + useEffect(() => window.scrollTo(0, 0), [location.pathname]); - render() { - return this.props.children; - } -} + return children; +}; + +ScrollToTop.propTypes = { + location: PropTypes.object.isRequired, + children: PropTypes.array.isRequired, +}; export default withRouter(ScrollToTop); diff --git a/web/src/components/waypoint_direction.js b/web/src/components/waypoint_direction.js index 344535f1..de4a9b16 100644 --- a/web/src/components/waypoint_direction.js +++ b/web/src/components/waypoint_direction.js @@ -1,8 +1,18 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { Waypoint } from 'react-waypoint'; const WaypointDirection = ({ onUp = () => {}, onDown = () => {} }) => ( - (previousPosition === Waypoint.below ? onDown() : onUp())} bottomOffset="99%" fireOnRapidScroll /> + (previousPosition === Waypoint.below ? onDown() : onUp())} + bottomOffset="99%" + fireOnRapidScroll + /> ); +WaypointDirection.propTypes = { + onUp: PropTypes.func.isRequired, + onDown: PropTypes.func.isRequired, +}; + export default WaypointDirection; diff --git a/web/src/index.js b/web/src/index.js index 1a404c36..951f6438 100644 --- a/web/src/index.js +++ b/web/src/index.js @@ -21,6 +21,7 @@ const underConstruction = () => { header_title: 'Under', header_subtitle: 'construction', header_description: 'Please come back later', + body: 'Under Construction...', }; return ( @@ -33,8 +34,8 @@ const underConstruction = () => { description={text['header_description']} /> -

- Under Construction... +

+ {text.body}

diff --git a/web/src/views/analyze_sleep/index.js b/web/src/views/analyze_sleep/index.js index 5f1c9822..4704993e 100644 --- a/web/src/views/analyze_sleep/index.js +++ b/web/src/views/analyze_sleep/index.js @@ -7,9 +7,9 @@ import useGlobalState from 'hooks/useGlobalState'; import { periodicPingServer } from 'requests/ping-server'; import WaitingForServer from './waiting_for_server'; import UploadForm from './upload_form'; -import text from './text.json'; import { PING_PERIOD } from './constants'; import AnalysisInProgress from './analysis_in_progress.js'; +import text from './text.json'; const AnalyzeSleep = () => { const [serverReady, setServerReady] = useState(false); diff --git a/web/src/views/performance/index.js b/web/src/views/performance/index.js index 233ce2b2..57bb1289 100644 --- a/web/src/views/performance/index.js +++ b/web/src/views/performance/index.js @@ -1,11 +1,11 @@ import React from 'react'; import { Container, Row, Table } from 'reactstrap'; +import PropTypes from 'prop-types'; import Header from 'components/header'; import WIPWarning from 'components/wip_warning'; import D3Component from 'components/d3component'; -import text from './text.json'; import { createComparativeHypnogram } from 'd3/hypnogram/hypnogram'; import physionetWoman78yoSleepEDF from 'assets/data/physionet_woman78yo_sleepedf'; @@ -14,6 +14,8 @@ import electrophysiologistWoman78yoSleepEDF from 'assets/data/electrophysiologis import electrophysiologistWilliamCyton from 'assets/data/electrophysiologist_william_cyton'; import predictedWilliamCyton from 'assets/data/predicted_william_cyton'; +import text from './text.json'; + const ClassificationReport = ({ rows }) => ( @@ -40,6 +42,10 @@ const ClassificationReport = ({ rows }) => (
); +ClassificationReport.propTypes = { + rows: PropTypes.array.isRequired, +}; + const Performance = () => { return (
diff --git a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js index e5b8b069..c62be124 100644 --- a/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/spectrogram_scrollytelling.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import { Container, Card, CardBody } from 'reactstrap'; import createSpectrogram, { spectrogramCallbacks } from '../../d3/spectrogram/spectrogram'; @@ -114,4 +115,9 @@ const SpectrogramScrollyTelling = ({ spectrograms, epochs }) => { ); }; +SpectrogramScrollyTelling.propTypes = { + spectrograms: PropTypes.object.isRequired, + epochs: PropTypes.object.isRequired, +}; + export default SpectrogramScrollyTelling; diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js index 9b14459a..96e46239 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import PropTypes from 'prop-types'; import { Container, Card, CardBody } from 'reactstrap'; import D3ComponentScrollyTelling from 'components/d3component_scrollytelling'; @@ -139,4 +140,8 @@ const StackedBarChartScrollyTelling = ({ epochs }) => { ); }; +StackedBarChartScrollyTelling.propTypes = { + epochs: PropTypes.object.isRequired, +}; + export default StackedBarChartScrollyTelling; From 8f2b022fb62af43d7fa383804c44c7229de52c66 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Tue, 20 Oct 2020 01:30:54 -0400 Subject: [PATCH 2/4] Use _ instead of - as word separator in file name --- web/src/requests/{analyze-sleep.js => analyze_sleep.js} | 9 ++++++++- web/src/requests/object-to-formdata.js | 7 ------- web/src/requests/{ping-server.js => ping_server.js} | 0 web/src/views/analyze_sleep/index.js | 3 ++- web/src/views/analyze_sleep/upload_form/index.js | 2 +- .../stacked_bar_chart_scrollytelling.js | 4 ---- 6 files changed, 11 insertions(+), 14 deletions(-) rename web/src/requests/{analyze-sleep.js => analyze_sleep.js} (61%) delete mode 100644 web/src/requests/object-to-formdata.js rename web/src/requests/{ping-server.js => ping_server.js} (100%) diff --git a/web/src/requests/analyze-sleep.js b/web/src/requests/analyze_sleep.js similarity index 61% rename from web/src/requests/analyze-sleep.js rename to web/src/requests/analyze_sleep.js index b223f439..201c3cba 100644 --- a/web/src/requests/analyze-sleep.js +++ b/web/src/requests/analyze_sleep.js @@ -1,6 +1,13 @@ import { SERVER_URL } from './constants'; import Axios from 'axios-observable'; -import { objectToFormData } from './object-to-formdata'; + +const objectToFormData = (obj) => { + const formData = new FormData(); + for (const key in obj) { + formData.append(key, obj[key]); + } + return formData; +}; export const analyzeSleep = (formData) => Axios.post(`${SERVER_URL}/analyze_sleep`, objectToFormData(formData), { diff --git a/web/src/requests/object-to-formdata.js b/web/src/requests/object-to-formdata.js deleted file mode 100644 index ed7d6cb7..00000000 --- a/web/src/requests/object-to-formdata.js +++ /dev/null @@ -1,7 +0,0 @@ -export const objectToFormData = (obj) => { - const formData = new FormData(); - for (const key in obj) { - formData.append(key, obj[key]); - } - return formData; -}; diff --git a/web/src/requests/ping-server.js b/web/src/requests/ping_server.js similarity index 100% rename from web/src/requests/ping-server.js rename to web/src/requests/ping_server.js diff --git a/web/src/views/analyze_sleep/index.js b/web/src/views/analyze_sleep/index.js index 4704993e..854cfedc 100644 --- a/web/src/views/analyze_sleep/index.js +++ b/web/src/views/analyze_sleep/index.js @@ -4,11 +4,12 @@ import { Redirect } from 'react-router'; import Header from 'components/header'; import useGlobalState from 'hooks/useGlobalState'; -import { periodicPingServer } from 'requests/ping-server'; +import { periodicPingServer } from 'requests/ping_server'; import WaitingForServer from './waiting_for_server'; import UploadForm from './upload_form'; import { PING_PERIOD } from './constants'; import AnalysisInProgress from './analysis_in_progress.js'; + import text from './text.json'; const AnalyzeSleep = () => { diff --git a/web/src/views/analyze_sleep/upload_form/index.js b/web/src/views/analyze_sleep/upload_form/index.js index d0126faf..b2f19ddc 100644 --- a/web/src/views/analyze_sleep/upload_form/index.js +++ b/web/src/views/analyze_sleep/upload_form/index.js @@ -14,7 +14,7 @@ import { import './style.css'; import useGlobalState from 'hooks/useGlobalState'; -import { analyzeSleep } from 'requests/analyze-sleep'; +import { analyzeSleep } from 'requests/analyze_sleep'; const dateFieldSuffix = '_date'; const timeFieldSuffix = '_time'; diff --git a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js index 96e46239..567d9d9d 100644 --- a/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js +++ b/web/src/views/sleep_analysis_results/stacked_bar_chart_scrollytelling.js @@ -131,10 +131,6 @@ const StackedBarChartScrollyTelling = ({ epochs }) => {
- {/* */} -
- {/* */} -
  ); From b03848e88c58736077dd06559c718a5c56566475 Mon Sep 17 00:00:00 2001 From: William Harvey Date: Tue, 20 Oct 2020 10:04:10 -0400 Subject: [PATCH 3/4] Update web/src/components/scroll_to_top.js Co-authored-by: Anes Belfodil --- web/src/components/scroll_to_top.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/scroll_to_top.js b/web/src/components/scroll_to_top.js index 3afcff18..c86a3970 100644 --- a/web/src/components/scroll_to_top.js +++ b/web/src/components/scroll_to_top.js @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React, { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; import PropTypes from 'prop-types'; From cd3153061c90f9d0fcb50aefd6354f5c26fac08b Mon Sep 17 00:00:00 2001 From: William Harvey Date: Tue, 20 Oct 2020 10:17:48 -0400 Subject: [PATCH 4/4] remove unused import --- web/src/components/scroll_to_top.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/scroll_to_top.js b/web/src/components/scroll_to_top.js index c86a3970..3afcff18 100644 --- a/web/src/components/scroll_to_top.js +++ b/web/src/components/scroll_to_top.js @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; import PropTypes from 'prop-types';