Review front end

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);

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 = () => {} }) => (
-  <Waypoint onEnter={({ previousPosition }) => (previousPosition === Waypoint.below ? onDown() : onUp())} bottomOffset="99%" fireOnRapidScroll />
+  <Waypoint
+    onEnter={({ previousPosition }) => (previousPosition === Waypoint.below ? onDown() : onUp())}
+    bottomOffset="99%"
+    fireOnRapidScroll
+  />
 );
 
+WaypointDirection.propTypes = {
+  onUp: PropTypes.func.isRequired,
+  onDown: PropTypes.func.isRequired,
+};
+
 export default WaypointDirection;

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']}
       />
       <Container className="mt-5 text-justify">
-        <h1 className="">
-          Under Construction... <Emoji symbol="🏗️" />
+        <h1>
+          {text.body} <Emoji symbol="🏗️" />
         </h1>
       </Container>
     </div>

web/src/requests/analyze-sleep.js → 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), {

web/src/views/analyze_sleep/index.js

@@ -4,13 +4,14 @@ 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 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);
   const [isFormSubmitted] = useGlobalState('isFormSubmitted');

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';

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 }) => (
   <Table size="sm" responsive>
     <thead>
@@ -40,6 +42,10 @@ const ClassificationReport = ({ rows }) => (
   </Table>
 );
 
+ClassificationReport.propTypes = {
+  rows: PropTypes.array.isRequired,
+};
+
 const Performance = () => {
   return (
     <div>

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;

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';
@@ -130,13 +131,13 @@ const StackedBarChartScrollyTelling = ({ epochs }) => {
         </CardBody>
       </Card>
       <div style={{ marginBottom: '125%' }} />
-      {/* <WaypointDirection onDown={} /> */}
-      <div style={{ marginBottom: '125%' }} />
-      {/* <WaypointDirection onDown={} /> */}
-      <div style={{ marginBottom: '125%' }} />
       &nbsp;
     </Container>
   );
 };
 
+StackedBarChartScrollyTelling.propTypes = {
+  epochs: PropTypes.object.isRequired,
+};
+
 export default StackedBarChartScrollyTelling;