From eff012bcb1d89a7f71008983b280383e8c8b2402 Mon Sep 17 00:00:00 2001
From: David Graham <dpgraham4401@gmail.com>
Date: Thu, 30 May 2024 09:21:00 -0400
Subject: [PATCH] add uuid  in transporter section and transporter schema

---
 .../Manifest/Transporter/TransporterSection.tsx    | 14 +++++++++++++-
 .../Manifest/Transporter/TransporterTable.tsx      |  3 ++-
 client/src/components/Manifest/manifestSchema.ts   |  1 +
 client/src/setupTests.ts                           |  6 ++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Manifest/Transporter/TransporterSection.tsx b/client/src/components/Manifest/Transporter/TransporterSection.tsx
index 99493a899..54f001390 100644
--- a/client/src/components/Manifest/Transporter/TransporterSection.tsx
+++ b/client/src/components/Manifest/Transporter/TransporterSection.tsx
@@ -6,11 +6,16 @@ import { useReadOnly } from 'hooks/manifest';
 import { useHandlerSearchConfig } from 'hooks/manifest/useOpenHandlerSearch/useHandlerSearchConfig';
 import { Alert } from 'react-bootstrap';
 import { useFieldArray, useFormContext } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
 
 interface TransporterSectionProps {
   setupSign: () => void;
 }
 
+interface TransporterWithKey extends Transporter {
+  key: string;
+}
+
 export function TransporterSection({ setupSign }: TransporterSectionProps) {
   const [, setSearchConfigs] = useHandlerSearchConfig();
   const [readOnly] = useReadOnly();
@@ -20,7 +25,14 @@ export function TransporterSection({ setupSign }: TransporterSectionProps) {
     control: manifestForm.control,
     name: 'transporters',
   });
-  const transporters: Array<Transporter> = manifestForm.getValues('transporters');
+  const transporters = transporterForm.fields;
+
+  transporters.forEach((transporter, index) => {
+    if (!transporter.clientKey) {
+      // @ts-ignore
+      manifestForm.setValue(`transporters[${index}].clientKey`, uuidv4());
+    }
+  });
 
   return (
     <>
diff --git a/client/src/components/Manifest/Transporter/TransporterTable.tsx b/client/src/components/Manifest/Transporter/TransporterTable.tsx
index 13139a7b5..49d95cf3d 100644
--- a/client/src/components/Manifest/Transporter/TransporterTable.tsx
+++ b/client/src/components/Manifest/Transporter/TransporterTable.tsx
@@ -8,6 +8,7 @@ import { useReadOnly } from 'hooks/manifest';
 import React, { useState } from 'react';
 import { Accordion, Button, Card, Col, Row, Table, useAccordionButton } from 'react-bootstrap';
 import { UseFieldArrayReturn } from 'react-hook-form';
+import { v4 as uuidv4 } from 'uuid';
 import { TransporterRowActions } from './TransporterRowActions';
 
 interface TransporterTableProps {
@@ -52,7 +53,7 @@ function TransporterTable({ transporters, arrayFieldMethods, setupSign }: Transp
     <>
       <Accordion ref={parent}>
         {transporters.map((transporter, index) => {
-          const transporterKey: string = `${transporter.epaSiteId}-${index.toString()}`;
+          const transporterKey: string = transporter.clientKey || uuidv4();
           return (
             <Card key={transporterKey} className="py-2 ps-4 pe-2 my-2">
               <Row className="d-flex justify-content-around">
diff --git a/client/src/components/Manifest/manifestSchema.ts b/client/src/components/Manifest/manifestSchema.ts
index 52941e6aa..575a6ae01 100644
--- a/client/src/components/Manifest/manifestSchema.ts
+++ b/client/src/components/Manifest/manifestSchema.ts
@@ -47,6 +47,7 @@ export const handlerSchema = rcraSite.extend({
 export type Handler = z.infer<typeof handlerSchema>;
 
 export const transporterSchema = handlerSchema.extend({
+  clientKey: z.string().optional(),
   order: z.number(),
   manifest: z.number().optional(),
 });
diff --git a/client/src/setupTests.ts b/client/src/setupTests.ts
index fc698e617..be149e55e 100644
--- a/client/src/setupTests.ts
+++ b/client/src/setupTests.ts
@@ -21,3 +21,9 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: vi.fn(),
   })),
 });
+
+// Mocking the useAutoAnimate hook which causes error in the test environment
+// https://github.com/formkit/auto-animate/issues/149#issuecomment-1782772600
+vi.mock('@formkit/auto-animate/react', () => ({
+  useAutoAnimate: () => [null],
+}));