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

remix/app/components/ImageVaultDAM.tsx

@@ -7,12 +7,16 @@ import {
   FieldLabel,
   cbModal,
 } from "@contentstack/venus-components"
-import { isInsertResponse, openImageVault } from "~/utils/imagevault"
+import {
+  getImageVaultAssetFromData,
+  isInsertResponse,
+  openImageVault,
+} from "~/utils/imagevault"
 import ImageEditModal from "./ImageEditModal"
 
 import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
 import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
-import type { InsertResponse } from "~/types/imagevault"
+import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
 import type { Lang } from "~/types/lang"
 import type {
   EntryDataPublishDetails,
@@ -23,7 +27,7 @@ import FullSizeImage from "./FullSizeImage"
 export type ImageVaultDAMProps = {
   sdk: UiLocation
   config: ImageVaultDAMConfig
-  initialData: InsertResponse | null
+  initialData: ImageVaultAsset | InsertResponse | null
 }
 
 type DAMButtonProps = { onClick: () => void }
@@ -47,30 +51,26 @@ function DAMButton({ onClick }: DAMButtonProps) {
 }
 
 type MediaProps = {
-  media: InsertResponse
+  media: ImageVaultAsset
   onDelete: () => void
   onEdit: () => void
 }
 
 function Media({ media, onDelete, onEdit }: MediaProps) {
-  // MediaConversions is an array but will only contain one object
-  const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
-    media.MediaConversions[0]
+  const { url, meta, dimensions } = media
+  const { width, height, aspectRatio } = dimensions
+  const assetUrl = media.url
+  const assetTitle = `Id: ${media.imageVaultId} - ${media.fileName}`
 
-  const assetUrl = Url
-  const title = `Id: ${media.Id} - ${media.Name}`
-  const width = FormatWidth || Width
-  const height = FormatHeight || Height
-  const alt =
-    media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
-    Name
+  const alt = meta.alt || meta.caption || ""
+  const title = meta.caption || meta.alt || ""
 
   return (
-    <div key={Url} style={{ fontFamily: "Inter" }}>
+    <div key={url} style={{ fontFamily: "Inter" }}>
       <AssetCardVertical
         assetType="image"
         assetUrl={assetUrl}
-        title={title}
+        title={assetTitle}
         version="v2"
         width={width}
         height={height}
@@ -84,10 +84,10 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                 <FullSizeImage
                   // eslint-disable-next-line react/prop-types
                   onClose={props.closeModal}
-                  imageUrl={Url}
+                  imageUrl={url}
                   alt={alt}
-                  title={Name}
-                  aspectRatio={AspectRatio}
+                  title={title}
+                  aspectRatio={aspectRatio}
                 />
               )
             },
@@ -117,7 +117,8 @@ export default function ImageVaultDAM({
   config,
   initialData,
 }: ImageVaultDAMProps) {
-  const [media, setMedia] = useState<InsertResponse | null>(initialData)
+  const imageVaultAsset = getImageVaultAssetFromData(initialData)
+  const [media, setMedia] = useState(imageVaultAsset)
 
   const field = sdk.location.CustomField?.field
   const frame = sdk.location.CustomField?.frame
@@ -133,12 +134,10 @@ export default function ImageVaultDAM({
   }, [frame])
 
   const handleMedia = useCallback(
-    (result?: InsertResponse) => {
+    (asset?: ImageVaultAsset) => {
       if (field) {
         flushSync(() => {
-          const data = result
-            ? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
-            : null
+          const data = asset || null
           setMedia(data)
           field.setData(data)
           document.body.style.overflow = "hidden"
@@ -150,13 +149,9 @@ export default function ImageVaultDAM({
     [field, updateFrameHeight]
   )
 
-  useEffect(() => {
-    updateFrameHeight()
-  }, [updateFrameHeight])
-
   const handleEdit = useCallback(() => {
-    const fieldData = field?.getData() as InsertResponse
-    if (isInsertResponse(fieldData)) {
+    const fieldData = field?.getData()
+    if (fieldData) {
       cbModal({
         // @ts-expect-error: Component is badly typed
         component: (compProps) => (
@@ -177,6 +172,18 @@ export default function ImageVaultDAM({
     }
   }, [field, handleMedia])
 
+  useEffect(() => {
+    updateFrameHeight()
+  }, [updateFrameHeight])
+
+  // The existing data might still be in InsertResponse format if the user has not edited it yet.
+  // We'll convert it to ImageVaultAsset when the user edits the the emtry.
+  useEffect(() => {
+    if (isInsertResponse(initialData) && imageVaultAsset) {
+      handleMedia(imageVaultAsset)
+    }
+  }, [initialData, imageVaultAsset, handleMedia])
+
   if (!field || !frame || !entry || !stack) {
     return <p>Initializing custom field...</p>
   }