Merge branch 'patient-appointment-list' of https://github.com/igeagonz/hospitalrun-frontend into patient-appointment-list

Author: Ignacio Gea

src/__tests__/patients/related-persons/RelatedPersons.test.tsx

@@ -4,7 +4,7 @@ import { Router } from 'react-router'
 import { createMemoryHistory } from 'history'
 import { mount } from 'enzyme'
 import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab'
-import { Button, List, ListItem } from '@hospitalrun/components'
+import { Button, List, ListItem, Alert } from '@hospitalrun/components'
 import NewRelatedPersonModal from 'patients/related-persons/NewRelatedPersonModal'
 import { act } from '@testing-library/react'
 import PatientRepository from 'clients/db/PatientRepository'
@@ -200,4 +200,39 @@ describe('Related Persons Tab', () => {
       expect(history.location.pathname).toEqual('/patients/123001')
     })
   })
+
+  describe('EmptyList', () => {
+    const patient = {
+      id: '123',
+      rev: '123',
+    } as Patient
+
+    const user = {
+      permissions: [Permissions.WritePatients, Permissions.ReadPatients],
+    }
+
+    beforeEach(async () => {
+      jest.spyOn(PatientRepository, 'find')
+      mocked(PatientRepository.find).mockResolvedValue({
+        fullName: 'test test',
+        id: '123001',
+      } as Patient)
+
+      await act(async () => {
+        wrapper = await mount(
+          <Router history={history}>
+            <Provider store={mockStore({ patient, user })}>
+              <RelatedPersonTab patient={patient} />
+            </Provider>
+          </Router>,
+        )
+      })
+      wrapper.update()
+    })
+
+    it('should display a warning if patient has no related persons', () => {
+      const warning = wrapper.find(Alert)
+      expect(warning).toBeDefined()
+    })
+  })
 })

src/locales/en-US/translation.json

@@ -38,9 +38,13 @@
         "relatedPersonRequired": "Related Person is required.",
         "relationshipTypeRequired": "Relationship Type is required."
       },
+      "warning": {
+        "noRelatedPersons": "No Related Persons"
+      },
       "label": "Related Persons",
       "new": "New Related Person",
-      "relationshipType": "Relationship Type"
+      "relationshipType": "Relationship Type",
+      "addRelatedPersonAbove": "Add a related person using the button above."
     },
     "types": {
       "charity": "Charity",

src/patients/related-persons/RelatedPersonTab.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Button, Panel, List, ListItem } from '@hospitalrun/components'
+import { Button, Panel, List, ListItem, Alert, Spinner } from '@hospitalrun/components'
 import NewRelatedPersonModal from 'patients/related-persons/NewRelatedPersonModal'
 import RelatedPerson from 'model/RelatedPerson'
 import { useTranslation } from 'react-i18next'
@@ -38,9 +38,9 @@ const RelatedPersonTab = (props: Props) => {
             fetchedRelatedPersons.push(fetchedRelatedPerson)
           }),
         )
-
-        setRelatedPersons(fetchedRelatedPersons)
       }
+
+      setRelatedPersons(fetchedRelatedPersons)
     }
 
     fetchRelatedPersons()
@@ -97,15 +97,23 @@ const RelatedPersonTab = (props: Props) => {
         <div className="col-md-12">
           <Panel title={t('patient.relatedPersons.label')} color="primary" collapsible>
             {relatedPersons ? (
-              <List>
-                {relatedPersons.map((r) => (
-                  <ListItem action key={r.id} onClick={() => onRelatedPersonClick(r.id)}>
-                    {r.fullName}
-                  </ListItem>
-                ))}
-              </List>
+              relatedPersons.length > 0 ? (
+                <List>
+                  {relatedPersons.map((r) => (
+                    <ListItem action key={r.id} onClick={() => onRelatedPersonClick(r.id)}>
+                      {r.fullName}
+                    </ListItem>
+                  ))}
+                </List>
+              ) : (
+                <Alert
+                  color="warning"
+                  title={t('patient.relatedPersons.warning.noRelatedPersons')}
+                  message={t('patient.relatedPersons.addRelatedPersonAbove')}
+                />
+              )
             ) : (
-              <h1>Loading...</h1>
+              <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
             )}
           </Panel>
         </div>