fix: fixes warnings/errors appearing in console

src/__tests__/HospitalRun.test.tsx

@@ -411,7 +411,7 @@ describe('HospitalRun', () => {
     })
 
     describe('/labs', () => {
-      it('should render the Labs component when /labs is accessed', () => {
+      it('should render the Labs component when /labs is accessed', async () => {
         jest.spyOn(LabRepository, 'findAll').mockResolvedValue([])
         const store = mockStore({
           title: 'test',
@@ -420,18 +420,22 @@ describe('HospitalRun', () => {
           components: { sidebarCollapsed: false },
         })
 
-        const wrapper = mount(
-          <Provider store={store}>
-            <MemoryRouter initialEntries={['/labs']}>
-              <HospitalRun />
-            </MemoryRouter>
-          </Provider>,
-        )
+        let wrapper: any
+        await act(async () => {
+          wrapper = await mount(
+            <Provider store={store}>
+              <MemoryRouter initialEntries={['/labs']}>
+                <HospitalRun />
+              </MemoryRouter>
+            </Provider>,
+          )
+        })
+        wrapper.update()
 
         expect(wrapper.find(ViewLabs)).toHaveLength(1)
       })
 
-      it('should render the dasboard if the user does not have permissions to view labs', () => {
+      it('should render the dashboard if the user does not have permissions to view labs', () => {
         jest.spyOn(LabRepository, 'findAll').mockResolvedValue([])
         const store = mockStore({
           title: 'test',

src/__tests__/page-header/ButtonBarProvider.test.tsx

@@ -1,5 +1,5 @@
 import '../../__mocks__/matchMediaMock'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { renderHook } from '@testing-library/react-hooks'
 import {
   ButtonBarProvider,
@@ -16,7 +16,10 @@ describe('Button Bar Provider', () => {
     const { result } = renderHook(
       () => {
         const update = useButtonToolbarSetter()
-        update(expectedButtons)
+        useEffect(() => {
+          update(expectedButtons)
+        }, [update])
+
         return useButtons()
       },
       { wrapper },

src/labs/ViewLab.tsx

@@ -98,22 +98,22 @@ const ViewLab = () => {
     }
 
     buttons.push(
-      <Button className="mr-2" color="success" onClick={onUpdate}>
+      <Button className="mr-2" color="success" onClick={onUpdate} key="actions.update">
         {t('actions.update')}
       </Button>,
     )
 
     if (permissions.includes(Permissions.CompleteLab)) {
       buttons.push(
-        <Button className="mr-2" onClick={onComplete} color="primary">
+        <Button className="mr-2" onClick={onComplete} color="primary" key="labs.requests.complete">
           {t('labs.requests.complete')}
         </Button>,
       )
     }
 
     if (permissions.includes(Permissions.CancelLab)) {
       buttons.push(
-        <Button onClick={onCancel} color="danger">
+        <Button onClick={onCancel} color="danger" key="labs.requests.cancel">
           {t('labs.requests.cancel')}
         </Button>,
       )
@@ -199,7 +199,7 @@ const ViewLab = () => {
             value={labToView.result}
             isEditable={isEditable}
             isInvalid={!!error.result}
-            feedback={t(error.result || '')}
+            feedback={t(error.result as string)}
             onChange={onResultChange}
           />
           <TextFieldWithLabelFormGroup

src/labs/ViewLabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import useTitle from 'page-header/useTitle'
 import { useTranslation } from 'react-i18next'
 import format from 'date-fns/format'
@@ -21,21 +21,25 @@ const ViewLabs = () => {
   const { permissions } = useSelector((state: RootState) => state.user)
   const [labs, setLabs] = useState<Lab[]>([])
 
-  const getButtons = () => {
+  const getButtons = useCallback(() => {
     const buttons: React.ReactNode[] = []
 
     if (permissions.includes(Permissions.RequestLab)) {
       buttons.push(
-        <Button icon="add" onClick={() => history.push('/labs/new')} outlined color="success">
+        <Button
+          icon="add"
+          onClick={() => history.push('/labs/new')}
+          outlined
+          color="success"
+          key="lab.requests.new"
+        >
           {t('labs.requests.new')}
         </Button>,
       )
     }
 
     return buttons
-  }
-
-  setButtons(getButtons())
+  }, [permissions, history, t])
 
   useEffect(() => {
     const fetch = async () => {
@@ -51,8 +55,13 @@ const ViewLabs = () => {
       setLabs(fetchedLabs)
     }
 
+    setButtons(getButtons())
     fetch()
-  }, [])
+
+    return () => {
+      setButtons([])
+    }
+  }, [getButtons, setButtons])
 
   const onTableRowClick = (lab: Lab) => {
     history.push(`/labs/${lab.id}`)

src/labs/requests/NewLabRequest.tsx

@@ -95,7 +95,7 @@ const NewLabRequest = () => {
           isRequired
           isEditable
           isInvalid={!!error.type}
-          feedback={t(error.type || '')}
+          feedback={t(error.type as string)}
           value={newLabRequest.type}
           onChange={onLabTypeChange}
         />

src/patients/list/Patients.tsx

@@ -22,17 +22,6 @@ const Patients = () => {
   const { patients, isLoading } = useSelector((state: RootState) => state.patients)
 
   const setButtonToolBar = useButtonToolbarSetter()
-  setButtonToolBar([
-    <Button
-      key="newPatientButton"
-      outlined
-      color="success"
-      icon="patient-add"
-      onClick={() => history.push('/patients/new')}
-    >
-      {t('patients.newPatient')}
-    </Button>,
-  ])
 
   const [searchText, setSearchText] = useState<string>('')
 
@@ -45,28 +34,25 @@ const Patients = () => {
   useEffect(() => {
     dispatch(fetchPatients())
 
+    setButtonToolBar([
+      <Button
+        key="newPatientButton"
+        outlined
+        color="success"
+        icon="patient-add"
+        onClick={() => history.push('/patients/new')}
+      >
+        {t('patients.newPatient')}
+      </Button>,
+    ])
+
     return () => {
       setButtonToolBar([])
     }
-  }, [dispatch, setButtonToolBar])
+  }, [dispatch, setButtonToolBar, t, history])
 
   const loadingIndicator = <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
-
-  const listBody = (
-    <tbody>
-      {patients.map((p) => (
-        <tr key={p.id} onClick={() => history.push(`/patients/${p.id}`)}>
-          <td>{p.code}</td>
-          <td>{p.givenName}</td>
-          <td>{p.familyName}</td>
-          <td>{p.sex}</td>
-          <td>{p.dateOfBirth ? format(new Date(p.dateOfBirth), 'yyyy-MM-dd') : ''}</td>
-        </tr>
-      ))}
-    </tbody>
-  )
-
-  const list = (
+  const table = (
     <table className="table table-hover">
       <thead className="thead-light ">
         <tr>
@@ -77,7 +63,17 @@ const Patients = () => {
           <th>{t('patient.dateOfBirth')}</th>
         </tr>
       </thead>
-      {isLoading ? loadingIndicator : listBody}
+      <tbody>
+        {patients.map((p) => (
+          <tr key={p.id} onClick={() => history.push(`/patients/${p.id}`)}>
+            <td>{p.code}</td>
+            <td>{p.givenName}</td>
+            <td>{p.familyName}</td>
+            <td>{p.sex}</td>
+            <td>{p.dateOfBirth ? format(new Date(p.dateOfBirth), 'yyyy-MM-dd') : ''}</td>
+          </tr>
+        ))}
+      </tbody>
     </table>
   )
 
@@ -99,7 +95,7 @@ const Patients = () => {
         </Column>
       </Row>
 
-      <Row>{list}</Row>
+      <Row> {isLoading ? loadingIndicator : table}</Row>
     </Container>
   )
 }

src/patients/view/ViewPatient.tsx

@@ -40,25 +40,6 @@ const ViewPatient = () => {
 
   const setButtonToolBar = useButtonToolbarSetter()
 
-  const buttons = []
-  if (permissions.includes(Permissions.WritePatients)) {
-    buttons.push(
-      <Button
-        key="editPatientButton"
-        color="success"
-        icon="edit"
-        outlined
-        onClick={() => {
-          history.push(`/patients/edit/${patient.id}`)
-        }}
-      >
-        {t('actions.edit')}
-      </Button>,
-    )
-  }
-
-  setButtonToolBar(buttons)
-
   const breadcrumbs = [
     { i18nKey: 'patients.label', location: '/patients' },
     { text: getPatientFullName(patient), location: `/patients/${patient.id}` },
@@ -71,10 +52,29 @@ const ViewPatient = () => {
       dispatch(fetchPatient(id))
     }
 
+    const buttons = []
+    if (permissions.includes(Permissions.WritePatients)) {
+      buttons.push(
+        <Button
+          key="editPatientButton"
+          color="success"
+          icon="edit"
+          outlined
+          onClick={() => {
+            history.push(`/patients/edit/${patient.id}`)
+          }}
+        >
+          {t('actions.edit')}
+        </Button>,
+      )
+    }
+
+    setButtonToolBar(buttons)
+
     return () => {
       setButtonToolBar([])
     }
-  }, [dispatch, id, setButtonToolBar])
+  }, [dispatch, id, setButtonToolBar, history, patient.id, permissions, t])
 
   if (isLoading || !patient) {
     return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />

src/scheduling/appointments/Appointments.tsx

@@ -28,26 +28,26 @@ const Appointments = () => {
   const { appointments } = useSelector((state: RootState) => state.appointments)
   const [events, setEvents] = useState<Event[]>([])
   const setButtonToolBar = useButtonToolbarSetter()
-  setButtonToolBar([
-    <Button
-      key="newAppointmentButton"
-      outlined
-      color="success"
-      icon="appointment-add"
-      onClick={() => history.push('/appointments/new')}
-    >
-      {t('scheduling.appointments.new')}
-    </Button>,
-  ])
   useAddBreadcrumbs(breadcrumbs, true)
 
   useEffect(() => {
     dispatch(fetchAppointments())
+    setButtonToolBar([
+      <Button
+        key="newAppointmentButton"
+        outlined
+        color="success"
+        icon="appointment-add"
+        onClick={() => history.push('/appointments/new')}
+      >
+        {t('scheduling.appointments.new')}
+      </Button>,
+    ])
 
     return () => {
       setButtonToolBar([])
     }
-  }, [dispatch, setButtonToolBar])
+  }, [dispatch, setButtonToolBar, history, t])
 
   useEffect(() => {
     const getAppointments = async () => {