feat: add Sort request in ViewPatients

feat HospitalRun#1969

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

@@ -11,7 +11,6 @@ import { act } from 'react-dom/test-utils'
 import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import format from 'date-fns/format'
 import Page from 'clients/Page'
-import { Unsorted } from 'clients/db/SortRequest'
 import ViewPatients from '../../../patients/list/ViewPatients'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as patientSlice from '../../../patients/patients-slice'
@@ -147,8 +146,10 @@ describe('Patients', () => {
       expect(searchPatientsSpy).toHaveBeenCalledTimes(1)
       expect(searchPatientsSpy).toHaveBeenLastCalledWith(
         expectedSearchText,
-        Unsorted,
-        UnpagedRequest,
+        {
+          sorts: [{ field: 'code', direction: 'desc' }],
+        },
+        { limit: 1, skip: 0 },
       )
     })
   })

src/patients/list/ViewPatients.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Spinner, Button, Container, Row, TextInput, Column } from '@hospitalrun/components'
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import format from 'date-fns/format'
-import { Unsorted } from 'clients/db/SortRequest'
+import SortRequest from 'clients/db/SortRequest'
 import PageRequest from 'clients/db/PageRequest'
 import PageComponent from 'components/PageComponent'
 import { RootState } from '../../store'
@@ -22,10 +22,13 @@ const ViewPatients = () => {
   useTitle(t('patients.label'))
   useAddBreadcrumbs(breadcrumbs, true)
   const dispatch = useDispatch()
-  const { patients, isLoading, pageRequest } = useSelector((state: RootState) => state.patients)
+  const { patients, isLoading } = useSelector((state: RootState) => state.patients)
 
   const setButtonToolBar = useButtonToolbarSetter()
-  const [userPageRequest, setUserPageRequest] = useState<PageRequest>(pageRequest)
+  const [userPageRequest, setUserPageRequest] = useState<PageRequest>({
+    skip: 0,
+    limit: 1,
+  })
 
   const setNextPageRequest = () => {
     setUserPageRequest((p) => {
@@ -56,11 +59,17 @@ const ViewPatients = () => {
   const debouncedSearchText = useDebounce(searchText, 500)
 
   useEffect(() => {
-    dispatch(searchPatients(debouncedSearchText, Unsorted, userPageRequest))
+    const sortRequest: SortRequest = {
+      sorts: [{ field: 'code', direction: 'desc' }],
+    }
+    dispatch(searchPatients(debouncedSearchText, sortRequest, userPageRequest))
   }, [dispatch, debouncedSearchText, userPageRequest])
 
   useEffect(() => {
-    dispatch(fetchPatients(Unsorted, userPageRequest))
+    const sortRequest: SortRequest = {
+      sorts: [{ field: 'code', direction: 'desc' }],
+    }
+    dispatch(fetchPatients(sortRequest, userPageRequest))
 
     setButtonToolBar([
       <Button
@@ -77,7 +86,7 @@ const ViewPatients = () => {
     return () => {
       setButtonToolBar([])
     }
-  }, [dispatch, setButtonToolBar, t, history, userPageRequest])
+  }, [dispatch, setButtonToolBar, t, history])
 
   const loadingIndicator = <Spinner color="blue" loading size={[10, 25]} type="ScaleLoader" />
   const table = (

src/patients/patients-slice.ts

@@ -9,7 +9,6 @@ import { AppThunk } from '../store'
 interface PatientsState {
   isLoading: boolean
   patients: Page<Patient>
-  pageRequest: PageRequest
 }
 
 const initialState: PatientsState = {
@@ -20,13 +19,9 @@ const initialState: PatientsState = {
     hasPrevious: false,
     pageRequest: {
       skip: 0,
-      limit: 20,
+      limit: 1,
     },
   },
-  pageRequest: {
-    skip: 0,
-    limit: 20,
-  },
 }
 
 function startLoading(state: PatientsState) {