Misc code refinements

Author: samuelmale

packages/esm-patient-list-app/src/PatientTable/patient-table.component.tsx

@@ -19,10 +19,11 @@ import styles from './patient-table.component.scss';
 const PatientTable: React.FC<PatientTableProps> = ({ patients, columns, search, pagination, isLoading, autoFocus }) => {
   const rows: Array<any> = useMemo(
     () =>
-      patients.map((patient) => {
-        const row = {};
+      patients.map((patient, index) => {
+        const row = {
+          id: index,
+        };
         columns.forEach((column) => {
-          row['id'] = patient['id'] || patient['uuid'];
           const value = column.getValue ? column.getValue(patient) : patient[column.key];
           row[column.key] = column.link ? (
             <Link
@@ -42,67 +43,66 @@ const PatientTable: React.FC<PatientTableProps> = ({ patients, columns, search,
   );
   const handleSearch = React.useMemo(() => debounce((searchTerm) => search.onSearch(searchTerm), 300), []);
 
+  if (isLoading) {
+    return (
+      <DataTableSkeleton
+        style={{ backgroundColor: 'transparent', padding: '0rem', margin: '1rem' }}
+        rowCount={5}
+        columnCount={5}
+        zebra
+      />
+    );
+  }
   return (
     <>
-      {!isLoading ? (
-        <>
-          <div id="table-tool-bar" style={{ display: 'flex', flexDirection: 'row-reverse' }}>
-            <Search
-              id="patient-list-search"
-              labelText=""
-              placeholder={search.placeHolder}
-              onChange={(evnt) => handleSearch(evnt.target.value)}
-              className={styles.searchOverrides}
-              value={search.currentSearchTerm}
-              autoFocus={autoFocus}
-            />
-          </div>
-          <DataTable rows={rows} headers={columns} isSortable={true} size="normal" useZebraStyles={true}>
-            {({ rows, headers, getHeaderProps, getTableProps }) => (
-              <TableContainer>
-                <Table {...getTableProps()}>
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader
-                          {...getHeaderProps({
-                            header,
-                            isSortable: header.isSortable,
-                          })}>
-                          {header.header?.content ?? header.header}
-                        </TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow key={row.id}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
-                        ))}
-                      </TableRow>
+      <div id="table-tool-bar" style={{ display: 'flex', flexDirection: 'row-reverse' }}>
+        <Search
+          id="patient-list-search"
+          labelText=""
+          placeholder={search.placeHolder}
+          onChange={(evnt) => handleSearch(evnt.target.value)}
+          className={styles.searchOverrides}
+          value={search.currentSearchTerm}
+          autoFocus={autoFocus}
+        />
+      </div>
+      <DataTable rows={rows} headers={columns} isSortable={true} size="normal" useZebraStyles={true}>
+        {({ rows, headers, getHeaderProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                     ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </DataTable>
-          {pagination.usePagination && (
-            <Pagination
-              page={pagination.currentPage}
-              pageSize={pagination.pageSize}
-              pageSizes={[10, 20, 30, 40, 50]}
-              totalItems={pagination.totalItems}
-              onChange={pagination.onChange}
-            />
-          )}
-        </>
-      ) : (
-        <DataTableSkeleton
-          style={{ backgroundColor: 'transparent', padding: '0rem', margin: '1rem' }}
-          rowCount={5}
-          columnCount={5}
-          zebra
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {pagination.usePagination && (
+        <Pagination
+          page={pagination.currentPage}
+          pageSize={pagination.pageSize}
+          pageSizes={[10, 20, 30, 40, 50]}
+          totalItems={pagination.totalItems}
+          onChange={pagination.onChange}
         />
       )}
     </>