Tweak logic to fix capture upload duplicates

Author: annavik

ui/src/data-services/hooks/captures/useUploadCapture.ts

@@ -9,7 +9,7 @@ interface UploadCaptureFieldValues {
   file: File
 }
 
-export const useUploadCapture = (onSuccess?: () => void) => {
+export const useUploadCapture = (onSuccess?: (id: string) => void) => {
   const { user } = useUser()
   const queryClient = useQueryClient()
 
@@ -25,16 +25,20 @@ export const useUploadCapture = (onSuccess?: () => void) => {
         data.append('image', '')
       }
 
-      return axios.post(`${API_URL}/${API_ROUTES.CAPTURES}/upload/`, data, {
-        headers: {
-          ...getAuthHeader(user),
-          'Content-Type': 'multipart/form-data',
-        },
-      })
+      return axios.post<{ source_image: { id: number } }>(
+        `${API_URL}/${API_ROUTES.CAPTURES}/upload/`,
+        data,
+        {
+          headers: {
+            ...getAuthHeader(user),
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+      )
     },
-    onSuccess: () => {
+    onSuccess: ({ data }) => {
       queryClient.invalidateQueries([API_ROUTES.DEPLOYMENTS])
-      onSuccess?.()
+      onSuccess?.(`${data.source_image.id}`)
     },
   })
 

ui/src/pages/deployment-details/deployment-details-form/section-example-captures/section-example-captures.tsx

@@ -45,7 +45,21 @@ export const SectionExampleCaptures = ({
 }: {
   deployment: DeploymentDetails
 }) => {
-  const [files, setFiles] = useState<File[]>([])
+  const [addQueue, setAddQueue] = useState<
+    { file: File; id: string | undefined; uploaded?: boolean }[]
+  >([])
+
+  useEffect(() => {
+    // Remove items from queue when deployment capture data is updated to free memory
+    setAddQueue((prev) =>
+      prev.filter(({ id }) => {
+        const deploymentHasCapture = deployment.exampleCaptures.some(
+          (exampleCapture) => exampleCapture.id === id
+        )
+        return !deploymentHasCapture
+      })
+    )
+  }, [deployment.exampleCaptures])
 
   if (!deployment.createdAt) {
     return (
@@ -57,7 +71,7 @@ export const SectionExampleCaptures = ({
   }
 
   const canUpload =
-    deployment.exampleCaptures.length + files.length <
+    deployment.exampleCaptures.length + addQueue.length <
     CAPTURE_CONFIG.NUM_CAPTURES
 
   return (
@@ -74,15 +88,38 @@ export const SectionExampleCaptures = ({
           />
         ))}
 
-        {files.map((file, index) => (
-          <AddedExampleCapture
-            key={index}
-            deploymentId={deployment.id}
-            file={file}
-            index={deployment.exampleCaptures.length + index}
-            onUploaded={() => setFiles(files.filter((f) => f !== file))}
-          />
-        ))}
+        {addQueue
+          .filter(({ id }) => {
+            // Only render queue items that are not yet part of deployment captures
+            const deploymentHasCapture = deployment.exampleCaptures.some(
+              (exampleCapture) => exampleCapture.id === id
+            )
+            return !deploymentHasCapture
+          })
+          .map(({ file }, index) => (
+            <AddedExampleCapture
+              key={file.name}
+              deploymentId={deployment.id}
+              file={file}
+              index={deployment.exampleCaptures.length + index}
+              onCancel={() => {
+                // Remove item from queue
+                setAddQueue((prev) => prev.filter(({ file }) => file !== file))
+              }}
+              onSuccess={(id: string) => {
+                // Update queue item with upload status
+                setAddQueue((prev) =>
+                  prev.map((item) => {
+                    if (item.file === file) {
+                      item.id = id
+                      item.uploaded = true
+                    }
+                    return item
+                  })
+                )
+              }}
+            />
+          ))}
 
         {canUpload && (
           <Card>
@@ -98,9 +135,19 @@ export const SectionExampleCaptures = ({
                   theme={IconButtonTheme.Success}
                 />
               )}
-              onChange={(newFiles) =>
-                setFiles([...files, ...Array.from(newFiles ?? [])])
-              }
+              onChange={(newFiles) => {
+                if (!newFiles) {
+                  return
+                }
+
+                setAddQueue((prev) => [
+                  ...prev,
+                  ...Array.from(newFiles).map((file) => ({
+                    file,
+                    id: undefined,
+                  })),
+                ])
+              }}
             />
           </Card>
         )}
@@ -135,44 +182,40 @@ const ExampleCapture = ({ id, src }: { id: string; src: string }) => (
 
 const AddedExampleCapture = ({
   deploymentId,
-  index,
   file,
-  onUploaded,
+  index,
+  onCancel,
+  onSuccess,
 }: {
   deploymentId: string
-  file: File
   index: number
-  onUploaded: () => void
+  file: File
+  onCancel: () => void
+  onSuccess: (id: string) => void
 }) => {
-  const { uploadCapture, isLoading, isSuccess, error } =
-    useUploadCapture(onUploaded)
-
+  const { uploadCapture, error } = useUploadCapture(onSuccess)
   const { isValid, errorMessage, allowRetry } = useCaptureError({
     error,
     file,
     index,
   })
 
   useEffect(() => {
-    if (!isValid || isSuccess) {
+    if (!isValid) {
       return
     }
 
+    // Trigger capture upload on component mount
     uploadCapture({ deploymentId, file })
   }, [])
 
-  if (isSuccess) {
-    return null
-  }
-
   return (
     <Card>
       <div className={styles.cardContent}>
         <img src={URL.createObjectURL(file)} />
       </div>
       <div className={styles.cardContent}>
-        {isLoading ? <LoadingSpinner size={32} /> : null}
-        {errorMessage && (
+        {errorMessage ? (
           <>
             <Tooltip content={errorMessage}>
               {allowRetry ? (
@@ -194,10 +237,12 @@ const AddedExampleCapture = ({
               <IconButton
                 icon={IconType.Cross}
                 shape={IconButtonShape.Round}
-                onClick={onUploaded}
+                onClick={onCancel}
               />
             </div>
           </>
+        ) : (
+          <LoadingSpinner size={32} />
         )}
       </div>
     </Card>