(feat) Add basicAuth as config object (#8)

packages/esm-preappointment-app/src/config-schema.ts

@@ -1 +1,12 @@
-export const configSchema = {};
+import { Type } from '@openmrs/esm-framework';
+export const configSchema = {
+  basicAuthBase64: {
+    _type: Type.String,
+    _description: 'Basic auth base64 string for the API call e.g Basic someBase64String==',
+    _default: '',
+  },
+};
+
+export type PreAppointmentsConfig = {
+  basicAuthBase64: string;
+};

packages/esm-preappointment-app/src/pre-appointments/pre-appointment.component.tsx

@@ -13,9 +13,10 @@ import {
 import React from 'react';
 import { usePreAppointments } from './pre-appointment.resource';
 import { useTranslation } from 'react-i18next';
-import { ErrorState, usePagination } from '@openmrs/esm-framework';
-import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import { ErrorState, useConfig, usePagination } from '@openmrs/esm-framework';
+import { EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import styles from './pre-appointment.scss';
+import { PreAppointmentsConfig } from '../config-schema';
 
 type PreAppointmentProps = {};
 const PAGE_SIZE = 10;
@@ -36,8 +37,8 @@ export const PreAppointment: React.FC<PreAppointmentProps> = () => {
     { key: 'age', header: 'Age' },
   ];
 
-  const { results, goTo, currentPage } = usePagination(preappoinments, PAGE_SIZE);
-  const { pageSizes } = usePaginationInfo(PAGE_SIZE, preappoinments.length, currentPage, results.length);
+  const { results, goTo, currentPage = 0 } = usePagination(preappoinments, PAGE_SIZE);
+  const { pageSizes = [] } = usePaginationInfo(PAGE_SIZE, preappoinments?.length, currentPage, results?.length ?? 0);
 
   const tableRows = results.map((row) => ({
     id: `${row.person_id}`,
@@ -55,6 +56,17 @@ export const PreAppointment: React.FC<PreAppointmentProps> = () => {
     return <ErrorState error={error} headerTitle={t('preAppointments', 'Pre appointments')} />;
   }
 
+  if (!preappoinments?.length) {
+    return (
+      <div className={styles.emptyStateContainer}>
+        <EmptyState
+          headerTitle={t('preAppointments', 'Pre appointments')}
+          displayText={t('preAppointments', 'Pre appointments')}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={styles.preAppointment}>
       <DataTable rows={tableRows} headers={headers} size="sm" useZebraStyles>
@@ -96,16 +108,17 @@ export const PreAppointment: React.FC<PreAppointmentProps> = () => {
           </TableContainer>
         )}
       </DataTable>
+
       <Pagination
         backwardText="Previous page"
         forwardText="Next page"
         itemsPerPageText="Items per page:"
         onChange={({ page }) => goTo(page)}
-        page={currentPage}
+        page={currentPage ?? 0}
         pageSize={PAGE_SIZE}
-        pageSizes={pageSizes}
+        pageSizes={pageSizes ?? []}
         size="md"
-        totalItems={103}
+        totalItems={preappoinments?.length ?? 0}
       />
     </div>
   );

packages/esm-preappointment-app/src/pre-appointments/pre-appointment.resource.tsx

@@ -1,14 +1,18 @@
 import useSWR from 'swr';
+import { type PreAppointmentsConfig } from '../config-schema';
+import { useConfig } from '@openmrs/esm-framework';
 
 // Should use openmrsFetch to fetch data from the backend
 // import { openmrsFetch } from '@openmrs/esm-api';
 
 // Add the basic auth base64 string for the API call
-const basicAuthBase64 = 'Basic';
-const fetcher = (url) => fetch(url, { headers: { Authorization: basicAuthBase64 } }).then((r) => r.json());
+const fetcher = (url, basicAuthBase64) =>
+  fetch(url, { headers: { Authorization: basicAuthBase64 } }).then((r) => r.json());
 
 export const usePreAppointments = (locationUuid: string, yearWeek: string) => {
+  const { basicAuthBase64 } = useConfig<PreAppointmentsConfig>();
+
   const url = `https://ngx.ampath.or.ke/etl-latest/etl/ml-weekly-predictions?locationUuids=${locationUuid}&yearWeek=${yearWeek}`;
-  const { data, isLoading, error, isValidating } = useSWR<PreAppointment>(url, fetcher);
+  const { data, isLoading, error, isValidating } = useSWR<PreAppointment>(url, () => fetcher(url, basicAuthBase64));
   return { preappoinments: data?.result ?? [], isLoading, error, isValidating };
 };

packages/esm-preappointment-app/src/pre-appointments/pre-appointment.scss

@@ -6,3 +6,7 @@
   padding: spacing.$spacing-05;
   border: 1px solid colors.$cool-gray-20;
 }
+
+.emptyStateContainer {
+  margin: spacing.$spacing-05;
+}