feat(SW-2541): Changed asset types to only add the data needed

remix/app/components/ImageEditModal.tsx

@@ -11,11 +11,11 @@ import {
 import { ChangeEvent, useEffect, useState } from "react"
 
 import FocalPointPicker from "~/shared-components/FocalPointPicker"
-import type { FocalPoint, InsertResponse } from "~/types/imagevault"
+import type { FocalPoint, ImageVaultAsset } from "~/types/imagevault"
 
 type ImageEditModalProps = {
-  fieldData: InsertResponse
-  setData: (data: InsertResponse) => void
+  fieldData: ImageVaultAsset
+  setData: (data: ImageVaultAsset) => void
   closeModal: () => void
 }
 
@@ -28,47 +28,33 @@ export default function ImageEditModal({
   const [caption, setCaption] = useState("")
   const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })
 
-  const assetUrl = fieldData.MediaConversions[0].Url
+  const assetUrl = fieldData.url
 
   useEffect(() => {
-    if (fieldData.Metadata && fieldData.Metadata.length) {
-      const altText = fieldData.Metadata.find((meta) =>
-        meta.Name.includes("AltText_")
-      )?.Value
-
-      const caption = fieldData.Metadata.find((meta) =>
-        meta.Name.includes("Title_")
-      )?.Value
-
-      setAltText(altText ?? "")
-      setCaption(caption ?? "")
+    if (fieldData.meta.alt) {
+      setAltText(fieldData.meta.alt)
     }
-  }, [fieldData.Metadata])
+    if (fieldData.meta.caption) {
+      setCaption(fieldData.meta.caption)
+    }
+  }, [fieldData.meta])
 
   useEffect(() => {
-    if (fieldData.FocalPoint) {
-      setFocalPoint(fieldData.FocalPoint)
+    if (fieldData.focalPoint) {
+      setFocalPoint(fieldData.focalPoint)
     }
-  }, [fieldData.FocalPoint])
+  }, [fieldData.focalPoint])
 
   function handleSave() {
-    const metaData = fieldData.Metadata ?? []
-
-    const newMetadata = metaData.map((meta) => {
-      if (meta.Name.includes("AltText_")) {
-        return { ...meta, Value: altText }
-      }
-      if (meta.Name.includes("Title_")) {
-        return { ...meta, Value: caption }
-      }
-      return meta
-    })
-
-    setData({
+    const newData = {
       ...fieldData,
-      Metadata: newMetadata,
-      FocalPoint: focalPoint,
-    })
+      meta: {
+        alt: altText,
+        caption,
+      },
+      focalPoint,
+    }
+    setData(newData)
     closeModal()
   }
 
@@ -132,7 +118,11 @@ export default function ImageEditModal({
 
           <FieldComponent>
             <FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
-            <TextInput value={fieldData.Id} name="imageVaultId" disabled />
+            <TextInput
+              value={fieldData.imageVaultId}
+              name="imageVaultId"
+              disabled
+            />
           </FieldComponent>
         </div>
       </ModalBody>