70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { Suspense, lazy, useEffect, useState } from "react";
|
|
import { useScript } from "usehooks-ts";
|
|
import useApp from "~/hooks/useApp";
|
|
|
|
import Disclaimer from "~/components/Disclaimer";
|
|
import InvalidConfig from "~/components/InvalidConfig";
|
|
|
|
import { isImageVaultDAMConfig } from "~/utils/imagevault";
|
|
import type { InsertResponse } from "~/types/imagevault";
|
|
|
|
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"));
|
|
|
|
export default function Field() {
|
|
const { sdk, config } = useApp();
|
|
const ivStatus = useScript(
|
|
"/scripts/imagevault-insert-media/insertmediawindow.min.js"
|
|
);
|
|
|
|
const [showDisclaimer, setShowDisclaimer] = useState(false);
|
|
const [fieldData, setFieldData] = useState<InsertResponse>();
|
|
|
|
const entry = sdk?.location.CustomField?.entry;
|
|
const field = sdk?.location.CustomField?.field;
|
|
|
|
useEffect(() => {
|
|
// If we can get field data from the SDK that means the entry has been
|
|
// saved at least once. If this is true, we are guaranteed entry UID.
|
|
// Entry that has not been saved does not have a entry UID and therefore
|
|
// cannot be referred to by ImageVault. Entry title is also required by us.
|
|
try {
|
|
if (field && entry) {
|
|
const data = field.getData();
|
|
const title = entry.getField("title").getData().toString();
|
|
if (data && title) {
|
|
setFieldData(data as InsertResponse);
|
|
} else {
|
|
throw new Error("Missing data or title for entry");
|
|
}
|
|
}
|
|
} catch (e) {
|
|
setShowDisclaimer(true);
|
|
}
|
|
}, [entry, field]);
|
|
|
|
if (showDisclaimer) {
|
|
return <Disclaimer />;
|
|
}
|
|
|
|
const loaded = !!(fieldData && ivStatus === "ready" && sdk && config);
|
|
|
|
const initialData =
|
|
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null;
|
|
|
|
if (!loaded) {
|
|
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>;
|
|
}
|
|
|
|
return (
|
|
<div id="field">
|
|
{isImageVaultDAMConfig(config) ? (
|
|
<Suspense fallback={<p>Loading field...</p>}>
|
|
<ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
|
|
</Suspense>
|
|
) : (
|
|
<InvalidConfig />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|