Button that sets some field null

For example you have a datetime field when you want to contact someone. And want to mark it as done. Easiest way is to just set this field to null. So here's a code to do just that.

SetNullButton.tsx

Put into /components
import { ReactNode } from 'react'
import { Button, ButtonProps, SugarableRelativeSingleField, useField, usePersistWithFeedback } from '@contember/admin'
export type SetNullButtonProps = {
children: ReactNode
field: string | SugarableRelativeSingleField
immediatePersist?: boolean
} & ButtonProps
export const SetNullButton = ({ children, field, immediatePersist, ...buttonProps }: SetNullButtonProps) => {
const fieldAccessor = useField(field)
const triggerPersist = usePersistWithFeedback()
if (fieldAccessor.value === null) {
return null
}
return <>
<Button {...buttonProps} onClick={e => {
e.preventDefault()
e.stopPropagation()
fieldAccessor.getAccessor().updateValue(null)
if (immediatePersist) {
triggerPersist().catch(() => { })
}
}}>
{children}
</Button>
</>
}

AnyFile.tsx

Usage of the component above
...
<SetNullButton field="nextContactDate" immediatePersist>
Mark done
</SetNullButton>
...