From 8195b6c1f4139a3f1094dd60a9969e2611b4a632 Mon Sep 17 00:00:00 2001
From: Florian Boulnois <fboulnoi@broadinstitute.org>
Date: Mon, 13 Nov 2023 16:04:58 -0500
Subject: [PATCH] refactor: switch SimpleTable to JSX

---
 src/components/SimpleTable.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/SimpleTable.js b/src/components/SimpleTable.js
index 1416dc5b52..5b30df7969 100644
--- a/src/components/SimpleTable.js
+++ b/src/components/SimpleTable.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { isNil } from 'lodash/fp';
 import { div, h } from 'react-hyperscript-helpers';
 import { Styles } from '../libs/theme';
@@ -8,27 +9,23 @@ import loadingImage from '../images/loading-indicator.svg';
 
 // Renders spinning circle while table loading
 const TableLoading = () => {
-  return div({className: 'table-loading-placeholder'},
-    [
-      h(SpinnerComponent, {
-        show: true,
-        name: 'loadingSpinner',
-        loadingImage
-      }, [])
-    ]
+  return (
+    <div className='table-loading-placeholder'>
+      <SpinnerComponent show={true} name='loadingSpinner' loadingImage={loadingImage} />
+    </div>
   );
 };
 
-//Simple cell text display
+// Simple cell text display
 const SimpleTextCell = ({ text, style, keyProp }) => {
-  text = isNil(text) ? '- -' : text;
-  return div({ style, role: 'cell', key: keyProp }, [text]);
+  text = text ?? '- -';
+  return <div style={style} role='cell' key={keyProp}>{text}</div>;
 };
 
-//Simple cell text that carries onClick functionality
+// Simple cell text that carries onClick functionality
 const OnClickTextCell = ({ text, style, onClick, keyProp }) => {
-  text = isNil(text) ? '- -' : text;
-  return div({ style, onClick, role: 'cell', key: keyProp }, [text]);
+  text = text ?? '- -';
+  return <div style={style} onClick={onClick} role='cell' key={keyProp}>{text}</div>;
 };
 
 //Column component that renders the column row based on column headers