feat: add RegisterEpisode and connect with api

Author: whosyourtaco

package.json

@@ -10,7 +10,7 @@
     "@emotion/jest": "^11.2.1",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@orfium/ictinus": "^3.9.1",
+    "@orfium/ictinus": "^3.14.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.1.3",
@@ -23,11 +23,13 @@
     "axios": "^0.21.1",
     "customize-cra": "^1.0.0",
     "final-form": "^4.20.2",
+    "final-form-arrays": "^3.0.2",
     "history": "^4.10.1",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.3",
+    "react-final-form-arrays": "^3.1.3",
     "react-final-form-listeners": "^1.0.3",
     "react-query": "^3.16.0",
     "react-router-dom": "^5.2.0",

src/api/patientsAPI/patientsAPI.tsx

@@ -1,12 +1,21 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { RegisterPatientPayload, PatientsPayload, PaginationParams } from '../../models/apiTypes';
+import {
+  RegisterPatientPayload,
+  PatientsPayload,
+  PaginationParams,
+  RegisterEpisodePayload,
+} from '../../models/apiTypes';
 import { METHODS, request } from '../axiosInstances';
 
 export default {
   getHospitals: (params?: PaginationParams) => request(METHODS.GET, '/hospitals/', { params }),
-  getHospital: (id: string) => request(METHODS.GET, `/hospitals/${id}`, {}),
+  getHospital: (id: string) => request(METHODS.GET, `/hospitals/${id}/`, {}),
   getPatients: (params?: PatientsPayload) => request(METHODS.GET, '/patients/', { params }),
-  getPatient: (id: string) => request(METHODS.GET, `/patients/${id}`, {}),
+  getSurgeons: (params?: PaginationParams) =>
+    request(METHODS.GET, '/medical-personnel/', { params }),
+  getPatient: (id: string) => request(METHODS.GET, `/patients/${id}/`, {}),
   registerPatient: (params: RegisterPatientPayload) =>
     request(METHODS.POST, '/patients/', { params }),
+  registerEpisode: (params: RegisterEpisodePayload) =>
+    request(METHODS.POST, '/episodes/', { params }),
 };

src/common.style.tsx

@@ -76,6 +76,15 @@ export const PageTitle = styled.div`
   padding: 16px;
 `;
 
