Tidy up react code

web/src/components/footer/partners.js

@@ -4,11 +4,11 @@ import { Container, Row } from 'reactstrap';
 
 import text from './text.json';
 
-import Polymtl from '../../assets/img/partners/polymtl.png';
-import AEP from '../../assets/img/partners/aep.png';
-import Protocase from '../../assets/img/partners/protocase.png';
-import NTX from '../../assets/img/partners/ntx.png';
-import Diptrace from '../../assets/img/partners/diptrace.png';
+import Polymtl from 'assets/img/partners/polymtl.png';
+import AEP from 'assets/img/partners/aep.png';
+import Protocase from 'assets/img/partners/protocase.png';
+import NTX from 'assets/img/partners/ntx.png';
+import Diptrace from 'assets/img/partners/diptrace.png';
 
 const Partner = ({ img, alt, width }) => {
   return <img alt={alt} className="img-center img-fluid" src={img} style={{ width: `${width}px` }} />;

web/src/index.js

@@ -1,35 +1,58 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
+import { Container } from 'reactstrap';
 
 import 'argon-design-system-react/src/assets/vendor/nucleo/css/nucleo.css';
 import 'argon-design-system-react/src/assets/vendor/font-awesome/css/font-awesome.min.css';
 import 'argon-design-system-react/src/assets/scss/argon-design-system-react.scss';
 import 'assets/css/visualisation.css';
 
-import SleepAnalysis from 'views/sleep_analysis/sleep_analysis';
-import Performance from 'views/performance/performance';
+import Header from 'components/header';
+import Footer from 'components/footer';
+import Navbar from 'components/navbar';
+import SleepAnalysis from 'views/sleep-analysis';
+import Performance from 'views/performance';
 import ScrollToTop from 'components/scroll_to_top';
 import Emoji from 'components/emoji';
 
+const underConstruction = () => {
+  const text = {
+    header_title: 'Under',
+    header_subtitle: 'construction',
+    header_description: 'Please come back later',
+  };
+
+  return (
+    <div>
+      <Header
+        sizeClass={'pb-100'}
+        shapeQty={7}
+        title={text['header_title']}
+        subtitle={text['header_subtitle']}
+        description={text['header_description']}
+      />
+      <Container className="mt-5 text-justify">
+        <h1 className="">
+          Under Construction... <Emoji symbol="🏗️" />
+        </h1>
+      </Container>
+    </div>
+  );
+};
+
 ReactDOM.render(
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <ScrollToTop>
+      <Navbar />
       <Switch>
         <Route exact path="/" render={() => <SleepAnalysis />} />
-        <Route
-          exact
-          path="/record-my-sleep"
-          render={() => (
-            <h1 className="">
-              Under Construction... <Emoji symbol="🏗️" />
-            </h1>
-          )}
-        />
-        <Route exact path="/analyze-my-sleep" render={() => <SleepAnalysis />} />
+        <Route exact path="/record-my-sleep" render={underConstruction} />
+        <Route exact path="/analyze-my-sleep" render={underConstruction} />
         <Route exact path="/performance" render={() => <Performance />} />
         <Redirect to="/" />
       </Switch>
+      <Footer />
     </ScrollToTop>
   </BrowserRouter>,
   document.getElementById('root'),

web/src/views/performance/performance.js → web/src/views/performance/index.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { Container, Row, Table } from 'reactstrap';
 
-import Navbar from '../../components/navbar/navbar';
-import Header from '../../components/header';
-import WIPWarning from '../../components/wip_warning';
-import Footer from '../../components/footer/footer';
-import D3Component from '../../components/d3component';
+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 { useCSVData } from '../../hooks/api_hooks';
+import { useCSVData } from 'hooks/api_hooks';
 
 import hypnogramDataSleepEDF from 'assets/data/hypnogram.csv';
 import hypnogramDataPredicted from 'assets/data/hypnogram-predicted.csv';
@@ -52,7 +50,6 @@ const Performance = () => {
 
   return (
     <div>
-      <Navbar />
       <Header
         sizeClass={'pb-100'}
         shapeQty={7}
@@ -134,7 +131,6 @@ const Performance = () => {
           ]}
         />
       </Container>
-      <Footer />
     </div>
   );
 };

web/src/views/sleep_analysis/sleep_analysis.js → web/src/views/sleep-analysis/index.js

@@ -2,18 +2,16 @@ import React from 'react';
 import { Container, Row, Button } from 'reactstrap';
 import { Link } from 'react-router-dom';
 
-import Navbar from '../../components/navbar/navbar';
-import Header from '../../components/header';
-import Footer from '../../components/footer/footer';
-import D3Component from '../../components/d3component';
-import WIPWarning from '../../components/wip_warning';
+import Header from 'components/header';
+import D3Component from 'components/d3component';
+import WIPWarning from 'components/wip_warning';
 
-import { createSingleHypnogram } from '../../d3/hypnogram/hypnogram';
+import { createSingleHypnogram } from 'd3/hypnogram/hypnogram';
 
 import text from './text.json';
-import createSpectrogram from '../../d3/spectrogram/spectrogram';
+import createSpectrogram from 'd3/spectrogram/spectrogram';
 import StackedBarChartScrollyTelling from './stacked_bar_chart_scrollytelling';
-import { useCSVData } from '../../hooks/api_hooks';
+import { useCSVData } from 'hooks/api_hooks';
 
 import hypnogramDataSleepEDFPath from 'assets/data/hypnogram.csv';
 import spectrogramData from 'assets/data/spectrograms.json';
@@ -23,7 +21,6 @@ const SleepAnalysis = () => {
 
   return (
     <div>
-      <Navbar />
       <Header
         sizeClass={'pb-150'}
         shapeQty={7}
@@ -123,7 +120,6 @@ const SleepAnalysis = () => {
           Check out the performances
         </Button>
       </Container>
-      <Footer />
     </div>
   );
 };

web/src/views/sleep_analysis/stacked_bar_chart_scrollytelling.js → web/src/views/sleep-analysis/stacked_bar_chart_scrollytelling.js

@@ -3,16 +3,16 @@ import { Container, Card, CardBody } from 'reactstrap';
 
 import hypnogramCSVPath from 'assets/data/hypnogram.csv';
 
-import D3Component from '../../components/d3component';
-import WaypointDirection from '../../components/waypoint_direction';
+import D3Component from 'components/d3component';
+import WaypointDirection from 'components/waypoint_direction';
 
 import createEvolvingChart, {
   instanceChartCallbacks,
   timelineChartCallbacks,
   barChartCallbacks,
   stackedBarChartCallbacks,
-} from '../../d3/evolving_chart/evolving_chart';
-import { useCSVData } from '../../hooks/api_hooks';
+} from 'd3/evolving_chart/evolving_chart';
+import { useCSVData } from 'hooks/api_hooks';
 
 const StackedBarChartScrollyTelling = () => {
   const csvData = useCSVData(hypnogramCSVPath);