Merge pull request #47 from swiftss-org/feat/patient-directory-api

feat(patients-directory): api implementation

Author: whosyourtaco

src/api/patientsAPI/patientsAPI.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { PaginationParams, RegisterPatientPayload } from '../../models/apiTypes';
+import { RegisterPatientPayload, PatientsPayload, PaginationParams } from '../../models/apiTypes';
 import { METHODS, request } from '../axiosInstances';
 
 export default {
   getHospitals: (params?: PaginationParams) => request(METHODS.GET, '/hospitals/', { params }),
+  getPatients: (params?: PatientsPayload) => request(METHODS.GET, '/patients/', { params }),
   registerPatient: (params: RegisterPatientPayload) =>
     request(METHODS.POST, '/patients/', { params }),
 };

src/hooks/api/patientHooks.ts

@@ -4,7 +4,13 @@ import { useMutation, useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 
 import patientsAPI from '../../api/patientsAPI';
-import { HospitalsResponse, PaginationParams, RegisterPatientPayload } from '../../models/apiTypes';
+import {
+  HospitalsResponse,
+  PaginationParams,
+  PatientsPayload,
+  PatientsResponse,
+  RegisterPatientPayload,
+} from '../../models/apiTypes';
 import { RegisterPatientFormType } from '../../pages/RegisterPatient/types';
 import urls from '../../routing/urls';
 
@@ -27,6 +33,31 @@ export const useGetHospitals = (params?: PaginationParams) => {
   );
 };
 
