How to use @sanity/react-hooks - 10 common examples

export default createAction(function PublishAction(docInfo) {
  if (docInfo.isLiveEditEnabled) {
    return null
  }

  const {publish} = useDocumentOperation(docInfo.id, docInfo.type)

  return {
    disabled: !docInfo.draft,
    label: 'Publish',
    handle: () => {
      publish(doc => omit(doc, 'reviewers'))
    }
  }
})

export default createAction(function SaveAction(docInfo) {
  const {commit} = useDocumentOperation(docInfo.id, docInfo.type)
  return {
    label: 'Save',
    onHandle: () => {
      commit.execute()
    }
  }
})

export default createAction(function AsyncAction(docInfo) {
  const [isWorking, setIsWorking] = React.useState(false)

  const {patch} = useDocumentOperation(docInfo.id, docInfo.type)

  return {
    disabled: isWorking,
    showActivityIndicator: isWorking,
    label: isWorking ? 'Working…' : 'Do some work!',
    onHandle: async () => {
      setIsWorking(true)
      const result = await doSomeWork(docInfo.id)
      patch.execute([set('randomNumber', result)])
      setIsWorking(false)
    }
  }
})

export default createAction(function WriteFieldAction({id, type, published, draft}) {
  const doc = draft || published

  const [isWriting, setIsWriting] = React.useState(false)
  const {patch} = useDocumentOperation(id, type)
  const currentTitle = (doc && doc.title) || ''
  return {
    label: `Edit title field of ${currentTitle}`,
    onHandle: () => {
      setIsWriting(true)
    },
    dialog: isWriting && (
      <>
        <h2>Edit title field</h2>
        <input value="{currentTitle}" type="text"> patch.execute([set('title', event.currentTarget.value)])}
        /&gt;
        <button> setIsWriting(false)}&gt;OK</button>

export default createAction(props => {
  return useObservable(
    timer(0, 1000).pipe(
      map(n => ({
        label: n % 2 === 0 ? 'Tick' : 'Tack'
      }))
    )
  )
})

export default createAction(function ObservableAction(docInfo) {
  return useObservable(
    timer(0, 1000).pipe(
      map(n => ({
        label: n % 2 === 0 ? 'Tick' : 'Tack'
      }))
    )
  )
})

export const DeleteAction = createAction(function DeleteAction({
  id,
  type,
  draft,
  published,
  onComplete
}) {
  const {delete: deleteOp}: any = useDocumentOperation(id, type)
  const [isDeleting, setIsDeleting] = React.useState(false)
  const [isConfirmDialogOpen, setConfirmDialogOpen] = React.useState(false)

  return {
    icon: TrashIcon,
    disabled: Boolean(deleteOp.disabled),
    title: deleteOp.disabled ? `Cannot delete: ${deleteOp.disabled}` : '',
    label: isDeleting ? 'Deleting…' : 'Delete',
    onHandle: () => {
      setConfirmDialogOpen(true)
    },
    dialog: isConfirmDialogOpen && {
      type: 'legacy',
      onClose: onComplete,
      title: 'Delete',
      content: (

export const DuplicateAction = createAction(function DuplicateAction({id, type, onComplete}) {
  const {duplicate}: any = useDocumentOperation(id, type)
  const router = useRouter()

  const [isDuplicating, setDuplicating] = React.useState(false)
  return {
    icon: ContentCopyIcon,
    disabled: Boolean(isDuplicating || duplicate.disabled),
    label: isDuplicating ? 'Duplicating…' : 'Duplicate',
    title: duplicate.disabled ? `Cannot duplicate: ${duplicate.disabled}` : 'Duplicate',
    onHandle: () => {
      setDuplicating(true)
      duplicate.execute().then(copy => {
        router.navigateIntent('edit', {id: getDraftId(copy._id), type: copy._type})
        onComplete()
      })
    }
  }

export const HistoryRestoreAction = createAction(function RestoreRevisionAction({
  id,
  type,
  historyId,
  revision,
  onComplete
}) {
  const {restoreFrom}: any = useDocumentOperation(id, type)
  const router = useRouter()

  return {
    label: 'Restore',
    onHandle: () => {
      restoreFrom.execute(historyId, revision).then(result => {
        router.navigateIntent('edit', {id, type, rev: result.transactionId})
        onComplete()
      })
    }
  }
})

export const WriteTitleAction = createAction(function PublishAction(docInfo) {
  if (docInfo.isLiveEditEnabled) {
    return null
  }

  const {patch, commit}: any = useDocumentOperation(docInfo.id, docInfo.type)

  return {
    label: 'Set title to foo!',
    onHandle: () => {
      patch.execute([{set: {title: 'foo'}}])
      commit.execute()
    }
  }
})