feat: get patient hospital ids from hospital mapping object

Author: whosyourtaco

src/hooks/api/patientHooks.ts

@@ -19,9 +19,7 @@ export const useGetHospitals = (params?: PaginationParams) => {
     ReactQueryKeys.HospitalsQuery,
     async () => {
       const { request } = patientsAPI.single.getHospitals(params);
-      const data = await request();
-
-      return data;
+      return await request();
     },
     {
       onError: (errors) => {
@@ -44,10 +42,11 @@ export const useGetPatients = (params?: PatientsPayload) => {
       params?.ordering,
     ],
     async () => {
+      if (params?.hospital_id === undefined) {
+        return undefined;
+      }
       const { request } = patientsAPI.single.getPatients(params);
-      const data = await request();
-
-      return data;
+      return await request();
     },
     {
       onError: (errors) => {

src/models/apiTypes.tsx

@@ -30,9 +30,10 @@ export interface LoginResponse {
 
 export type HospitalsAPI = {
   id: number;
-  name: string;
-  address: string;
-  patient_hospital_id: number;
+  hospital_id?: number;
+  name?: string;
+  address?: string;
+  patient_hospital_id?: number;
 };
 
 export interface HospitalsResponse extends PaginationResponse, PaginationParams {
@@ -68,7 +69,7 @@ export type PatientAPI = {
   phone_1: string;
   phone_2: string;
   address: string;
-  hospitals: HospitalsAPI[];
+  hospital_mappings: HospitalsAPI[];
 };
 
 export interface PatientsResponse extends PaginationResponse, PaginationParams {

src/pages/PatientDirectory/PatientDirectory.tsx

@@ -28,20 +28,21 @@ const PatientDirectory: React.FC<{ searchTerm?: string }> = ({ searchTerm }) =>
     ordering: sortingOption,
   });
 
-  const [showSortingOptions, setshowSortingOptions] = useState(false);
+  const [showSortingOptions, setShowSortingOptions] = useState(false);
 
   const { data: hospitals } = useGetHospitals({ offset: 0, limit: 100 });
 
   useEffect(() => {
     if (hospitals) {
       setHospitalId(hospitals?.results[0].id);
+      setSelectedOption(hospitals?.results[0].id);
     }
   }, [hospitals]);
 
   const history = useHistory();
 
   const filterOptions = getHospitalOptions(hospitals?.results || []);
-  const [selectedOption, setSelectedOption] = useState(filterOptions?.[0]?.value);
+  const [selectedOption, setSelectedOption] = useState<number>();
 
   return (
     <>
@@ -51,26 +52,26 @@ const PatientDirectory: React.FC<{ searchTerm?: string }> = ({ searchTerm }) =>
           <Filter
             label="Center"
             items={filterOptions}
-            defaultValue={filterOptions.length > 0 ? filterOptions[0] : { label: '', value: '' }}
+            defaultValue={filterOptions.length > 0 ? filterOptions[0] : { label: '', value: -1 }}
             selectedItem={filterOptions.find((option) => option.value === selectedOption)}
             onSelect={(option: FilterOption) => {
-              setSelectedOption(option.value);
+              setSelectedOption(option.value as number);
               setHospitalId(parseInt(option.value.toString()));
             }}
             styleType="transparent"
             buttonType="primary"
           />
-          <SortIcon onClick={() => setshowSortingOptions(!showSortingOptions)} />
+          <SortIcon onClick={() => setShowSortingOptions(!showSortingOptions)} />
         </OptionsWrapper>
 
         {patients && (
           <PatientsList>
             {patients.results.map((patient) => (
               <div
-                key={`patient_${patient.national_id}_${patient.hospitals?.[0]?.id}`}
+                key={`patient_${patient.national_id}_${selectedOption}`}
                 css={{ marginBottom: '8px' }}
               >
-                <PatientCard {...patient} />
+                <PatientCard {...patient} selectedHospital={selectedOption} />
               </div>
             ))}
           </PatientsList>
@@ -92,7 +93,7 @@ const PatientDirectory: React.FC<{ searchTerm?: string }> = ({ searchTerm }) =>
           title={'Sort by options:'}
           sortingOption={sortingOption}
           onSortingOptionChange={(option: SortingOptionsType) => setSortingOption(option)}
-          onClose={() => setshowSortingOptions(false)}
+          onClose={() => setShowSortingOptions(false)}
         />
       )}
     </>

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

@@ -6,7 +6,18 @@ import { PatientAPI } from 'models/apiTypes';
 
 import { CardContainer, IdLabel, IdValue, Subtitle, Title } from './PatientCard.style';
 
-const PatientCard: React.FC<PatientAPI> = ({ full_name, gender, age, national_id, hospitals }) => {
+type Props = PatientAPI & { selectedHospital?: number };
+
+const PatientCard: React.FC<Props> = ({
+  full_name,
+  gender,
+  age,
+  national_id,
+  hospital_mappings,
+  selectedHospital,
+}) => {
+  console.log(selectedHospital);
+  console.log(hospital_mappings);
   const theme = useTheme();
   return (
     <CardContainer key={'patient_' + national_id}>
@@ -20,7 +31,12 @@ const PatientCard: React.FC<PatientAPI> = ({ full_name, gender, age, national_id
       </Subtitle>
       <div css={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
         <IdLabel>Patient Hospital ID:</IdLabel>
-        <IdValue>{hospitals?.[0]?.patient_hospital_id}</IdValue>
+        <IdValue>
+          {
+            hospital_mappings.find((hospital) => hospital?.hospital_id === selectedHospital)
+              ?.patient_hospital_id
+          }
+        </IdValue>
       </div>
       <div css={{ display: 'flex', justifyContent: 'space-between' }}>
         <IdLabel>National ID:</IdLabel>

src/pages/RegisterPatient/utils.ts

@@ -7,8 +7,8 @@ const REQUIRED_FIELD_MSG = 'This field is required';
 
 export const getHospitalOptions = (hospitals: HospitalsAPI[]): FilterOption[] => {
   return hospitals.map((hospital) => ({
-    label: hospital.name,
-    value: hospital.id,
+    label: hospital?.name ?? '',
+    value: hospital?.id,
   }));
 };