How to use the react-tinacms.useCMS function in react-tinacms

export function useMarkdownForm(
  markdownRemark: Markdown,
  formOverrrides: FormOptions
) {
  const cms = useCMS()

  // let throttledOnChange = React.useMemo(() => {
  // return throttle(cms.api.git.onChange, 300)
  // }, [])
  const [values, form] = useLocalForm({
    label: markdownRemark.path,
    id: markdownRemark.path,
    initialValues: markdownRemark,
    async onSubmit(data) {
      console.log({ data })
      await cms.api.git.onChange!({
        fileRelativePath: data.path,
        content: toMarkdownString(data),
      })
      return await cms.api.git.onSubmit!({
        files: [data.path],

jsonNode: JsonNode | null,
  formOptions: Partial> = {}
): [JsonNode | null, Form | null] {
  /**
   * We're returning early here which means all the hooks called by this hook
   * violate the rules of hooks. In the case of the check for
   * `NODE_ENV === 'production'` this should be a non-issue because NODE_ENV
   * will never change at runtime.
   */
  if (!jsonNode || process.env.NODE_ENV === 'production') {
    return [jsonNode, null]
  }
  validateJsonNode(jsonNode)

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const cms = useCMS()
  const label = formOptions.label || jsonNode.fileRelativePath
  const id = jsonNode.fileRelativePath

  /**
   * The state of the JsonForm, generated from the contents of the
   * Json file currently on disk. This state will contain any
   * un-committed changes in the Json file.
   */
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const valuesOnDisk = useMemo(
    () => ({
      jsonNode: jsonNode,
      rawJson: JSON.parse(jsonNode.rawJson),
    }),
    [jsonNode]
  )

formOverrrides: Partial> = {}
) {
  /**
   * We're returning early here which means all the hooks called by this hook
   * violate the rules of hooks. In the case of the check for
   * `NODE_ENV === 'production'` this should be a non-issue because NODE_ENV
   * will never change at runtime.
   */
  if (!markdownRemark || process.env.NODE_ENV === 'production') {
    return [markdownRemark, null]
  }

  validateMarkdownRemark(markdownRemark)

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const cms = useCMS()
  const label = formOverrrides.label || markdownRemark.frontmatter.title
  const id = markdownRemark.fileRelativePath

  /**
   * The state of the RemarkForm, generated from the contents of the
   * Markdown file currently on disk. This state will contain any
   * un-committed changes in the Markdown file.
   */
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const valuesOnDisk = useMemo(
    () => ({
      fileRelativePath: markdownRemark.fileRelativePath,
      frontmatter: markdownRemark.frontmatter,
      rawMarkdownBody: markdownRemark.rawMarkdownBody,
      rawFrontmatter: JSON.parse(markdownRemark.rawFrontmatter),
    }),

export const ImageField = wrapFieldsWithMeta(props => {
  const cms = useCMS()

  return (
     {
        acceptedFiles.forEach(async (file: any) => {
          // @ts-ignore
          await cms.api.git!.onUploadMedia!({
            directory: props.field.uploadDir(props.form.getState().values),
            content: file,
          })
          props.input.onChange(file.name)
        })
      }}
    />

formOptions: Partial> = {}
) {
  /**
   * We're returning early here which means all the hooks called by this hook
   * violate the rules of hooks. In the case of the check for
   * `NODE_ENV === 'production'` this should be a non-issue because NODE_ENV
   * will never change at runtime.
   */
  if (!jsonNode || process.env.NODE_ENV === 'production') {
    return [jsonNode, null]
  }

  validateJsonNode(jsonNode)

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const cms = useCMS()
  const label = jsonNode.fileRelativePath
  const id = jsonNode.fileRelativePath

  /**
   * The state of the JsonForm, generated from the contents of the
   * Json file currently on disk. This state will contain any
   * un-committed changes in the Json file.
   */
  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const valuesOnDisk = useMemo(
    () => ({
      jsonNode: jsonNode,
      rawJson: JSON.parse(jsonNode.rawJson),
    }),
    [jsonNode]
  )

export function useJsonForm(
  jsonNode: JsonNode,
  formOptions: Partial> = {}
) {
  if (!jsonNode || process.env.NODE_ENV === 'production') {
    return [{}, null]
  }
  validateJsonNode(jsonNode)

  const cms = useCMS()
  const label = jsonNode.fileRelativePath
  const id = jsonNode.fileRelativePath

  /**
   * The state of the JsonForm, generated from the contents of the
   * Json file currently on disk. This state will contain any
   * un-committed changes in the Json file.
   */
  const valuesOnDisk = useMemo(
    () => ({
      jsonNode: jsonNode,
      rawJson: JSON.parse(jsonNode.rawJson),
    }),
    [jsonNode]
  )

export default function Page(props) {

  let cms = useCMS()

  let [post, form] = useCMSForm({
    id: props.fileRelativePath,
    label: "blogpost",
    initialValues: {
      title: props.title
    },
    fields: [
      {
        name: "title",
        component: "text"
      }
    ],
  })

  let writeToDisk = React.useCallback(formState => {

export function DeleteAction({ form }: { form: Form }) {
  const cms = useCMS()
  return (
     {
        if (
          !confirm(
            `Are you sure you want to delete ${form.values.fileRelativePath}?`
          )
        ) {
          return
        }
        await cms.api.git.onDelete!({
          relPath: form.values.fileRelativePath,
        })

        window.history.back()
      }}