53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { addQueryArgs } from '@wordpress/url'
|
|
import React, { useState } from 'react'
|
|
import { __ } from '@wordpress/i18n'
|
|
import { useRestAPI } from '../../../hooks/useRestAPI'
|
|
import { Button } from '../../common/Button'
|
|
import { ConfirmDialog } from '../../common/ConfirmDialog'
|
|
import { useSnippetForm } from '../../../hooks/useSnippetForm'
|
|
|
|
export const DeleteButton: React.FC = () => {
|
|
const { snippetsAPI } = useRestAPI()
|
|
const { snippet, setIsWorking, isWorking, handleRequestError } = useSnippetForm()
|
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
id="delete-snippet"
|
|
className="delete-button"
|
|
disabled={isWorking}
|
|
onClick={() => {
|
|
setIsDialogOpen(true)
|
|
}}
|
|
>
|
|
{__('Delete', 'code-snippets')}
|
|
</Button>
|
|
|
|
<ConfirmDialog
|
|
open={isDialogOpen}
|
|
title={__('Delete?', 'code-snippets')}
|
|
confirmLabel={__('Delete', 'code-snippets')}
|
|
confirmButtonClassName="is-destructive"
|
|
onCancel={() => setIsDialogOpen(false)}
|
|
onConfirm={() => {
|
|
setIsDialogOpen(false)
|
|
setIsWorking(true)
|
|
|
|
snippetsAPI.delete(snippet)
|
|
.then(() => {
|
|
setIsWorking(false)
|
|
window.location.replace(addQueryArgs(window.CODE_SNIPPETS?.urls.manage, { result: 'deleted' }))
|
|
})
|
|
.catch((error: unknown) => handleRequestError(error, __('Could not delete snippet.', 'code-snippets')))
|
|
}}
|
|
>
|
|
<p style={{ marginBlockStart: 0 }}>
|
|
{__('You are about to delete this snippet.', 'code-snippets')}{' '}
|
|
{__('Are you sure?', 'code-snippets')}
|
|
</p>
|
|
</ConfirmDialog>
|
|
</>
|
|
)
|
|
}
|