diff --git a/remix/app/components/ImageVaultDAM.tsx b/remix/app/components/ImageVaultDAM.tsx index 196264c..8b49d25 100644 --- a/remix/app/components/ImageVaultDAM.tsx +++ b/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
Initializing custom field...
} + const fieldData = field.getData() + + if (isInsertResponse(fieldData)) { + field.setData(imageVaultAsset) + } + const entryData: EntryDataPublishDetails = { //TODO: Add support for branches branch: "main", diff --git a/remix/app/routes/field.tsx b/remix/app/routes/field.tsx index 36ed3db..1419669 100644 --- a/remix/app/routes/field.tsx +++ b/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