Web hotfix (#65)

## Problem
Web container failed to build during the workflow run. 

## ESLint Error
```
#12 1.279 info  - Linting and checking validity of types...
#12 1.689 error - ESLint: ESLint configuration in .eslintrc.json is invalid: 	- Unexpected top-level property "[javascript]". 
#12 10.10 Failed to compile.
```

### Solution
The `.eslintrc.json` configuration file was incorrectly formatted. It hadn't changed during the typescript conversion, but the package for `eslint` did get updated. Since this issue did not appear in previous build runs either how eslint interprets the file changed during updates or it wasn't previously used. Either way, I was able to reproduce the error in my local dev environment by running `yarn build` in the `app/web` directory. I got a working config file created, and now that it is working I had to fix the issues in the `.ts/.tsx` files the linter found (it turns our, ESLint was not installed in my Ubuntu IDE, so the default typescript linter was more lax).

I am also going to suggest creating a devcontainer in the near future for web development so that we sync the dev and prod eslints.


## Missing Property Error
```
#12 10.10 ./utils/constants.ts:3:14
#12 10.10 Type error: Property 'patient_encounter_uuid' is missing in type '{ patient_rfid: string; document_num: string; location: string; handover_from: string; arrival_date: Date; arrival_time: Date; triage_acuity: string; age: number; gender: string; ... 8 more ...; comment: string; }' but required in type 'PatientEncounterFormDataInterface'.
#12 10.10 
#12 10.10   1 | import { PatientEncounterFormDataInterface } from "../interfaces/PatientEncounterFormDataInterface";
#12 10.10   2 | 
#12 10.10 > 3 | export const MFPEFormData: PatientEncounterFormDataInterface = {
#12 10.10     |              ^
#12 10.10   4 |   patient_rfid: "",
#12 10.10   5 |   document_num: "",
#12 10.10   6 |   location: "Main Medical",
```

### Solution
* Added missing type to PatientEncounterFormDataInterface 

## Ticket URL
https://mediform.atlassian.net/browse/MEDI-17

## Documentation
N/A

## Tests Run
* Tested locally. Rebuilt `web` image and container from scratch
* Manually tested web application
    - Login
    - Create a new patient encounter form
    - Search PE forms
    - View existing PE
    - Update existing PEs
    - Delete PEs

app/web/.eslintrc.json

@@ -5,7 +5,6 @@
   },
   "extends": [
     "next/core-web-vitals",
-    "plugin:prettier/recommended",
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended"
@@ -20,22 +19,7 @@
   "rules": {
     "quotes": ["error", "double"],
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off"
   }
 }

