From c405daa29d08390f45c1e2a24fb91f3adfb23f66 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 1 Feb 2024 13:18:50 -0500
Subject: [PATCH 1/2] Clear ASL-LEX field on submit

---
 .../tag/asllex/AslLexSearchControl.tsx        | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
index f736f7b5..1025d33e 100644
--- a/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
+++ b/packages/client/src/components/tag/asllex/AslLexSearchControl.tsx
@@ -1,13 +1,8 @@
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { TextSearch, SearchResults } from '@bu-sail/saas-view';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { LexiconEntry } from '../../../graphql/graphql';
-
-interface AslLexSearchControlProps {
-  data: any;
-  handleChange(path: string, value: any): void;
-  path: string;
-}
+import { ControlProps } from '@jsonforms/core';
 
 function getAslLexCode(aslLexObject: any) {
   return aslLexObject.key ? aslLexObject.key : '';
@@ -16,10 +11,18 @@ function getAslLexCode(aslLexObject: any) {
 const width = 300;
 const aslLexicon = { _id: import.meta.env.VITE_ASL_LEXICON_ID, name: import.meta.env.VITE_NAME, schema: {} };
 
-const AslLexSearchControl = ({ handleChange, path }: AslLexSearchControlProps) => {
+const AslLexSearchControl: React.FC<ControlProps> = (props) => {
   const [searchResults, setSearchResults] = useState<LexiconEntry[]>([]);
   const [value, setValue] = useState<LexiconEntry | null>(null);
 
+  useEffect(() => {
+    if (!props.data) {
+      setValue(null);
+      setSearchResults([]);
+      return;
+    }
+  }, [props.data]);
+
   return (
     <>
       <TextSearch width={300} lexicon={aslLexicon} setSearchResults={setSearchResults} />
@@ -29,7 +32,7 @@ const AslLexSearchControl = ({ handleChange, path }: AslLexSearchControlProps) =
           value={value}
           setValue={(entry) => {
             setValue(entry);
-            handleChange(path, getAslLexCode(entry));
+            props.handleChange(props.path, getAslLexCode(entry));
           }}
           width={width}
         />

From b4e11ebf0684fd98a946f091a6d55d8299e3a8e5 Mon Sep 17 00:00:00 2001
From: cbolles <collinbolles@gmail.com>
Date: Thu, 1 Feb 2024 13:24:45 -0500
Subject: [PATCH 2/2] Clear video field on tag submit

---
 .../tag/videorecord/VideoRecordField.component.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
index b5ba7caa..33a8bd5c 100644
--- a/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
+++ b/packages/client/src/components/tag/videorecord/VideoRecordField.component.tsx
@@ -32,7 +32,7 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
   const client = useApolloClient();
   const { tag } = useTag();
 
-  useEffect(() => {
+  const resetState = () => {
     if (!props.uischema.options?.minimumRequired) {
       console.error('Minimum number of videos required not specified');
       return;
@@ -48,8 +48,20 @@ const VideoRecordField: React.FC<ControlProps> = (props) => {
     setMinimumVideos(minimumVideos);
     setMaxVideos(maxVideos);
     setBlobs(Array.from({ length: maxVideos }, (_, _i) => null));
+    setActiveIndex(0);
+  };
+
+  useEffect(() => {
+    resetState();
   }, [props.uischema]);
 
+  useEffect(() => {
+    if (!props.data) {
+      resetState();
+      return;
+    }
+  }, [props.data]);
+
   /** Handles saving the video fragment to the database and updating the JSON Forms representation of the data */
   const saveVideoFragment = async (blob: Blob) => {
     // Save the video fragment