[DUOS-2897] Remove more hyperscript helpers

src/components/Alert.js

@@ -1,26 +1,11 @@
-import { Component } from 'react';
-import { div, hh, h4, span } from 'react-hyperscript-helpers';
+import React from 'react';
 import './Alert.css';
 
-export const Alert = hh(class Alert extends Component {
-
-  render() {
-
-    return div({
-      id: this.props.id + '_alert',
-      className: 'alert-wrapper ' + (this.props.type)
-    }, [
-      h4({
-        id: this.props.id + '_title',
-        className: 'alert-title',
-        isRendered: this.props.title !== undefined
-      }, [this.props.title]),
-      span({
-        id: this.props.id + '_description',
-        className: 'alert-description',
-        isRendered: this.props.description !== undefined
-      }, [this.props.description]),
-    ]);
-  }
-
-});
+export const Alert = ({ id, type, title, description }) => {
+  return (
+    <div id={`${id}_alert`} className={`alert-wrapper ${type}`}>
+      {title && <h4 id={`${id}_title`} className="alert-title">{title}</h4>}
+      {description && <span id={`${id}_description`} className="alert-description">{description}</span>}
+    </div>
+  );
+};

src/components/CloseIconComponent.js

@@ -1,12 +1,10 @@
-import { button, span } from 'react-hyperscript-helpers';
+import React from 'react';
 
 export default function CloseIconComponent(props) {
   const { closeFn } = props;
-  return button({
-    type: 'button',
-    className: 'modal-close-btn close',
-    onClick: closeFn
-  }, [
-    span({ className: 'glyphicon glyphicon-remove default-color'})
-  ]);
-}
+  return (
+    <button type="button" className="modal-close-btn close" onClick={closeFn}>
+      <span className="glyphicon glyphicon-remove default-color" />
+    </button>
+  );
+}

src/components/CollectionAlgorithmDecision.js

@@ -1,5 +1,4 @@
 import {React} from 'react';
-import { div, h5, p, span, } from 'react-hyperscript-helpers';
 import { formatDate } from '../libs/utils';
 import{ isEmpty, isNil } from 'lodash/fp';
 
@@ -53,23 +52,24 @@ export default function CollectionAlgorithmDecision(props) {
   };
 
   return (
-    div(containerProps, [
-      div({style: {flex: 1, padding: '1%'}}, [
-        h5({id: `collection-${id}-subtitle`, style: {fontFamily: 'Montserrat', fontWeight: 800, fontSize: 17, color: '#333F52'}}, ['DUOS Algorithm Decision']),
-        div({style: {fontSize: '1.5rem'}}, [
-          span({id: `collection-${id}-decision-label`, style: {paddingRight: '1%', color: '#333F52'}}, ['Decision:']),
-          span({id: `collection-${id}-decision-value`, style: {fontWeight: 400}}, [getResult(result)])
-        ]),
-        div({style: {fontSize: '1.5rem'}}, [
-          span({id: `collection-${id}-reason-label`, style: {paddingRight: '1%', color: '#333F52'}}, ['Reason:']),
-          span({id: `collection-${id}-reason-value`, style: {fontWeight: 400}},
-            [!isEmpty(rationales) ? rationales.map((r, idx) => p({key: idx}, [r])) : 'N/A'])
-        ]),
-        div({style: {fontSize: '1.5rem'}}, [
-          span({id: `collection-${id}-date-label`, style: {paddingRight: '1%', color: '#333F52'}}, ['Date:']),
-          span({id: `collection-${id}-date-value`, style: {fontWeight: 400}}, [!isNil(createDate) ? formatDate(createDate) : 'N/A'])
-        ])
-      ])
-    ])
+    <div {...containerProps}>
+      <div style={{flex: 1, padding: '1%'}}>
+        <h5 id={`collection-${id}-subtitle`} style={{fontFamily: 'Montserrat', fontWeight: 800, fontSize: 17, color: '#333F52'}}>DUOS Algorithm Decision</h5>
+        <div style={{fontSize: '1.5rem'}}>
+          <span id={`collection-${id}-decision-label`} style={{paddingRight: '1%', color: '#333F52'}}>Decision:</span>
+          <span id={`collection-${id}-decision-value`} style={{fontWeight: 400}}>{getResult(result)}</span>
+        </div>
+        <div style={{fontSize: '1.5rem'}}>
+          <span id={`collection-${id}-reason-label`} style={{paddingRight: '1%', color: '#333F52'}}>Reason:</span>
+          <span id={`collection-${id}-reason-value`} style={{fontWeight: 400}}>
+            {!isEmpty(rationales) ? rationales.map((r, idx) => <p key={idx}>{r}</p>) : 'N/A'}
+          </span>
+        </div>
+        <div style={{fontSize: '1.5rem'}}>
+          <span id={`collection-${id}-date-label`} style={{paddingRight: '1%', color: '#333F52'}}>Date:</span>
+          <span id={`collection-${id}-date-value`} style={{fontWeight: 400}}>{!isNil(createDate) ? formatDate(createDate) : 'N/A'}</span>
+        </div>
+      </div>
+    </div>
   );
 }

src/components/ConfirmationDialog_new.js

@@ -1,5 +1,4 @@
-import { mergeAll } from 'lodash/fp';
-import { a, div, h, h2 } from 'react-hyperscript-helpers';
+import React from 'react';
 import Modal from 'react-modal';
 import { Alert } from './Alert';
 import CloseIconComponent from './CloseIconComponent';