+export const useGetPatients = (params?: PatientsPayload) => {
+  return useQuery<PatientsResponse, AxiosError, PatientsResponse>(
+    [
+      ReactQueryKeys.PatientsQuery,
+      params?.hospital_id,
+      params?.limit,
+      params?.offset,
+      params?.search_term,
+    ],
+    async () => {
+      const { request } = patientsAPI.single.getPatients(params);
+      const data = await request();
+
+      return data;
+    },
+    {
+      onError: (errors) => {
+        console.log(errors);
+      },
+
+      retry: false,
+    }
+  );
+};
+
 export const useRegisterPatient = () => {
   const history = useHistory();
 

src/models/apiTypes.tsx

@@ -48,3 +48,26 @@ export interface RegisterPatientPayload {
   address: string;
   hospital_id: number;
 }
+
+export interface PatientsPayload extends PaginationParams {
+  hospital_id?: number;
+  search_term?: string;
+}
+
+export type PatientAPI = {
+  full_name: string;
+  national_id: string;
+  age: number;
+  day_of_birth: string;
+  month_of_birth: string;
+  year_of_birth: string;
+  gender: 'Male' | 'Female';
+  phone_1: string;
+  phone_2: string;
+  address: string;
+  hospitals: HospitalsAPI[];
+};
+
+export interface PatientsResponse extends PaginationResponse, PaginationParams {
+  results: PatientAPI[];
+}

src/pages/PatientDirectory/PatientDirectory.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
 import { TextField, Select } from '@orfium/ictinus';
+import { SelectOption } from '@orfium/ictinus/dist/components/Select/Select';
+import { useGetHospitals, useGetPatients } from 'hooks/api/patientHooks';
+import { getHospitalOptions } from 'pages/RegisterPatient/utils';
 
 import PatientCard from './components/PatientCard';
-import { Patients } from './constants';
 import {
   PatientDirectoryContainer,
   SearchWrapper,
@@ -12,31 +14,53 @@ import {
 } from './PatientDirectory.style';
 
 const PatientDirectory: React.FC = () => {
+  /** TODO: debounce search */
+  const [searchTerm, setSearchTerm] = React.useState<string>('');
+  const [hospitalId, setHospitalId] = React.useState<number>();
+
+  const { data: patients } = useGetPatients({
+    offset: 0,
+    limit: 100,
+    search_term: searchTerm,
+    hospital_id: hospitalId,
+  });
+
+  const { data: hospitals } = useGetHospitals({ offset: 0, limit: 100 });
+
   return (
     <PatientDirectoryContainer>
       <SearchWrapper>
         <TextField
           type={'outlined'}
           placeholder={'Search (Name , ID, Patient Hospital ID ...)'}
           leftIcon={'search'}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+            setSearchTerm(event.target.value)
+          }
+          value={searchTerm}
         />
         <Select
           label="Center"
           styleType="outlined"
           size="sm"
           required
-          options={[{ label: 'Hospital Number 1', value: 1 }]}
+          options={getHospitalOptions(hospitals?.results || [])}
+          handleSelectedOption={(option: SelectOption) =>
+            setHospitalId(parseInt(option.value.toString()))
+          }
         />
       </SearchWrapper>
 
-      <PatientsList>
-        {Patients.map((patient, index) => (
-          <>
-            <PatientCard key={'patient' + index} {...patient} />
-            <Line />
-          </>
-        ))}
-      </PatientsList>
+      {patients && (
+        <PatientsList>
+          {patients.results.map((patient) => (
+            <>
+              <PatientCard {...patient} />
+              <Line key={'patient_line_' + patient.full_name} />
+            </>
+          ))}
+        </PatientsList>
+      )}
     </PatientDirectoryContainer>
   );
 };

src/pages/PatientDirectory/components/PatientCard/PatientCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Chip, Icon } from '@orfium/ictinus';
-import { Patient } from 'pages/PatientDirectory/types';
+import { PatientAPI } from 'models/apiTypes';
 
 import {
   CardContainer,
@@ -16,28 +16,30 @@ import {
   ViewMore,
 } from './PatientCard.style';
 
-const PatientCard: React.FC<Patient> = ({ name, gender, age, hospital, patientHospitalId, id }) => {
+const PatientCard: React.FC<PatientAPI> = ({ full_name, gender, age, national_id, hospitals }) => {
   return (
-    <CardContainer>
+    <CardContainer key={'patient' + full_name}>
       <Header>
         <Info>
-          {name} , {gender} , {age}
+          {full_name} , {gender} , {age}
         </Info>
         <ChipWrapper>
           <Chip styleType={'filled'} size={'sm'} fill={'lightGray'} shade={300}>
-            {hospital}
+            {/** TODO: change this! */}
+            {hospitals[0].name}
           </Chip>
         </ChipWrapper>
       </Header>
       <Footer>
         <CardItemsContainer>
           <CardItemContainer>
             <CardLabel>Patient Hospital ID</CardLabel>
-            <CardValue>{patientHospitalId}</CardValue>
+            {/** TODO: change this! */}
+            <CardValue>{hospitals[0].patient_hospital_id}</CardValue>
           </CardItemContainer>
           <CardItemContainer>
             <CardLabel>ID</CardLabel>
-            <CardValue>{id}</CardValue>
+            <CardValue>{national_id}</CardValue>
           </CardItemContainer>
         </CardItemsContainer>
         <ViewMore onClick={() => console.log('view more')}>

src/pages/PatientDirectory/constants.ts

@@ -3,16 +3,18 @@ import React from 'react';
 import Login from 'pages/Login';
 import PatientDirectory from 'pages/PatientDirectory';
 import RegisterPatient from 'pages/RegisterPatient';
-import { Switch } from 'react-router-dom';
+import { Redirect, Switch } from 'react-router-dom';
 
+import PrivateRoute from './PrivateRoute';
 import PublicRoute from './PublicRoute';
 import urls from './urls';
 
 const Routes: React.FC = () => (
   <Switch>
     <PublicRoute exact path={urls.login()} component={Login} />
-    <PublicRoute exact path={urls.register()} component={RegisterPatient} />
-    <PublicRoute exact path={[urls.patients(), '/']} component={PatientDirectory} />
+    <PrivateRoute exact path={urls.register()} component={RegisterPatient} />
+    <PrivateRoute exact path={[urls.patients()]} component={PatientDirectory} />
+    <Redirect to={urls.patients()} />
   </Switch>
 );