How to use react-tinacms - 10 common examples

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],

.then((git: any) => {
        // Parse the JSON into a JsonForm data structure and store it in state.
        let rawJson = JSON.parse(git.content)
        setValuesInGit({ jsonNode, rawJson })
      })
      .catch((e: any) => {
        console.log('FAILED', e)
      })
  }, [id])

  const fields = formOptions.fields || generateFields(valuesOnDisk.rawJson)

  // TODO: This may not be necessary.
  fields.push({ name: 'jsonNode', component: null })

  const [values, form] = useCMSForm(
    {
      id,
      label,
      initialValues: valuesInGit,
      fields,
      onSubmit(data) {
        return cms.api.git.onSubmit!({
          files: [data.fileRelativePath],
          message: data.__commit_message || 'Tina commit',
          name: data.__commit_name,
          email: data.__commit_email,
        })
      },
      reset() {
        return cms.api.git.reset({ files: [id] })
      },

// Parse the JSON into a JsonForm data structure and store it in state.
        const rawJson = JSON.parse(git.content)
        setValuesInGit({ jsonNode, rawJson })
      })
      .catch((e: any) => {
        console.log('FAILED', e)
      })
  }, [id])

  const fields = formOptions.fields || generateFields(valuesOnDisk.rawJson)

  // TODO: This may not be necessary.
  fields.push({ name: 'jsonNode', component: null })

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const [, form] = useCMSForm(
    {
      id,
      label,
      initialValues: valuesInGit,
      fields,
      onSubmit(data) {
        return cms.api.git.onSubmit!({
          files: [data.fileRelativePath],
          message: data.__commit_message || 'Tina commit',
          name: data.__commit_name,
          email: data.__commit_email,
        })
      },
      reset() {
        return cms.api.git.reset({ files: [id] })
      },

// Parse the JSON into a JsonForm data structure and store it in state.
        const rawJson = JSON.parse(git.content)
        setValuesInGit({ jsonNode, rawJson })
      })
      .catch((e: any) => {
        console.log('FAILED', e)
      })
  }, [id])

  const fields = formOptions.fields || generateFields(valuesOnDisk.rawJson)

  // TODO: This may not be necessary.
  fields.push({ name: 'jsonNode', component: null })

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const [, form] = useForm(
    {
      id,
      label,
      initialValues: valuesInGit,
      fields,
      onSubmit(data) {
        return cms.api.git.onSubmit!({
          files: [data.jsonNode.fileRelativePath],
          message: data.__commit_message || 'Tina commit',
          name: data.__commit_name,
          email: data.__commit_email,
        })
      },
      reset() {
        return cms.api.git.reset({ files: [id] })
      },

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],
        message: data.__commit_message || 'commit from tina',
        name: data.__commit_name,
        email: data.__commit_email || 'ncphillips.19@gmail.com',
      })
    },

field.name === 'frontmatter' ||
        field.name.startsWith('frontmatter.')
      ) {
        return {
          ...field,
          name: field.name.replace('frontmatter', 'rawFrontmatter'),
        }
      }
      return field
    })

    return fields
  }, [formOverrrides.fields])

  /* eslint-disable-next-line react-hooks/rules-of-hooks */
  const [, form] = useCMSForm(
    {
      label,
      id,
      initialValues: valuesInGit,
      fields,
      onSubmit(data) {
        return cms.api.git.onSubmit!({
          files: [data.fileRelativePath],
          message: data.__commit_message || 'Tina commit',
          name: data.__commit_name,
          email: data.__commit_email,
        })
      },
      reset() {
        return cms.api.git.reset({ files: [id] })
      },

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]
  )