chore: revise frontend components to reflect new model

frontend/src/app/components/containers/complaints/outcomes/hwcr-outcome-by-animal-v2.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../../../hooks/hooks";
 import { selectComplaint } from "../../../../store/reducers/complaints";
 import { Button } from "react-bootstrap";
-import { AnimalOutcomeV2 } from "../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
+import { AnimalOutcomeV3 } from "../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
 import { from } from "linq-to-typescript";
 import { WildlifeComplaint } from "../../../../types/app/complaints/wildlife-complaint";
 import { CreateAnimalOutcome } from "./oucome-by-animal/create-outcome";
@@ -61,7 +61,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
 
   //-- outcomes is a collection of all of the animal outcomes
   //-- for the selected complaint
-  const [outcomes, setOutcomes] = useState<Array<AnimalOutcomeV2>>([]);
+  const [outcomes, setOutcomes] = useState<Array<AnimalOutcomeV3>>([]);
 
   //-- modals
   //-- delete animal outcome modal
@@ -87,7 +87,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
   //-- save an item from the create-complaint component
   //-- when saving make sure that the outcome is successfully
   //-- saved before adding the outcome to the list of outcomes
-  const handleSave = (item: AnimalOutcomeV2) => {
+  const handleSave = (item: AnimalOutcomeV3) => {
     dispatch(createAnimalOutcome(id, item)).then((result) => {
       if (result === "success") {
         dispatch(getCaseFile(id));
@@ -99,7 +99,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
   //-- save an item from the create-complaint component
   //-- when saving make sure that the outcome is successfully
   //-- saved before adding the outcome to the list of outcomes
-  const handleUpdate = (item: AnimalOutcomeV2) => {
+  const handleUpdate = (item: AnimalOutcomeV3) => {
     dispatch(updateAnimalOutcome(caseId, item)).then((result) => {
       if (result === "success") {
         dispatch(getCaseFile(id));
@@ -217,7 +217,7 @@ export const HWCROutcomeByAnimalv2: FC<props> = () => {
 
         {showForm && (
           <CreateAnimalOutcome
-            index={getNextOrderNumber<AnimalOutcomeV2>(outcomes)}
+            index={getNextOrderNumber<AnimalOutcomeV3>(outcomes)}
             assignedOfficer={assignedOfficer}
             agency={agency}
             species={species}

frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/animal-outcome.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { AnimalOutcomeV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
+import { AnimalOutcomeV3 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
 import { useAppSelector } from "../../../../../hooks/hooks";
 import {
   selectAgeDropdown,
@@ -19,7 +19,7 @@ import { Button, Card, Col, ListGroup, Row } from "react-bootstrap";
 
 type props = {
   index: number;
-  data: AnimalOutcomeV2;
+  data: AnimalOutcomeV3;
   agency: string;
   edit: Function;
   remove: Function;

frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/create-outcome.tsx

@@ -12,9 +12,9 @@ import {
   selectThreatLevelDropdown,
   selectWildlifeComplaintOutcome,
 } from "../../../../../store/reducers/code-table";
-import { AnimalOutcomeV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
+import { AnimalOutcomeV3 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-outcome";
 import { AnimalTagV2 } from "../../../../../types/app/complaints/outcomes/wildlife/animal-tag";
-import { DrugUsedV2 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used";
+import { DrugUsedV3 } from "../../../../../types/app/complaints/outcomes/wildlife/drug-used";
 import Option from "../../../../../types/app/option";
 import { selectOfficerListByAgency } from "../../../../../store/reducers/officer";
 import { from } from "linq-to-typescript";
@@ -38,7 +38,7 @@ type props = {
 
 //-- this object is used to create an empty outcome
 //-- do not export this object
-const defaultOutcome: AnimalOutcomeV2 = {
+const defaultOutcome: AnimalOutcomeV3 = {
   id: "",
   species: "",
   sex: "",
@@ -77,7 +77,7 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
 
   //-- new input data
   // eslint-disable-line no-console, max-len
-  const [data, applyData] = useState<AnimalOutcomeV2>({ ...defaultOutcome, species });
+  const [data, applyData] = useState<AnimalOutcomeV3>({ ...defaultOutcome, species });
 
   //-- refs
   // eslint-disable-next-line @typescript-eslint/no-array-constructor
@@ -88,7 +88,7 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
   //-- input handlers
   const updateModel = (
     property: string,
-    value: string | Date | Array<AnimalTagV2 | DrugUsedV2> | DrugAuthorization | null | undefined,
+    value: string | Date | Array<AnimalTagV2 | DrugUsedV3> | DrugAuthorization | null | undefined,
   ) => {
     const model = { ...data, [property]: value };
     applyData(model);
@@ -253,7 +253,7 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
 
   const addDrugUsed = () => {
     const { drugs } = data;
-    const nextOrder = getNextOrderNumber<DrugUsedV2>(drugs);
+    const nextOrder = getNextOrderNumber<DrugUsedV3>(drugs);
 
     let id = uuidv4().toString();
 
@@ -264,11 +264,9 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
         vial: "",
         drug: "",
         amountUsed: "",
-        amountDiscarded: "",
-        reactions: "",
         remainingUse: null,
         injectionMethod: "",
-        discardMethod: "",
+        additionalComments: "",
         officer: officer ?? "",
         order: nextOrder,
       },
@@ -303,7 +301,7 @@ export const CreateAnimalOutcome: FC<props> = ({ index, assignedOfficer: officer
     drugRefs.current = update.length === 0 ? [] : drugRefs.current.filter((item) => item.id !== null && item.id === id);
   };
 
-  const updateDrugUsed = (drug: DrugUsedV2) => {
+  const updateDrugUsed = (drug: DrugUsedV3) => {
     const { drugs: source } = data;
 
     const items = source.filter(({ id }) => id !== drug.id);

frontend/src/app/components/containers/complaints/outcomes/oucome-by-animal/drug-item.tsx

@@ -11,12 +11,10 @@ type props = {
   vial: string;
   drug: string;
   amountUsed: string;
-  amountDiscarded: string;
 
   injectionMethod: string;
-  discardMethod: string;
+  additionalComments: string;
 
-  reactions: string;
   remainingUse: string | null;
 
   officer?: string;
@@ -27,10 +25,8 @@ export const DrugItem: FC<props> = ({
   vial,
   drug,
   amountUsed,
-  amountDiscarded,
   injectionMethod,
-  discardMethod,
-  reactions,
+  additionalComments,
   remainingUse,
   officer,
   date,
@@ -110,33 +106,14 @@ export const DrugItem: FC<props> = ({
           <dd>{remaining}</dd>
         </Col>
 
-        {remainingUse === "DISC" && (
-          <>
-            <Col
-              xs={12}
-              md={6}
-            >
-              <dt>Amount discarded</dt>
-              <dd>
-                {amountDiscarded} {amountDiscarded ? "ml" : ""}
-              </dd>
-            </Col>
-            <Col
-              xs={12}
-              md={6}
-            >
-              <dt>Discard method</dt>
-              <dd>{discardMethod}</dd>
-            </Col>
-          </>
-        )}
         <Col
           xs={12}
           md={6}
         >
-          <dt>Adverse Reactions</dt>
-          <dd>{reactions ? <>{reactions}</> : "None"}</dd>
+          <dt>Additional comments</dt>
+          <dd>{additionalComments ? <>{additionalComments}</> : "None"}</dd>
         </Col>
+
         <Col
           xs={12}
           md={6}