stacker.news/components/delete.js

98 lines
2.4 KiB
JavaScript

import { useMutation } from '@apollo/client'
import { gql } from 'graphql-tag'
import { useState } from 'react'
import Alert from 'react-bootstrap/Alert'
import Button from 'react-bootstrap/Button'
import Dropdown from 'react-bootstrap/Dropdown'
import { useShowModal } from './modal'
import { useToast } from './toast'
export default function Delete ({ itemId, children, onDelete, type = 'post' }) {
const showModal = useShowModal()
const [deleteItem] = useMutation(
gql`
mutation deleteItem($id: ID!) {
deleteItem(id: $id) {
text
title
url
pollCost
deletedAt
}
}`, {
update (cache, { data: { deleteItem } }) {
cache.modify({
id: `Item:${itemId}`,
fields: {
text: () => deleteItem.text,
title: () => deleteItem.title,
url: () => deleteItem.url,
pollCost: () => deleteItem.pollCost,
deletedAt: () => deleteItem.deletedAt
}
})
}
}
)
return (
<span
className='pointer' onClick={() => {
showModal(onClose => {
return (
<DeleteConfirm
type={type}
onConfirm={async () => {
const { error } = await deleteItem({ variables: { id: itemId } })
if (error) {
throw error
}
if (onDelete) {
onDelete()
}
onClose()
}}
/>
)
})
}}
>{children}
</span>
)
}
export function DeleteConfirm ({ onConfirm, type }) {
const [error, setError] = useState()
const toaster = useToast()
return (
<>
{error && <Alert variant='danger' onClose={() => setError(undefined)} dismissible>{error}</Alert>}
<p className='fw-bolder'>Are you sure? This is a gone forever kind of delete.</p>
<div className='d-flex justify-content-end'>
<Button
variant='danger' onClick={async () => {
try {
await onConfirm()
toaster.success(`deleted ${type.toLowerCase()}`)
} catch (e) {
setError(e.message || e)
}
}}
>delete
</Button>
</div>
</>
)
}
export function DeleteDropdownItem (props) {
return (
<Delete {...props}>
<Dropdown.Item>
delete
</Dropdown.Item>
</Delete>
)
}