fix(BOOK-478): convert to image vault asset and remove useEffect max depth error

remix/app/components/ImageVaultDAM.tsx

@@ -7,16 +7,12 @@ import {
   FieldLabel,
   cbModal,
 } from "@contentstack/venus-components"
-import {
-  getImageVaultAssetFromData,
-  isInsertResponse,
-  openImageVault,
-} from "~/utils/imagevault"
+import { 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 { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
+import type { ImageVaultAsset } from "~/types/imagevault"
 import type { Lang } from "~/types/lang"
 import type {
   EntryDataPublishDetails,
@@ -27,7 +23,7 @@ import FullSizeImage from "./FullSizeImage"
 export type ImageVaultDAMProps = {
   sdk: UiLocation
   config: ImageVaultDAMConfig
-  initialData: ImageVaultAsset | InsertResponse | null
+  imageVaultAsset: ImageVaultAsset | null
 }
 
 type DAMButtonProps = { onClick: () => void }
@@ -115,9 +111,8 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
 export default function ImageVaultDAM({
   sdk,
   config,
-  initialData,
+  imageVaultAsset,
 }: ImageVaultDAMProps) {
-  const imageVaultAsset = getImageVaultAssetFromData(initialData)
   const [media, setMedia] = useState(imageVaultAsset)
 
   const field = sdk.location.CustomField?.field
@@ -176,18 +171,16 @@ export default function ImageVaultDAM({
     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>
   }
 
+  const fieldData = field.getData()
+
+  if (isInsertResponse(fieldData)) {
+    field.setData(imageVaultAsset)
+  }
+
   const entryData: EntryDataPublishDetails = {
     //TODO: Add support for branches
     branch: "main",

remix/app/routes/field.tsx

@@ -9,8 +9,11 @@ import InvalidConfig from "~/components/InvalidConfig"
 
 import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
 import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
-import type { InsertResponse } from "~/types/imagevault"
-import { isImageVaultDAMConfig } from "~/utils/imagevault"
+import type { ImageVaultAsset, InsertResponse } from "~/types/imagevault"
+import {
+  getImageVaultAssetFromData,
+  isImageVaultDAMConfig,
+} from "~/utils/imagevault"
 
 const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
 
@@ -25,7 +28,9 @@ function FieldContent({ sdk, appConfig }: FieldContentProps) {
   )
 
   const [showDisclaimer, setShowDisclaimer] = useState(false)
-  const [fieldData, setFieldData] = useState<InsertResponse | null>()
+  const [fieldData, setFieldData] = useState<
+    InsertResponse | ImageVaultAsset | null
+  >()
   const [dataIsLoaded, setDataIsLoaded] = useState(false)
 
   const entry = sdk?.location.CustomField?.entry
@@ -76,9 +81,17 @@ function FieldContent({ sdk, appConfig }: FieldContentProps) {
   const fieldConfig = sdk.location.CustomField?.fieldConfig
   const config = { ...appConfig, ...fieldConfig }
 
+  // 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 entry.
+  const imageVaultAsset = getImageVaultAssetFromData(initialData)
+
   return (
     <Suspense fallback={<p>Loading field...</p>}>
-      <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+      <ImageVaultDAM
+        config={config}
+        sdk={sdk}
+        imageVaultAsset={imageVaultAsset}
+      />
     </Suspense>
   )
 }