feat(patients): added live search to the patients search

src/__tests__/patients/list/Patients.test.tsx

@@ -1,7 +1,7 @@
 import '../../../__mocks__/matchMediaMock'
 import React from 'react'
 import { mount } from 'enzyme'
-import { TextInput, Button, Spinner, ListItem } from '@hospitalrun/components'
+import { TextInput, Spinner, ListItem } from '@hospitalrun/components'
 import { MemoryRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
@@ -47,15 +47,6 @@ describe('Patients', () => {
       jest.restoreAllMocks()
     })
 
-    it('should render a search input with button', () => {
-      const wrapper = setup()
-      const searchInput = wrapper.find(TextInput)
-      const searchButton = wrapper.find(Button)
-      expect(searchInput).toHaveLength(1)
-      expect(searchInput.prop('placeholder')).toEqual('actions.search')
-      expect(searchButton.text().trim()).toEqual('actions.search')
-    })
-
     it('should render a loading bar if it is loading', () => {
       const wrapper = setup(true)
 
@@ -83,10 +74,15 @@ describe('Patients', () => {
   })
 
   describe('search functionality', () => {
-    it('should call the searchPatients() action with the correct data', () => {
+    beforeEach(() => jest.useFakeTimers())
+
+    afterEach(() => jest.useRealTimers())
+
+    it('should search for patients after the search text has not changed for 500 milliseconds', () => {
       const searchPatientsSpy = jest.spyOn(patientSlice, 'searchPatients')
-      const expectedSearchText = 'search text'
       const wrapper = setup()
+      searchPatientsSpy.mockClear()
+      const expectedSearchText = 'search text'
 
       act(() => {
         ;(wrapper.find(TextInput).prop('onChange') as any)({
@@ -99,14 +95,8 @@ describe('Patients', () => {
         } as React.ChangeEvent<HTMLInputElement>)
       })
 
-      wrapper.update()
-
       act(() => {
-        ;(wrapper.find(Button).prop('onClick') as any)({
-          preventDefault(): void {
-            // noop
-          },
-        } as React.MouseEvent<HTMLButtonElement>)
+        jest.advanceTimersByTime(500)
       })
 
       wrapper.update()

src/patients/list/Patients.tsx

@@ -20,6 +20,18 @@ import useAddBreadcrumbs from '../../breadcrumbs/useAddBreadcrumbs'
 
 const breadcrumbs = [{ i18nKey: 'patients.label', location: '/patients' }]
 
+function useDebounce(value: any, delayInMilliseconds: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const debounceHandler = setTimeout(() => setDebouncedValue(value), delayInMilliseconds)
+
+    return () => clearTimeout(debounceHandler)
+  }, [value, delayInMilliseconds])
+
+  return debouncedValue
+}
+
 const Patients = () => {
   const { t } = useTranslation()
   const history = useHistory()
@@ -43,6 +55,12 @@ const Patients = () => {
 
   const [searchText, setSearchText] = useState<string>('')
 
+  const debouncedSearchText = useDebounce(searchText, 500)
+
+  useEffect(() => {
+    dispatch(searchPatients(debouncedSearchText))
+  }, [dispatch, debouncedSearchText])
+
   useEffect(() => {
     dispatch(fetchPatients())
 
@@ -51,9 +69,7 @@ const Patients = () => {
     }
   }, [dispatch, setButtonToolBar])
 
-  if (isLoading) {
-    return <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
-  }
+  const loadingIndicator = <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
 
   const list = (
     <ul>
@@ -69,35 +85,23 @@ const Patients = () => {
     setSearchText(event.target.value)
   }
 
-  const onSearchFormSubmit = (event: React.FormEvent | React.MouseEvent) => {
-    event.preventDefault()
-    dispatch(searchPatients(searchText))
-  }
-
   return (
     <Container>
-      <form className="form" onSubmit={onSearchFormSubmit}>
-        <Row>
-          <Column md={10}>
-            <TextInput
-              size="lg"
-              type="text"
-              onChange={onSearchBoxChange}
-              value={searchText}
-              placeholder={t('actions.search')}
-            />
-          </Column>
-          <Column md={2}>
-            <Button size="large" onClick={onSearchFormSubmit}>
-              {t('actions.search')}
-            </Button>
-          </Column>
-        </Row>
-      </form>
+      <Row>
+        <Column md={12}>
+          <TextInput
+            size="lg"
+            type="text"
+            onChange={onSearchBoxChange}
+            value={searchText}
+            placeholder={t('actions.search')}
+          />
+        </Column>
+      </Row>
 
       <Row>
         <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
-          {list}
+          {isLoading ? loadingIndicator : list}
         </List>
       </Row>
     </Container>