From a571fb1a503b3406f2300fc0015584741141ec1f Mon Sep 17 00:00:00 2001
From: Florian Boulnois <fboulnoi@broadinstitute.org>
Date: Tue, 23 Jan 2024 10:46:56 -0500
Subject: [PATCH] refactor: switch DataUsePill to JSX

---
 .../collection_voting_slab/DataUsePill.js     | 45 +++++++++++--------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/collection_voting_slab/DataUsePill.js b/src/components/collection_voting_slab/DataUsePill.js
index 8448f465c4..3bb6e57bda 100644
--- a/src/components/collection_voting_slab/DataUsePill.js
+++ b/src/components/collection_voting_slab/DataUsePill.js
@@ -1,4 +1,4 @@
-import {div, h3, span} from 'react-hyperscript-helpers';
+import React from 'react';
 import {isNil} from 'lodash';
 import { ControlledAccessType } from '../../libs/dataUseTranslation';
 
@@ -31,25 +31,34 @@ const styles = {
   }
 };
 
+export const DataUsePill = (props) => {
+  const { dataUse, key } = props;
 
-export function DataUsePill(props) {
-  const {dataUse, key} = props;
-
-  return div({key: `data_use_pill_${dataUse.type}_${dataUse.code}_${key}`, style: styles.baseStyle}, [
-    span({ style: styles.code }, !isNil(dataUse) ? [dataUse.code] : []),
-    span({ style: styles.description }, !isNil(dataUse) ? [dataUse.description] : [])
-  ]);
-}
+  return (
+    <div key={`data_use_pill_${dataUse.type}_${dataUse.code}_${key}`} style={styles.baseStyle}>
+      <span style={styles.code}>{!isNil(dataUse) ? [dataUse.code] : []}</span>
+      <span style={styles.description}>{!isNil(dataUse) ? [dataUse.description] : []}</span>
+    </div>
+  );
+};
 
-export function DataUsePills(dataUses){
+export const DataUsePills = (dataUses) => {
   const permissionsUses = dataUses.filter(dataUse => dataUse.type === ControlledAccessType.permissions);
   const modifierUses = dataUses.filter(dataUse => dataUse.type === ControlledAccessType.modifiers);
-  return(
-    div([permissionsUses.map((dataUse, idx)=>{return DataUsePill({dataUse, key: `${dataUse.code}-${idx}`});}),
-      div({isRendered: modifierUses.length > 0},[
-        h3({style: styles.subheading}, ControlledAccessType.modifiers),
-        modifierUses.map((dataUse,idx)=>{return DataUsePill({dataUse, key: `${dataUse.code}-${idx}`});})
-      ])
-    ])
+
+  return (
+    <div>
+      {permissionsUses.map((dataUse, idx) => (
+        <DataUsePill dataUse={dataUse} key={`${dataUse.code}-${idx}`} />
+      ))}
+      {modifierUses.length > 0 && (
+        <div>
+          <h3 style={styles.subheading}>{ControlledAccessType.modifiers}</h3>
+          {modifierUses.map((dataUse, idx) => (
+            <DataUsePill dataUse={dataUse} key={`${dataUse.code}-${idx}`} />
+          ))}
+        </div>
+      )}
+    </div>
   );
-}
\ No newline at end of file
+};