contentstack-imagevault/remix/app/hooks/useApp.ts

import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import { useEffect, useRef, useState } from "react"

export class SDKLoadingError extends Error {}

export default function useApp() {
  const ref = useRef<HTMLDivElement>(null)
  const [, setError] = useState()
  const [sdk, setSdk] = useState<UiLocation>()
  const [config, setConfig] = useState<Record<string, string>>()

  useEffect(() => {
    async function init() {
      try {
        const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
          .default
        const initSdk = await ContentstackAppSDK.init()
        setSdk(initSdk)

        const config = await initSdk.getConfig()
        setConfig(config)

        window.iframeRef = ref.current
        window.postRobot = initSdk.postRobot
      } catch (e) {
        let err: Error
        if (e instanceof Error) {
          err = new SDKLoadingError(e.message)
        }

        // Error boundaries do not support async functions. Workaround:
        // https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
        setError(() => {
          throw err
        })
      }
    }

    init()
  }, [setSdk, setConfig])

  return {
    sdk,
    config,
    ref,
  }
}