feat: add episode type

Author: whosyourtaco

src/hooks/api/patientHooks.ts

@@ -167,11 +167,7 @@ export const useRegisterPatient = () => {
   );
 };
 
-export const useRegisterEpisode = (
-  hospitalID?: string,
-  patientID?: string,
-  episodeType = 'Inguinal Mesh Hernia Repair'
-) => {
+export const useRegisterEpisode = (hospitalID?: string, patientID?: string) => {
   const history = useHistory();
 
   return useMutation<RegisterEpisodePayload, AxiosError, RegisterEpisodeFormType>(
@@ -184,7 +180,7 @@ export const useRegisterEpisode = (
         surgeon_ids: params?.surgeons?.map((surgeon) => surgeon?.value) ?? ['1'],
         comments: params?.comments,
         mesh_type: params?.meshType?.label,
-        episode_type: episodeType,
+        episode_type: params?.episodeType.label,
         type: params.type?.label,
         cepod: params.cepod?.label,
         complexity: params?.complexity?.label,

src/pages/RegisterEpisode/components/RegisterEpisodeForm/RegisterEpisodeForm.tsx

@@ -18,6 +18,7 @@ import {
   OCCURRENCE_OPTIONS,
   SIDE_OPTIONS,
   TYPE_OPTIONS,
+  EPISODE_TYPE_OPTIONS,
 } from '../../constants';
 import { RegisterEpisodeFormType } from '../../types';
 import { getHospitalOptions, getSurgeonOptions } from '../../utils';
@@ -127,6 +128,33 @@ const RegisterEpisodeForm: React.FC<Props> = ({
       </FormHeadingContainer>
       <FormHeadingContainer>
         <SectionTitle>Episode Details</SectionTitle>
+        <FieldWrapper>
+          <Field name="episodeType">
+            {(props) => {
+              const hasError = props.meta.touched && props.meta.invalid && !props.meta.active;
+
+              return (
+                <SelectWrapper>
+                  <Select
+                    id="episode_type"
+                    label="Episode Type"
+                    styleType="outlined"
+                    size="md"
+                    required
+                    status={hasError ? 'error' : 'hint'}
+                    hintMsg={hasError ? props.meta.error : undefined}
+                    options={EPISODE_TYPE_OPTIONS}
+                    {...omit(props.input, ['onFocus'])}
+                    selectedOption={EPISODE_TYPE_OPTIONS.find(
+                      (option) => option.value === props.input.value.value
+                    )}
+                    handleSelectedOption={props.input.onChange}
+                  />
+                </SelectWrapper>
+              );
+            }}
+          </Field>
+        </FieldWrapper>
         <FieldWrapper>
           <Field name="cepod">
             {(props) => {

src/pages/RegisterEpisode/constants.ts

@@ -127,3 +127,26 @@ export const FOLLOW_UP_PAIN_OPTIONS: SelectOption[] = [
     label: 'Severe',
   },
 ];
+
+export const EPISODE_TYPE_OPTIONS: SelectOption[] = [
+  {
+    value: 0,
+    label: 'Inguinal Mesh Hernia Repair',
+  },
+  {
+    value: 1,
+    label: 'Incisional Mesh Hernia Repair',
+  },
+  {
+    value: 2,
+    label: 'Femoral Mesh Hernia Repair',
+  },
+  {
+    value: 3,
+    label: 'Hiatus Mesh Hernia Repair',
+  },
+  {
+    value: 4,
+    label: 'Umbilical/Periumbilicial Mesh Hernia Repair',
+  },
+];

src/pages/RegisterEpisode/types.ts

@@ -3,6 +3,7 @@ import { SelectOption } from '../../models/apiTypes';
 export type RegisterEpisodeFormType = {
   hospital: SelectOption;
   patientHospitalId: number;
+  episodeType: SelectOption;
   surgeryDate: string;
   cepod: SelectOption;
   side: SelectOption;