+export const PageSubtitle = styled.div`
+  color: ${(props) => props.theme.utils.getColor('darkGray', 400)};
+  display: flex;
+  font-size: 18px;
+  font-weight: 400;
+  gap: 16px;
+  padding: 16px;
+`;
+
 export const SectionTitle = styled.div`
   color: ${(props) => props.theme.utils.getColor('blue', 500)};
   font-size: 18px;

src/hooks/api/patientHooks.ts

@@ -11,8 +11,11 @@ import {
   PatientAPI,
   PatientsPayload,
   PatientsResponse,
+  RegisterEpisodePayload,
   RegisterPatientPayload,
+  SurgeonsResponse,
 } from '../../models/apiTypes';
+import { RegisterEpisodeFormType } from '../../pages/RegisterEpisode/types';
 import { RegisterPatientFormType } from '../../pages/RegisterPatient/types';
 import urls from '../../routing/urls';
 
@@ -77,6 +80,22 @@ export const useGetPatients = (params?: PatientsPayload) => {
   );
 };
 
+export const useGetSurgeons = (params?: PaginationParams) => {
+  return useQuery<SurgeonsResponse, AxiosError, SurgeonsResponse>(
+    [ReactQueryKeys.SurgeonsQuery, params?.limit, params?.offset, params?.ordering],
+    async () => {
+      const { request } = patientsAPI.single.getSurgeons(params);
+      return await request();
+    },
+    {
+      onError: (errors) => {
+        console.log(errors);
+      },
+      retry: false,
+    }
+  );
+};
+
 export const useGetPatient = (id: string) => {
   return useQuery<PatientAPI, AxiosError, PatientAPI>(
     [ReactQueryKeys.PatientsQuery, id],
@@ -122,3 +141,44 @@ export const useRegisterPatient = () => {
     }
   );
 };
+
+export const useRegisterEpisode = (
+  hospitalID?: string,
+  patientID?: string,
+  episodeType = 'Inguinal Mesh Hernia Repair'
+) => {
+  const history = useHistory();
+
+  return useMutation<RegisterEpisodePayload, AxiosError, RegisterEpisodeFormType>(
+    (params) => {
+      const payload = {
+        hospital_id: params?.hospital?.value,
+        patient_id: parseInt(patientID ?? '0'),
+        anaesthetic_type: params?.anaestheticType?.label,
+        diathermy_used: params?.diathermyUsed?.label === 'True',
+        surgeon_ids: params?.surgeons?.map((surgeon) => surgeon?.value) ?? ['1'],
+        comments: params?.comments,
+        mesh_type: params?.meshType?.label,
+        episode_type: episodeType,
+        type: params.type?.label,
+        cepod: params.cepod?.label,
+        complexity: params?.complexity?.label,
+        occurence: params?.occurence?.label,
+        side: params?.side?.label,
+        surgery_date: params?.surgeryDate,
+      };
+
+      const { request } = patientsAPI.single.registerEpisode(payload);
+
+      return request();
+    },
+    {
+      onSuccess: () => {
+        history.replace(`${urls.patients()}/${hospitalID}/${patientID}`);
+      },
+      onError: (errors) => {
+        console.log(errors);
+      },
+    }
+  );
+};

src/hooks/constants.ts

@@ -1,4 +1,5 @@
 export const ReactQueryKeys = {
   PatientsQuery: 'patientsQuery',
   HospitalsQuery: 'hospitalsQuery',
+  SurgeonsQuery: 'surgeonsQuery',
 };

src/models/apiTypes.tsx

@@ -36,7 +36,36 @@ export type HospitalsAPI = {
   patient_hospital_id?: number;
 };
 
-// export type EpisodesAPI = {};
+export type EpisodesAPI = {
+  episode_type: string;
+  cepod: string;
+  side: string;
+  occurence: string;
+  type: string;
+  complexity: string;
+  mesh_type: string;
+  diathermy_used: boolean;
+  comments?: string;
+  anaesthetic_type: string;
+  surgeons: SurgeonsAPI[];
+};
+
+export type RegisterEpisodePayload = {
+  hospital_id: number;
+  patient_id: number;
+  surgery_date: string;
+  episode_type: string;
+  cepod: string;
+  side: string;
+  occurence: string;
+  type: string;
+  complexity: string;
+  mesh_type: string;
+  diathermy_used: boolean;
+  comments?: string;
+  anaesthetic_type: string;
+  surgeon_ids: number[];
+};
 
 export interface HospitalsResponse extends PaginationResponse, PaginationParams {
   results: HospitalsAPI[];
@@ -73,9 +102,20 @@ export type PatientAPI = {
   phone_2: string;
   address: string;
   hospital_mappings: HospitalsAPI[];
-  // episodes: EpisodesAPI[];
+  episodes: EpisodesAPI[];
 };
 
 export interface PatientsResponse extends PaginationResponse, PaginationParams {
   results: PatientAPI[];
 }
+
+export type SurgeonsAPI = {
+  id: number;
+  user: {
+    email: string;
+  };
+  level: string;
+};
+export interface SurgeonsResponse extends PaginationResponse, PaginationParams {
+  results: SurgeonsAPI[];
+}

src/pages/PatientDetails/PatientDetails.tsx

@@ -57,7 +57,14 @@ const PatientDetails: React.FC = () => {
         )}
       </ComponentWrapper>
       <ButtonContainer>
-        <Button color={'blue-500'} buttonType="button" disabled={isLoading} block size="md">
+        <Button
+          color={'blue-500'}
+          buttonType="button"
+          disabled={isLoading}
+          block
+          size="md"
+          onClick={() => history.push(`${history.location.pathname}/add-episode`)}
+        >
           Register new episode
         </Button>
       </ButtonContainer>

src/pages/PatientDetails/components/GeneralInformation/GeneralInformation.tsx

@@ -22,19 +22,19 @@ const GeneralInformation: React.FC<Props> = ({ patient, hospital }) => {
         locked
         label="Full Name"
         styleType="outlined"
-        size="sm"
+        size="md"
         value={patient?.full_name}
       />
 
-      <TextField locked label="Gender" styleType="outlined" size="sm" value={patient?.gender} />
+      <TextField locked label="Gender" styleType="outlined" size="md" value={patient?.gender} />
       <FieldsContainer>
         <TextField
           locked
           id="year_of_birth"
           label="Year Of Birth"
           styleType="outlined"
           type="number"
-          size="sm"
+          size="md"
           value={patient?.year_of_birth}
         />
         <TextField
@@ -43,32 +43,32 @@ const GeneralInformation: React.FC<Props> = ({ patient, hospital }) => {
           label="Age"
           type="number"
           styleType="outlined"
-          size="sm"
+          size="md"
           value={patient?.age}
         />
       </FieldsContainer>
       <TextField
         id="national_id"
         label="National ID"
         styleType="outlined"
-        size="sm"
+        size="md"
         locked
         value={patient?.national_id}
       />
       <TextField
         id="hospital"
         label="Hospital"
         styleType="outlined"
-        size="sm"
+        size="md"
         locked
         value={hospital?.name}
       />
       <TextField
         id="patient_hospital_id"
         label="Patient Hospital ID"
-        required
         styleType="outlined"
-        size="sm"
+        size="md"
+        locked
         value={hospitalPatientID}
       />
     </Container>

src/pages/RegisterEpisode/RegisterEpisode.style.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const FormHeading = styled.span`
+  font-size: 14px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  padding: 18px;
+`;