+
+
+ {label}
+
+
+ );
};
diff --git a/src/components/DuosFooter.js b/src/components/DuosFooter.js
index e8a8b9eba..53a851ae6 100644
--- a/src/components/DuosFooter.js
+++ b/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'])])
- ])
- ])
- ])
+
+
+
);
}
diff --git a/src/components/PageHeading.js b/src/components/PageHeading.js
index 84a68217c..06a27f6eb 100644
--- a/src/components/PageHeading.js
+++ b/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 (
+
+ {imgSrc !== undefined &&
+ 
+ }
+
+ );
+};
+
+export default PageHeading;
diff --git a/src/components/PaginationBar.js b/src/components/PaginationBar.js
index 620792e6e..9f63fc4f5 100644
--- a/src/components/PaginationBar.js
+++ b/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
- })
- ])
- ])
+
+
+ + {title} +
+ + {description} + +
+
+
);
}
\ No newline at end of file
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.js
index 3e593d1c7..0a510b430 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.js
@@ -1,4 +1,4 @@
-import {div, input, label, span} from 'react-hyperscript-helpers';
+import React from 'react';
import * as fp from 'lodash/fp';
export const RadioButton = (props) => {
@@ -52,28 +52,26 @@ export const RadioButton = (props) => {
};
return (
- div({style: props.style}, [
- label({style: wrapperStyle}, [
- div({style: {float: 'left'}}, [
- input({
- id: props.id,
- type: 'radio',
- name: props.name,
- value: props.value,
- checked: props.defaultChecked,
- onClick: props.onClick,
- disabled: props.disabled,
- onChange: props.onChange ? props.onChange : () => {}
- }),
- span({
- style: props.defaultChecked ? checkedStyle : uncheckedStyle,
- }),
- ]),
- div({style: {marginLeft: '3rem'}}, [
- span({style: labelStyle}, [props.label]),
- span({style: descriptionStyle}, [props.description]),
- ]),
- ])
- ])
+
+
+
+ goToPage(toNumber(currentPage.current.value) - 1)}
+ onMouseEnter={applyTextHover}
+ onMouseLeave={(e) => removeTextHover(e, Theme.palette.primary)}>
+ Prev
+
+
+
+ Page
+ goToPage(toNumber(currentPage.current.value))}
+ type="text"
+ ref={currentPage}
+ defaultValue={props.currentPage}
+ style={Styles.TABLE.PAGINATION_INPUT} />
+ of {pageCount}
+
+
+ goToPage(toNumber(currentPage.current.value) + 1)}
+ onMouseEnter={applyTextHover}
+ onMouseLeave={(e) => removeTextHover(e, '#1f3b50')}>
+ Next
+
+
+
+ Rows per page:
+ changeTableSize(tableSize.current.value)}
+ type="text"
+ ref={tableSize}
+ defaultValue={props.tableSize}
+ style={Styles.TABLE.PAGINATION_INPUT} />
+
+
+
+
);
};
diff --git a/src/components/ReadMore.js b/src/components/ReadMore.js
index b62f59ed2..885546989 100644
--- a/src/components/ReadMore.js
+++ b/src/components/ReadMore.js
@@ -1,93 +1,83 @@
-import get from 'lodash/get';
-import { Component } from 'react';
-import { a, div, hh, span } from 'react-hyperscript-helpers';
+import React from 'react';
+import { useEffect, useState } from 'react';
import ReactTooltip from 'react-tooltip';
+export const ReadMore = ({
+ inline = false,
+ content = [{''}],
+ moreContent = [{''}],
+ className = '',
+ style = {},
+ readStyle = {},
+ charLimit = 100,
+ hideUnderLimit = false,
+ readMoreText = 'Read More',
+ readLessText = 'Read Less',
+}) => {
+ const [expanded, setExpanded] = useState(false);
-export const ReadMore = hh(class ReadMore extends Component {
- constructor(props) {
- super(props);
- this.state = {
- expanded: false,
- inline: get(this.props, 'inline', false),
- content: get(this.props, 'content', [span({}, [''])]),
- moreContent: get(this.props, 'moreContent', [span({}, [''])]),
- className: get(this.props, 'className', ''),
- style: get(this.props, 'style', {}),
- readStyle: get(this.props, 'readStyle', {}),
- charLimit: get(this.props, 'charLimit', 100),
- hideUnderLimit: get(this.props, 'hideUnderLimit', false),
- readMoreText: get(this.props, 'readMoreText', 'Read More'),
- readLessText: get(this.props, 'readLessText', 'Read Less')
- };
- }
-
- componentDidMount() {
+ useEffect(() => {
ReactTooltip.rebuild();
- }
+ });
- getContent = () => {
- return this.state.inline ? this.getInlineContent() : this.getFormattedContent();
+ const getUnderLimit = () => {
+ return !content || content.length <= charLimit;
};
- getUnderLimit = () => {
- return !this.state.content || this.state.content.length <= this.state.charLimit;
+ const getInlineContent = () => {
+ const content = expanded
+ ? content
+ : content.slice(0, charLimit) + (hideUnderLimit
+ ? getUnderLimit() ? '' : ' ...'
+ : ' ...');
+ return (
+
+ {content}
+
+ );
};
- getInlineContent = () => {
- const content = this.state.expanded
- ? this.state.content
- : this.state.content.slice(0, this.state.charLimit) + (this.state.hideUnderLimit
- ? this.getUnderLimit() ? '' : ' ...'
- : ' ...');
- return span({
- className: this.state.className,
- style: this.state.style,
- }, content);
+ const getFormattedContent = () => {
+ return expanded ? [...content, ...moreContent] : content;
};
- getFormattedContent = () => {
- return this.state.expanded ? [...this.state.content, ...this.state.moreContent] : this.state.content;
+ const getContent = () => {
+ return inline ? getInlineContent() : getFormattedContent();
};
- readMore = () => {
- this.setState(prev => {
- prev.expanded = true;
- return prev;
- });
+ const readMore = () => {
+ setExpanded(true);
};
- readLess = () => {
- this.setState(prev => {
- prev.expanded = false;
- return prev;
- });
+ const readLess = () => {
+ setExpanded(false);
};
- getReadLink = (fun, text, classes) => {
- const {linkElements, linkElementsStyle} = this.state.inline ?
- {linkElements: [text], linkElementsStyle: {}} :
- {
+ const getReadLink = (fun, text, classes) => {
+ const { linkElements, linkElementsStyle } = inline
+ ? { linkElements: [text], linkElementsStyle: {} }
+ : {
linkElements: [
text,
- span({
- className: classes,
- style: {padding: '0 1rem'},
- 'aria-hidden': 'true',
- })], linkElementsStyle: this.state.readStyle,
+ ,
+ ],
+ linkElementsStyle: readStyle,
};
- return a({ onClick: () => fun(), style: linkElementsStyle}, linkElements);
+ return (
+ fun()} style={linkElementsStyle}>
+ {linkElements}
+
+ );
};
- render() {
- const readLink = this.state.expanded ?
- this.getReadLink(this.readLess, this.state.readLessText, 'glyphicon glyphicon-chevron-up') :
- this.getReadLink(this.readMore, this.state.readMoreText, 'glyphicon glyphicon-chevron-down');
- return div({}, this.state.hideUnderLimit && this.getUnderLimit() ? [
- this.getContent()
- ]: [
- this.getContent(),
- readLink
- ]);
- }
-});
+ const readLink = expanded ?
+ getReadLink(readLess, readLessText, 'glyphicon glyphicon-chevron-up') :
+ getReadLink(readMore, readMoreText, 'glyphicon glyphicon-chevron-down');
+
+ return (
+
+ {getContent()}
+ {hideUnderLimit && getUnderLimit() || readLink}
+
+ );
+};
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index d0a8d2343..6df8f682f 100644
--- a/src/components/SearchBar.js
+++ b/src/components/SearchBar.js
@@ -1,14 +1,13 @@
-
+import React from 'react';
import { useRef } from 'react';
-import { div, input } from 'react-hyperscript-helpers';
-import { Styles} from '../libs/theme';
+import { Styles } from '../libs/theme';
import { defaultTo } from 'lodash/fp';
export default function SearchBar(props) {
const { handleSearchChange } = props;
const searchTerms = useRef('');
- const button = props.button ? props.button : div();
+ const button = props.button ? props.button : ;
const style = {
width: '100%',
@@ -22,17 +21,17 @@ export default function SearchBar(props) {
...props.style
};
- return div({className: 'right-header-section', style: Styles.RIGHT_HEADER_SECTION}, [
- input({
- 'data-cy': 'search-bar',
- type: 'text',
- placeholder: 'Enter search terms',
- //Styling seems to only work when defined here, variable reference doesn't work
- //Odds are there's a competing style, need to figure out where it's coming from
- style,
- onChange:() => handleSearchChange(props.searchRef ? defaultTo('')(props.searchRef.current.value) : searchTerms),
- ref: props.searchRef || searchTerms
- }),
- button
- ]);
-}
\ No newline at end of file
+ return (
+
+ handleSearchChange(props.searchRef ? defaultTo('')(props.searchRef.current.value) : searchTerms)}
+ ref={props.searchRef || searchTerms}
+ />
+ {button}
+
+ );
+}
diff --git a/src/components/SelectableText.js b/src/components/SelectableText.js
index b852158ff..91e37b305 100644
--- a/src/components/SelectableText.js
+++ b/src/components/SelectableText.js
@@ -1,5 +1,5 @@
+import React from 'react';
import { useState, useEffect, useMemo } from 'react';
-import { div } from 'react-hyperscript-helpers';
const defaultUnselectedStyle = {
fontSize: '1.8rem',
@@ -24,7 +24,6 @@ export default function SelectableText({label, setSelected, selectedType, styleO
const {baseStyle, tabSelected, tabUnselected, tabHover} = styleOverride;
-
const utilizedUnselectedStyle = useMemo(() => {
return Object.assign({}, tabUnselected || defaultUnselectedStyle, baseStyle);
}, [tabUnselected, baseStyle]);
@@ -42,7 +41,6 @@ export default function SelectableText({label, setSelected, selectedType, styleO
);
}, [label, selectedType, utilizedSelectedStyle, utilizedUnselectedStyle]);
-
const addHoverEffect = () => {
setStyle(utilizedHoverStyle);
};
@@ -50,14 +48,15 @@ export default function SelectableText({label, setSelected, selectedType, styleO
setStyle(selectedType === label ? utilizedSelectedStyle : utilizedUnselectedStyle);
};
-
- return(
- div({
- style,
- onMouseEnter: addHoverEffect,
- onMouseLeave: removeHoverEffect,
- onClick: () => !isDisabled && setSelected(label),
- className: `tab-selection-${label}`
- }, [label])
+ return (
+ !isDisabled && setSelected(label)}
+ className={`tab-selection-${label}`}
+ >
+ {label}
+
);
-}
\ No newline at end of file
+}
diff --git a/src/components/SignIn.js b/src/components/SignIn.js
index 32ceeb393..dc633d032 100644
--- a/src/components/SignIn.js
+++ b/src/components/SignIn.js
@@ -1,22 +1,21 @@
-import React, {useEffect, useState} from 'react';
-import {isEmpty, isNil} from 'lodash/fp';
-import {a, div, h, img, span} from 'react-hyperscript-helpers';
-import {Alert} from './Alert';
-import {ToS, User} from '../libs/ajax';
+import React, { useEffect, useState } from 'react';
+import { isEmpty, isNil } from 'lodash/fp';
+import { Alert } from './Alert';
+import { ToS, User } from '../libs/ajax';
import { Metrics } from '../libs/metrics';
-import {Config} from '../libs/config';
-import {Storage} from '../libs/storage';
-import {Navigation, setUserRoleStatuses} from '../libs/utils';
+import { Config } from '../libs/config';
+import { Storage } from '../libs/storage';
+import { Navigation, setUserRoleStatuses } from '../libs/utils';
import loadingIndicator from '../images/loading-indicator.svg';
-import {Spinner} from './Spinner';
+import { Spinner } from './Spinner';
import ReactTooltip from 'react-tooltip';
-import {GoogleIS} from '../libs/googleIS';
+import { GoogleIS } from '../libs/googleIS';
import eventList from '../libs/events';
-export default function SignIn(props) {
+export const SignIn = (props) => {
const [clientId, setClientId] = useState('');
const [errorDisplay, setErrorDisplay] = useState({});
- const {onSignIn, history, customStyle} = props;
+ const { onSignIn, history, customStyle } = props;
useEffect(() => {
// Using `isSubscribed` resolves the
@@ -44,7 +43,7 @@ export default function SignIn(props) {
setUserRoleStatuses(user, Storage);
await onSignIn();
const userStatus = await ToS.getStatus();
- const {tosAccepted} = userStatus;
+ const { tosAccepted } = userStatus;
if (!isEmpty(userStatus) && !tosAccepted) {
await Storage.setUserIsLogged(false);
if (isNil(redirectPath)) {
@@ -112,13 +111,13 @@ export default function SignIn(props) {
switch (status) {
case 400:
- setErrorDisplay({show: true, title: 'Error', msg: JSON.stringify(error)});
+ setErrorDisplay({ show: true, title: 'Error', msg: JSON.stringify(error) });
break;
case 409:
handleConflictError(redirectTo, shouldRedirect);
break;
default:
- setErrorDisplay({show: true, title: 'Error', msg: 'Unexpected error, please try again'});
+ setErrorDisplay({ show: true, title: 'Error', msg: 'Unexpected error, please try again' });
break;
}
};
@@ -134,65 +133,61 @@ export default function SignIn(props) {
const onFailure = (response) => {
Storage.clearStorage();
if (response.error === 'popup_closed_by_user') {
- setErrorDisplay({
- description: span({}, ['Sign-in cancelled ... ', img({height: '20px', src: loadingIndicator})])
- });
+ setErrorDisplay(
+
+ Sign-in cancelled ...
+