@@ -33,48 +32,46 @@ export const ConfirmationDialog = (props) => {
   const { disableOkBtn = false, disableNoBtn = false, alertMessage, alertTitle } = props;
 
   return (
-    h(Modal, {
-      isOpen: props.showModal,
-      onAfterOpen: props.afterOpenModal,
-      onRequestClose: props.onRequestClose,
-      style: mergeAll([customStyles, props.style]),
-      contentLabel: 'Modal'
-    }, [
-      div({ className: 'dialog-header' }, [
-        h(CloseIconComponent, {closeFn: props.action.handler(false)}),
-        h2({ id: 'lbl_dialogTitle', className: 'dialog-title ' }, [props.title]),
-      ]),
+    <Modal
+      isOpen={props.showModal}
+      onAfterOpen={props.afterOpenModal}
+      onRequestClose={props.onRequestClose}
+      style={{ ...customStyles, ...props.style }}
+      contentLabel="Modal"
+    >
+      <div className="dialog-header">
+        <CloseIconComponent closeFn={props.action.handler(false)} />
+        <h2 id="lbl_dialogTitle" className="dialog-title">{props.title}</h2>
+      </div>
 
-      div({ id: 'lbl_dialogContent', className: 'dialog-content' }, [
-        props.children,
-        div({ isRendered: alertTitle !== undefined, className: 'dialog-alert' }, [
-          Alert({ id: 'dialog', type: 'danger', title: alertTitle, description: alertMessage })
-        ])
-      ]),
+      <div id="lbl_dialogContent" className="dialog-content">
+        {props.children}
+        {alertTitle !== undefined && (
+          <div className="dialog-alert">
+            <Alert id="dialog" type="danger" title={alertTitle} description={alertMessage} />
+          </div>
+        )}
+      </div>
 
-
-      div({ className: 'flex flex-row', style: {
-        justifyContent: 'flex-end',
-        marginTop: '20px',
-      }, }, [
-        a({
-          id: 'btn_save',
-          className: 'button button-white',
-          style: {
-            marginRight: '2rem',
-          },
-          onClick: props.action.handler(false),
-          disabled: disableNoBtn
-        }, ['No']),
-        a({
-          id: 'btn_submit',
-          className: 'button button-blue',
-          onClick: props.action.handler(true),
-          disabled: disableOkBtn
-        }, [
-          props.action.label
-        ]),
-      ])
-    ])
+      <div className="flex flex-row" style={{ justifyContent: 'flex-end', marginTop: '20px' }}>
+        <a
+          id="btn_save"
+          className="button button-white"
+          style={{ marginRight: '2rem' }}
+          onClick={props.action.handler(false)}
+          disabled={disableNoBtn}
+        >
+          No
+        </a>
+        <a
+          id="btn_submit"
+          className="button button-blue"
+          onClick={props.action.handler(true)}
+          disabled={disableOkBtn}
+        >
+          {props.action.label}
+        </a>
+      </div>
+    </Modal>
   );
 };

src/components/LibraryCardAgreementTermsDownload.js

@@ -1,15 +1,18 @@
+import React from 'react';
 import LibraryCardAgreementLink from '../assets/Library_Card_Agreement_2023_ApplicationVersion.pdf';
 import DownloadIcon from 'react-material-icon-svg/dist/Download';
-import {a, div} from 'react-hyperscript-helpers';
-import React from 'react';
 
-const downloadIcon = <DownloadIcon fill={'black'} style={{verticalAlign: 'middle', height: '24px'}}/>;
-export const LibraryCardAgreementTermsDownload =
-  div({}, [
-    'I agree to the terms of the Library Card Agreement',
-    a({
-      id: 'link_downloadAgreement',
-      href: LibraryCardAgreementLink,
-      target: '_blank',
-      style: {marginLeft: '.5rem'}
-    }, [downloadIcon])]);
+export const LibraryCardAgreementTermsDownload = () => (
+  <div>
+    I agree to the terms of the Library Card Agreement
+    <a
+      id="link_downloadAgreement"
+      href={LibraryCardAgreementLink}
+      target="_blank"
+      rel="noreferrer"
+      style={{marginLeft: '.5rem'}}
+    >
+      <DownloadIcon fill={'black'} style={{verticalAlign: 'middle', height: '24px'}}/>
+    </a>
+  </div>
+);

src/components/ScrollableMarkdownContainer.js

@@ -1,8 +1,7 @@
 import ReactMarkdown from 'react-markdown';
-import {div} from 'react-hyperscript-helpers';
 import DOMPurify from 'dompurify';
-import React, {useEffect, useState} from 'react';
-import {isEmpty} from 'lodash/fp';
+import React, { useEffect, useState } from 'react';
+import { isEmpty } from 'lodash/fp';
 
 
 export default function ScrollableMarkdownContainer(props) {
@@ -21,21 +20,26 @@ export default function ScrollableMarkdownContainer(props) {
   }, [markdown]);
 
   const generateContent = (text) => {
-    return <ReactMarkdown components={{a: (props) => <a target={'_blank'} {...props}/>}}>
-      {DOMPurify.sanitize(text, null)}
-    </ReactMarkdown>;
+    return (
+      <ReactMarkdown components={{ a: (props) => <a target={'_blank'} {...props} /> }}>
+        {DOMPurify.sanitize(text, null)}
+      </ReactMarkdown>
+    );
   };
 
   const content = generateContent(text);
 
-  return div({
-    isRendered: !isEmpty(content),
-    style: {
-      maxWidth: '700px',
-      minWidth: '700px',
-      maxHeight: '200px',
-      overflow: 'auto',
-      marginBottom: '25px'
-    }
-  }, [content]);
-}
+  return (
+    <div
+      style={{
+        maxWidth: '700px',
+        minWidth: '700px',
+        maxHeight: '200px',
+        overflow: 'auto',
+        marginBottom: '25px'
+      }}
+    >
+      {!isEmpty(content) && content}
+    </div>
+  );
+}