Refactor API call for patients into separate file

sfbrigade · Oct 22, 2024 · 128e19d · 128e19d
1 parent 0574c8e
commit 128e19d
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 50 deletions.
diff --git a/client/src/pages/patients/Patients.jsx b/client/src/pages/patients/Patients.jsx
@@ -6,65 +6,18 @@ import {
   TextInput,
   Divider,
 } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { StatusCodes } from 'http-status-codes';
 import { IconSearch } from '@tabler/icons-react';
 
 import classes from './Patients.module.css';
-import LifelineAPI from './LifelineAPI';
 import PatientsTable from './PatientsTable';
-
-const HEADERS = [
-  { key: 'name', text: 'Name' },
-  { key: 'createdBy', text: 'Created by' },
-  { key: 'createdAt', text: 'Date created' },
-  { key: 'updatedBy', text: 'Updated by' },
-  { key: 'updatedAt', text: 'Last updated' },
-  { key: 'more', text: '' },
-];
+import { usePatients } from './usePatients';
 
 /**
  *  Patients page component
  *
  */
 export default function Patients() {
-  const [search] = useState('');
-  const [page] = useState(1);
-
-  const { data: patients, isFetching } = useQuery({
-    queryKey: ['patients', search, page],
-    queryFn: async () => {
-      const res = await LifelineAPI.getPatients(search, page);
-      if (res.status === StatusCodes.OK) {
-        return await res.json();
-      } else {
-        throw new Error('Failed to fetch patients.');
-      }
-    },
-  });
-
-  let formattedData = [];
-  if (patients) {
-    formattedData = patients.map((patient) => {
-      return {
-        id: patient.id,
-        name: `${patient.firstName}${patient.middleName ? ` ${patient.middleName}` : ''} ${patient.lastName}`,
-        createdBy: `${patient.createdBy.firstName}${patient.createdBy.middleName ? patient.createdBy.middleName + ' ' : ''}${patient.createdBy.lastName}`,
-        createdAt: new Date(patient.createdAt).toLocaleDateString(undefined, {
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        }),
-        updatedBy: `${patient.createdBy.firstName}${patient.createdBy.middleName ? patient.createdBy.middleName + ' ' : ''}${patient.createdBy.lastName}`,
-        updatedAt: new Date(patient.updatedAt).toLocaleDateString(undefined, {
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        }),
-      };
-    });
-  }
+  const { patients, headers, isFetching } = usePatients();
 
   return (
     <Container>
@@ -86,7 +39,7 @@ export default function Patients() {
         zIndex={1000}
         overlayProps={{ radius: 'sm', blur: 2 }}
       />
-      <PatientsTable headers={HEADERS} data={formattedData} />
+      <PatientsTable headers={headers} data={patients} />
     </Container>
   );
 }
diff --git a/client/src/pages/patients/usePatients.jsx b/client/src/pages/patients/usePatients.jsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { StatusCodes } from 'http-status-codes';
+import LifelineAPI from './LifelineAPI';
+
+/**
+ * Patient data
+ * @typedef {object} Patient
+ * @property {string} id - Patient ID
+ * @property {string} name - Patient first name, middle name and last name
+ * @property {string} createdBy - Lifeline user first name, middle name and last name
+ * @property {string} createdAt - Date patient profile was created
+ * @property {string} updatedBy - Lifeline user first name, middle name and last name
+ * @property {string} updatedAt - Date patient profile was last updated
+ */
+
+/**
+ * Table headers
+ * @typedef {object} TableHeader
+ * @property {string} key - Table header key corresponding to the data key
+ * @property {string} text - Table header text to be displayed
+ */
+
+/**
+ *
+ * @returns {{
+ *  patients: Array<Patient>,
+ *  headers: Array<TableHeader>,
+ *  search: string,
+ *  setSearch: (search: string) => void,
+ *  page: number,
+ *  setPage: (page: number) => void,
+ *  isFetching: boolean,
+ * }}
+ */
+export function usePatients() {
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const { data: patients, isFetching } = useQuery({
+    queryKey: ['patients', search, page],
+    queryFn: async () => {
+      const res = await LifelineAPI.getPatients(search, page);
+      if (res.status === StatusCodes.OK) {
+        return await res.json();
+      } else {
+        throw new Error('Failed to fetch patients.');
+      }
+    },
+  });
+
+  const PATIENT_TABLE_HEADERS = [
+    { key: 'name', text: 'Name' },
+    { key: 'createdBy', text: 'Created by' },
+    { key: 'createdAt', text: 'Date created' },
+    { key: 'updatedBy', text: 'Updated by' },
+    { key: 'updatedAt', text: 'Last updated' },
+    { key: 'more', text: '' },
+  ];
+
+  let formattedData = [];
+  if (patients) {
+    formattedData = patients.map((patient) => {
+      return {
+        id: patient.id,
+        name: `${patient.firstName}${patient.middleName ? ` ${patient.middleName}` : ''} ${patient.lastName}`,
+        createdBy: `${patient.createdBy.firstName}${patient.createdBy.middleName ? patient.createdBy.middleName + ' ' : ''}${patient.createdBy.lastName}`,
+        createdAt: new Date(patient.createdAt).toLocaleDateString(undefined, {
+          month: 'long',
+          day: 'numeric',
+          year: 'numeric',
+        }),
+        updatedBy: `${patient.createdBy.firstName}${patient.createdBy.middleName ? patient.createdBy.middleName + ' ' : ''}${patient.createdBy.lastName}`,
+        updatedAt: new Date(patient.updatedAt).toLocaleDateString(undefined, {
+          month: 'long',
+          day: 'numeric',
+          year: 'numeric',
+        }),
+      };
+    });
+  }
+  return {
+    patients: formattedData,
+    headers: PATIENT_TABLE_HEADERS,
+    search,
+    setSearch,
+    page,
+    setPage,
+    isFetching,
+  };
+}