[DUOS-2789] Switch pages and components to JSX

src/App.js

@@ -1,6 +1,5 @@
-import {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactGA from 'react-ga';
-import {div, h} from 'react-hyperscript-helpers';
 import Modal from 'react-modal';
 import './App.css';
 import {Config} from './libs/config';
@@ -81,18 +80,16 @@ function App() {
   };
 
   return (
-    div({className: 'body'}, [
-      div({className: 'wrap'}, [
-        div({className: 'main'}, [
-          h(DuosHeader, {onSignOut: signOut}),
-          h(Spinner, {
-            name: 'mainSpinner', group: 'duos', loadingImage
-          }),
-          h(Routes, {onSignOut: signOut, onSignIn: signIn, isLogged: isLoggedIn, env: env})
-        ])
-      ]),
-      DuosFooter()
-    ])
+    <div className="body">
+      <div className="wrap">
+        <div className="main">
+          <DuosHeader onSignOut={signOut} />
+          <Spinner name="mainSpinner" group="duos" loadingImage={loadingImage} />
+          <Routes onSignOut={signOut} onSignIn={signIn} isLogged={isLoggedIn} env={env} />
+        </div>
+      </div>
+      <DuosFooter />
+    </div>
   );
 }
 

src/Routes.js

@@ -50,7 +50,7 @@ const Routes = (props) => (
     <Route exact path="/" render={(routeProps) => <Home {...routeProps} {...props} />} />
     <Route exact path="/home" render={(routeProps) => <Home {...routeProps} {...props} />} />
     <Route exact path="/status" render={(routeProps) => Status(mergeAll([routeProps, props]))} />
-    <Route exact path="/liveness" render={() => HealthCheck()} />
+    <Route exact path="/liveness" component={HealthCheck} />
     <Route exact path="/backgroundsignin" render={
       (routeProps) =>
         checkEnv(envGroups.NON_STAGING)

src/components/DownloadLink.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { div, a, i, span } from 'react-hyperscript-helpers';
+import React from 'react';
 import { Theme } from '../libs/theme';
 
 const ICON = {
@@ -9,14 +9,12 @@ const ICON = {
 
 export const DownloadLink = props => {
   const { label, onDownload } = props;
-  return div({}, [
-    a({
-      id: _.kebabCase(label),
-      onClick: () => onDownload()
-    },
-    [
-      i({ className: 'glyphicon glyphicon-download-alt', style: ICON }),
-      span({style: { fontSize: Theme.font.size.small }}, label)
-    ])
-  ]);
+  return (
+    <div>
+      <a id={_.kebabCase(label)} onClick={onDownload}>
+        <i className='glyphicon glyphicon-download-alt' style={ICON} />
+        <span style={{ fontSize: Theme.font.size.small }}>{label}</span>
+      </a>
+    </div>
+  );
 };

src/components/DuosFooter.js

@@ -1,4 +1,4 @@
-import { a, div, footer, img, li, ul } from 'react-hyperscript-helpers';
+import React from 'react';
 import footerLogo from '../images/broad_logo_allwhite.png';
 
 function DuosFooter() {
@@ -24,17 +24,17 @@ function DuosFooter() {
   };
 
   return (
-    div({ style: footerStyle }, [
-      footer({ style: mainFooterStyle }, [
-        img({ src: footerLogo, style: footerLogoStyle, alt: 'Broad Institute logo' }),
-        ul({ className: 'footer-links' }, [
-          li({ className: 'footer-links__item' }, ['\u00A9 Broad Institute']),
-          li({ className: 'footer-links__item' }, [a({ href: '/privacy' }, ['Privacy Policy']),]),
-          li({ className: 'footer-links__item' }, [a({ href: '/tos' }, ['Terms of Service']),]),
-          li({ className: 'footer-links__item' }, [a({ href: '/status' }, ['Status'])])
-        ])
-      ])
-    ])
+    <div style={footerStyle}>
+      <footer style={mainFooterStyle}>
+        <img src={footerLogo} style={footerLogoStyle} alt='Broad Institute logo' />
+        <ul className='footer-links'>
+          <li className='footer-links__item'>© Broad Institute</li>
+          <li className='footer-links__item'><a href='/privacy'>Privacy Policy</a></li>
+          <li className='footer-links__item'><a href='/tos'>Terms of Service</a></li>
+          <li className='footer-links__item'><a href='/status'>Status</a></li>
+        </ul>
+      </footer>
+    </div>
   );
 }
 

src/components/PageHeading.js

@@ -1,82 +1,80 @@
-import {Component} from 'react';
-import {div, hh, img, h2, span} from 'react-hyperscript-helpers';
-import {isNil} from 'lodash';
+import React from 'react';
+import { isNil } from 'lodash';
 
-export const PageHeading = hh(class PageHeading extends Component {
+const margins = (iconSize) => {
 
-  margins(iconSize) {
+  const MEDIUM = {
+    marginLeft: '55px'
+  };
 
-    const MEDIUM = {
-      marginLeft: '55px'
-    };
+  const LARGE = {
+    marginLeft: '70px'
+  };
 
-    const LARGE = {
-      marginLeft: '70px'
-    };
-
-    const NONE = {
-      marginLeft: '0'
-    };
-
-    if (iconSize === 'none') {
-      return NONE;
-    }
-    if (iconSize === 'large') {
-      return LARGE;
-    } else {
-      return MEDIUM;
-    }
-  }
-
-  render() {
-
-    const HEADING = {
-      width: '100%',
-      margin: '20px 0 10px 0',
-      position: 'relative'
-    };
-
-    const ICON = {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      height: '50px'
-    };
-
-    const DESCRIPTION = {
-      color: '#000000',
-      height: '25px',
-      fontWeight: '400',
-      fontSize: '19px'
-    };
-
-    const TITLE = {
-      margin: '7px 0 5px 0',
-      lineBreak: 'auto'
-    };
-
-    const MARGINS = this.margins(this.props.iconSize);
-    const DESCRIPT_STYLE = isNil(this.props.descriptionStyle) ? DESCRIPTION : this.props.descriptionStyle;
-
-    return div({id: this.props.id + '_heading', style: HEADING}, [
-      img({
-        id: this.props.id + '_icon',
-        isRendered: this.props.imgSrc !== undefined,
-        src: this.props.imgSrc,
-        alt: this.props.title,
-        style: ICON
-      }),
-      div({style: MARGINS}, [
-        h2({
-          id: this.props.id + '_title',
-          className: this.props.color + '-color',
-          style: TITLE
-        }, [this.props.title]),
-        span({id: this.props.id + '_description', style: DESCRIPT_STYLE}, [this.props.description]),
-      ]),
-
-    ]);
+  const NONE = {
+    marginLeft: '0'
+  };
 
+  if (iconSize === 'none') {
+    return NONE;
+  } else if (iconSize === 'large') {
+    return LARGE;
+  } else {
+    return MEDIUM;
   }
-
-});
+};
+
+export const PageHeading = (props) => {
+  const { id, title, description, imgSrc, color, iconSize, descriptionStyle } = props;
+
+  const HEADING = {
+    width: '100%',
+    margin: '20px 0 10px 0',
+    position: 'relative'
+  };
+
+  const ICON = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    height: '50px'
+  };
+
+  const DESCRIPTION = {
+    color: '#000000',
+    height: '25px',
+    fontWeight: '400',
+    fontSize: '19px'
+  };
+
+  const TITLE = {
+    margin: '7px 0 5px 0',
+    lineBreak: 'auto'
+  };
+
+  const MARGINS = margins(iconSize);
+  const DESCRIPT_STYLE = isNil(descriptionStyle) ? DESCRIPTION : descriptionStyle;
+
+  return (
+    <div id={id + '_heading'} style={HEADING}>
+      {imgSrc !== undefined &&
+        <img
+          id={id + '_icon'}
+          src={imgSrc}
+          alt={title}
+          style={ICON}
+        />
+      }
+      <div style={MARGINS}>
+        <h2 id={id + '_title'} className={`${color}-color`} style={TITLE}>
+          {title}
+        </h2>
+        <span id={id + '_description'} style={DESCRIPT_STYLE}>
+          {description}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PageHeading;

src/components/PaginationBar.js

@@ -1,13 +1,13 @@
-import { div, input, span } from 'react-hyperscript-helpers';
+import React from 'react';
 import { useRef, useEffect } from 'react';
 import { toNumber } from 'lodash';
-import {Styles, Theme} from '../libs/theme';
+import { Styles, Theme } from '../libs/theme';
 
 //NOTE: This is a new pagination made to fit with the updated table look
 //Component does not use third-party libraries for pagination, whereas the old version relies on 'react-pagination'
 //Style works with Current Dar Table, but allows for modification with styles passed as a prop (though I expect to do some more fine-tuning with future implementations)
 export default function PaginationBar(props) {
-  const {pageCount, goToPage, changeTableSize} = props;
+  const { pageCount, goToPage, changeTableSize } = props;
   const currentPage = useRef(props.currentPage);
   const tableSize = useRef(props.tableSize);
   const applyTextHover = (e) => {
@@ -25,49 +25,41 @@ export default function PaginationBar(props) {
   }, [props.currentPage, props.tableSize]);
 
   return (
-    div({style: Styles.TABLE.FOOTER}, [
-      div({style: Styles.TABLE.PAGINATION_SECTION_OFFSET}),
-      div({style: Styles.TABLE.PAGINATION_BUTTON_SECTION}, [
-        div({
-          style: Styles.TABLE.PAGINATION_BUTTON
-        }, [
-          span({
-            onClick: () => goToPage(toNumber(currentPage.current.value) - 1),
-            onMouseEnter: applyTextHover,
-            onMouseLeave: (e) => removeTextHover(e, Theme.palette.primary),
-          },['Prev']),
-        ]),
-        div({style: Styles.TABLE.PAGINATION_CURRENT_PAGE}, [
-          span({},['Page ']),
-          input({
-            onChange: () => goToPage(toNumber(currentPage.current.value)),
-            type: 'text',
-            ref: currentPage,
-            defaultValue: props.currentPage,
-            style: Styles.TABLE.PAGINATION_INPUT
-          }),
-          span({}, [` of ${pageCount}`])
-        ]),
-        div({
-          style: Styles.TABLE.PAGINATION_BUTTON
-        }, [
-          span({
-            onClick: () => goToPage(toNumber(currentPage.current.value) + 1),
-            onMouseEnter: applyTextHover,
-            onMouseLeave: (e) => removeTextHover(e, '#1f3b50')
-          }, ['Next'])
-        ]),
-      ]),
-      div({style: Styles.TABLE.PAGINATION_TABLE_SIZE_SECTION}, [
-        span({style: {marginRight: '2%'}}, ['Rows per page: ']),
-        input({
-          onChange: () => changeTableSize(tableSize.current.value),
-          type: 'text',
-          ref: tableSize,
-          defaultValue: props.tableSize,
-          style: Styles.TABLE.PAGINATION_INPUT
-        })
-      ])
-    ])
+    <div style={Styles.TABLE.FOOTER}>
+      <div style={Styles.TABLE.PAGINATION_SECTION_OFFSET}></div>
+      <div style={Styles.TABLE.PAGINATION_BUTTON_SECTION}>
+        <div style={Styles.TABLE.PAGINATION_BUTTON}>
+          <span onClick={() => goToPage(toNumber(currentPage.current.value) - 1)}
+            onMouseEnter={applyTextHover}
+            onMouseLeave={(e) => removeTextHover(e, Theme.palette.primary)}>
+            Prev
+          </span>
+        </div>
+        <div style={Styles.TABLE.PAGINATION_CURRENT_PAGE}>
+          <span>Page </span>
+          <input onChange={() => goToPage(toNumber(currentPage.current.value))}
+            type="text"
+            ref={currentPage}
+            defaultValue={props.currentPage}
+            style={Styles.TABLE.PAGINATION_INPUT} />
+          <span> of {pageCount}</span>
+        </div>
+        <div style={Styles.TABLE.PAGINATION_BUTTON}>
+          <span onClick={() => goToPage(toNumber(currentPage.current.value) + 1)}
+            onMouseEnter={applyTextHover}
+            onMouseLeave={(e) => removeTextHover(e, '#1f3b50')}>
+            Next
+          </span>
+        </div>
+      </div>
+      <div style={Styles.TABLE.PAGINATION_TABLE_SIZE_SECTION}>
+        <span style={{ marginRight: '2%' }}>Rows per page: </span>
+        <input onChange={() => changeTableSize(tableSize.current.value)}
+          type="text"
+          ref={tableSize}
+          defaultValue={props.tableSize}
+          style={Styles.TABLE.PAGINATION_INPUT} />
+      </div>
+    </div>
   );
 }