app/web/components/Copyright.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import * as React from "react";
+import Typography, { TypographyProps } from "@mui/material/Typography";
 
 
 /**
@@ -12,9 +12,9 @@ import Typography, { TypographyProps } from '@mui/material/Typography';
 export function Copyright(props: TypographyProps) {
     return (
         <Typography variant="body2" color="text.secondary" align="center" {...props}>
-            {'Copyright © '}
+            {"Copyright © "}
             {new Date().getFullYear()}
-            {'.'}
+            {"."}
         </Typography>
     );
 }

app/web/components/RenderErrorAlerts.tsx

@@ -1,20 +1,27 @@
 import React from "react";
 import { Alert } from "@mui/material";
-import { FieldErrors, FieldError } from "react-hook-form";
+import { FieldErrors } from "react-hook-form";
 
-export function RenderErrorAlerts(errors: FieldErrors<any>) {
+/**
+ * RenderErrorAlerts renders a list of errors as MUI Alert components.
+ * 
+ * @param errors A list of errors to render.
+ * 
+ * @returns A list of MUI Alert components.
+ */
+export function RenderErrorAlerts(errors: FieldErrors) {
   return (
     <>
-      {Object.entries(errors).map(([fieldName, error], index) => {
-        if (error && (error as FieldError).message) {
+      {Object.values(errors).map((error, index) => {
+        if (error && typeof error.message === "string") {
           return (
             <Alert
               severity="error"
               key={index}
               sx={{ mt: 1 }}
               variant="filled"
             >
-              {error.message as React.ReactNode}
+              {error.message}
             </Alert>
           );
         }

app/web/components/SlideTransition.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Slide from "@mui/material/Slide";
+import Slide, { SlideProps } from "@mui/material/Slide";
 
 export const SlideTransition = React.forwardRef(function Transition(
-    props: any,
+    props: SlideProps,
     ref: React.Ref<unknown>
 ) {
     return <Slide direction="up" ref={ref} {...props} />;

app/web/components/patient_encounter_form/AgeField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -11,7 +12,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns AgeField component.
  */
-export function AgeField({ control, errors }: FormFieldProps) {
+export function AgeField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <FormControl>
       <Controller

app/web/components/patient_encounter_form/ArrivalDateField.tsx

@@ -5,6 +5,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -14,7 +15,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns ArrivalDateField component.
  */
-export function ArrivalDateField({ control, errors }: FormFieldProps) {
+export function ArrivalDateField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <FormControl>

app/web/components/patient_encounter_form/ArrivalMethodField.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -18,7 +19,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  * 
  * @returns ArrivalMethodField component.
  */
-export function ArrivalMethodField({ control, errors }: FormFieldProps) {
+export function ArrivalMethodField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   const hasError = Boolean(errors?.arrival_method);
   return (
     <FormControl error={Boolean(errors?.arrival_method)}>

app/web/components/patient_encounter_form/ArrivalTimeField.tsx

@@ -5,6 +5,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 /**
  * Renders an arrival time input field controlled by React Hook Form.
@@ -13,7 +14,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns ArrivalTimeField component.
  */
-export function ArrivalTimeField({ control, errors }: FormFieldProps) {
+export function ArrivalTimeField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <FormControl>

app/web/components/patient_encounter_form/ChiefComplaintField.tsx

@@ -12,6 +12,7 @@ import {
 import { Controller } from "react-hook-form";
 import { chiefComplaints } from "../../utils/constants";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 /**
  * Renders a chief complaint select field controlled by React Hook Form.
@@ -20,7 +21,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns ChiefComplaintField component.
  */
-export function ChiefComplaintField({ control, errors }: FormFieldProps) {
+export function ChiefComplaintField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
 
   const MenuProps = {
     PaperProps: {

app/web/components/patient_encounter_form/CommentsField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Box, FormControl, TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -11,7 +12,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns CommentsField component.
  */
-export function CommentsField({ control, errors }: FormFieldProps) {
+export function CommentsField({ control }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <Box>
       <FormControl fullWidth>

app/web/components/patient_encounter_form/DepartureDateField.tsx

@@ -5,6 +5,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -14,7 +15,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns DepartureDateField component.
  */
-export function DepartureDateField({ control, errors }: FormFieldProps) {
+export function DepartureDateField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <FormControl error={Boolean(errors?.departure_date)}>

app/web/components/patient_encounter_form/DepartureDestinationField.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -18,7 +19,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns DepartureDestinationField component.
  */
-export function DepartureDestinationField({ control, errors }: FormFieldProps) {
+export function DepartureDestinationField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   const hasError = Boolean(errors?.departure_dest);
   return (
     <FormControl error={Boolean(errors?.departure_dest)}>

app/web/components/patient_encounter_form/DepartureTimeField.tsx

@@ -5,6 +5,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 /**
  * Renders a departure time selection field controlled by React Hook Form.
@@ -13,7 +14,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns DepartureTimeField component.
  */
-export function DepartureTimeField({ control, errors }: FormFieldProps) {
+export function DepartureTimeField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <FormControl error={Boolean(errors?.departure_time)}>

app/web/components/patient_encounter_form/DocumentNumberField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -11,7 +12,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns DocumentNumberField component.
  */
-export function DocumentNumberField({ control, errors }: FormFieldProps) {
+export function DocumentNumberField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <FormControl>
       <Controller

app/web/components/patient_encounter_form/GenderField.tsx

@@ -9,6 +9,7 @@ import {
 } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -18,7 +19,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns GenderField component.
  */
-export function GenderField({ control, errors }: FormFieldProps) {
+export function GenderField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   const hasError = Boolean(errors?.gender);
   return (
     <FormControl>

app/web/components/patient_encounter_form/HandoverFromField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -11,7 +12,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns HandoverFromField component.
  */
-export function HandoverFromField({ control, errors }: FormFieldProps) {
+export function HandoverFromField({ control }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <FormControl>
       <Controller

app/web/components/patient_encounter_form/HandoverToField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, FormHelperText, TextField } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -11,7 +12,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  *
  * @returns HandoverToField component.
  */
-export function HandoverToField({ control, errors }: FormFieldProps) {
+export function HandoverToField({ control, errors }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <FormControl error={Boolean(errors?.handover_too)}>
       <Controller

app/web/components/patient_encounter_form/LocationField.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { FormControl, FormLabel, MenuItem, Select } from "@mui/material";
 import { Controller } from "react-hook-form";
 import { FormFieldProps } from "../../interfaces/FormFieldProps";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 
 /**
@@ -12,7 +13,7 @@ import { FormFieldProps } from "../../interfaces/FormFieldProps";
  * @returns {JSX.Element} - LocationField component.
  */
 
-export function LocationField({ control, errors }: FormFieldProps) {
+export function LocationField({ control }: FormFieldProps<PatientEncounterFormDataInterface>) {
   return (
     <FormControl>
       <FormLabel id="location-select-label">Location</FormLabel>

app/web/components/patient_encounter_form/ModifyForm.tsx

@@ -26,6 +26,7 @@ import { ConfirmDeletionDialog } from "../ConfirmDeletionDialog";
 import { AlertObject } from "../../interfaces/AlertObject";
 import { PatientEncounterModifyFormProps } from "../../interfaces/PatientEncounterModifyFormProps";
 import { SubmitAlert } from "../../interfaces/SubmitAlert";
+import { PatientEncounterFormDataInterface } from "../../interfaces/PatientEncounterFormDataInterface";
 
 /**
  * Renders a form for modifying a Shambhala Music Festival Patient Encounter.
@@ -36,11 +37,13 @@ import { SubmitAlert } from "../../interfaces/SubmitAlert";
  * @returns MFPEModifyForm component.
  */
 function MFPEModifyForm({ formUUID, rowData }: PatientEncounterModifyFormProps): JSX.Element {
+  const token = useAuthToken();
+
   if (typeof rowData.on_shift === "boolean") {
     rowData.on_shift = rowData.on_shift === true ? "Yes" : "No";
   }
   if (typeof rowData.chief_complaints === "string") {
-    rowData.chief_complaints = rowData.chief_complaints.split(", ");
+    rowData.chief_complaints = (rowData.chief_complaints as string).split(", ");
   }
 
   if (Array.isArray(rowData.chief_complaints)) {
@@ -72,10 +75,9 @@ function MFPEModifyForm({ formUUID, rowData }: PatientEncounterModifyFormProps):
     if (!chiefComplaints.includes("Other")) {
       setValue("chief_complaint_other", "");
     }
-  }, [chiefComplaints]);
+  }, [chiefComplaints, setValue]);
 
-  const handleUpdateSubmit = async (data: any) => {
-    const token = useAuthToken();
+  const handleUpdateSubmit = async (data: PatientEncounterFormDataInterface) => {
 
     if (data.chief_complaints.includes("Other")) {
       data.chief_complaints = data.chief_complaints.filter(
@@ -106,13 +108,11 @@ function MFPEModifyForm({ formUUID, rowData }: PatientEncounterModifyFormProps):
 
   const handleConfirmDelete = async () => {
     setOpenDialog(false);
-    const token = useAuthToken();
     const errorMessage = await deletePatientEncounterForm(formUUID, token);
     if (!errorMessage) {
       window.location.pathname = "/search/encounters";
     } else {
       setErrorMessage(errorMessage);
-      setError(true);
     }
   };
 
@@ -183,8 +183,5 @@ function MFPEModifyForm({ formUUID, rowData }: PatientEncounterModifyFormProps):
   );
 }
 
-export default MFPEModifyForm;
-function setError(arg0: boolean) {
-  throw new Error("Function not implemented.");
-}
 
+export default MFPEModifyForm;