refactor(labs): labs should use Table component

src/__tests__/labs/ViewLabs.test.tsx

@@ -1,6 +1,5 @@
-import { TextInput, Select } from '@hospitalrun/components'
+import { TextInput, Select, Table } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
-import format from 'date-fns/format'
 import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
@@ -102,7 +101,7 @@ describe('View Labs', () => {
       code: 'L-1234',
       id: '1234',
       type: 'lab type',
-      patientId: 'patientId',
+      patient: 'patientId',
       status: 'requested',
       requestedOn: '2020-03-30T04:43:20.102Z',
     } as Lab
@@ -130,45 +129,30 @@ describe('View Labs', () => {
     })
 
     it('should render a table with data', () => {
-      const table = wrapper.find('table')
-      const tableHeader = table.find('thead')
-      const tableBody = table.find('tbody')
-
-      const tableColumnHeaders = tableHeader.find('th')
-      const tableDataColumns = tableBody.find('td')
-
-      expect(table).toBeDefined()
-      expect(tableHeader).toBeDefined()
-      expect(tableBody).toBeDefined()
-      expect(tableColumnHeaders.at(0).text().trim()).toEqual('labs.lab.code')
-
-      expect(tableColumnHeaders.at(1).text().trim()).toEqual('labs.lab.type')
-
-      expect(tableColumnHeaders.at(2).text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(tableColumnHeaders.at(3).text().trim()).toEqual('labs.lab.status')
-
-      expect(tableDataColumns.at(0).text().trim()).toEqual(expectedLab.code)
-
-      expect(tableDataColumns.at(1).text().trim()).toEqual(expectedLab.type)
-
-      expect(tableDataColumns.at(2).text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
+      const table = wrapper.find(Table)
+      const columns = table.prop('columns')
+      const actions = table.prop('actions') as any
+      expect(columns[0]).toEqual(expect.objectContaining({ label: 'labs.lab.code', key: 'code' }))
+      expect(columns[1]).toEqual(expect.objectContaining({ label: 'labs.lab.type', key: 'type' }))
+      expect(columns[2]).toEqual(
+        expect.objectContaining({ label: 'labs.lab.requestedOn', key: 'requestedOn' }),
+      )
+      expect(columns[3]).toEqual(
+        expect.objectContaining({ label: 'labs.lab.status', key: 'status' }),
       )
 
-      expect(tableDataColumns.at(3).text().trim()).toEqual(expectedLab.status)
+      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
+      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+      expect(table.prop('data')).toEqual([expectedLab])
     })
 
-    it('should navigate to the lab when the row is clicked', () => {
-      const table = wrapper.find('table')
-      const tableBody = table.find('tbody')
-      const tableRow = tableBody.find('tr').at(0)
+    it('should navigate to the lab when the view button is clicked', () => {
+      const tr = wrapper.find('tr').at(1)
 
       act(() => {
-        const onClick = tableRow.prop('onClick') as any
-        onClick()
+        const onClick = tr.find('button').prop('onClick') as any
+        onClick({ stopPropagation: jest.fn() })
       })
-
       expect(history.location.pathname).toEqual(`/labs/${expectedLab.id}`)
     })
   })
@@ -181,7 +165,7 @@ describe('View Labs', () => {
       const expectedLab = {
         id: '1234',
         type: 'lab type',
-        patientId: 'patientId',
+        patient: 'patientId',
         status: 'requested',
         requestedOn: '2020-03-30T04:43:20.102Z',
       } as Lab
@@ -234,7 +218,7 @@ describe('View Labs', () => {
       const expectedLab = {
         id: '1234',
         type: 'lab type',
-        patientId: 'patientId',
+        patient: 'patientId',
         status: 'requested',
         requestedOn: '2020-03-30T04:43:20.102Z',
       } as Lab

src/labs/ViewLabs.tsx

@@ -1,4 +1,4 @@
-import { Spinner, Button } from '@hospitalrun/components'
+import { Spinner, Button, Table } from '@hospitalrun/components'
 import format from 'date-fns/format'
 import React, { useState, useEffect, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -27,7 +27,7 @@ const ViewLabs = () => {
 
   const { permissions } = useSelector((state: RootState) => state.user)
   const dispatch = useDispatch()
-  const { labs, isLoading } = useSelector((state: RootState) => state.labs)
+  const { labs } = useSelector((state: RootState) => state.labs)
   const [searchFilter, setSearchFilter] = useState<LabFilter>('all')
   const [searchText, setSearchText] = useState<string>('')
   const debouncedSearchText = useDebounce(searchText, 500)
@@ -63,9 +63,7 @@ const ViewLabs = () => {
     }
   }, [dispatch, getButtons, setButtons])
 
-  const loadingIndicator = <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
-
-  const onTableRowClick = (lab: Lab) => {
+  const onViewClick = (lab: Lab) => {
     history.push(`/labs/${lab.id}`)
   }
 
@@ -80,19 +78,6 @@ const ViewLabs = () => {
     { label: t('labs.filter.all'), value: 'all' },
   ]
 
-  const listBody = (
-    <tbody>
-      {labs.map((lab) => (
-        <tr onClick={() => onTableRowClick(lab)} key={lab.id}>
-          <td>{lab.code}</td>
-          <td>{lab.type}</td>
-          <td>{lab.requestedOn ? format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a') : ''}</td>
-          <td>{lab.status}</td>
-        </tr>
-      ))}
-    </tbody>
-  )
-
   return (
     <>
       <div className="row">
@@ -118,17 +103,24 @@ const ViewLabs = () => {
         </div>
       </div>
       <div className="row">
-        <table className="table table-hover">
-          <thead className="thead-light">
-            <tr>
-              <th>{t('labs.lab.code')}</th>
-              <th>{t('labs.lab.type')}</th>
-              <th>{t('labs.lab.requestedOn')}</th>
-              <th>{t('labs.lab.status')}</th>
-            </tr>
-          </thead>
-          {isLoading ? loadingIndicator : listBody}
-        </table>
+        <Table
+          tableClassName="table table-hover"
+          getID={(row) => row.id}
+          columns={[
+            { label: t('labs.lab.code'), key: 'code' },
+            { label: t('labs.lab.type'), key: 'type' },
+            {
+              label: t('labs.lab.requestedOn'),
+              key: 'requestedOn',
+              formatter: (row) =>
+                row.requestedOn ? format(new Date(row.requestedOn), 'yyyy-MM-dd hh:mm a') : '',
+            },
+            { label: t('labs.lab.status'), key: 'status' },
+          ]}
+          data={labs}
+          actionsHeaderText={t('actions.label')}
+          actions={[{ label: t('actions.view'), action: (row) => onViewClick(row as Lab) }]}
+        />
       </div>
     </>
   )