0ee056b2a1
* Prototype of toast system * More toast adoption * share * flag * bookmark * subscribe * delete * More toast usage: * forms * settings save * Log error during flag failure * Incorporate PR feedback: 1. return `toaster` from `useToast` hook, with simplified `success` and `danger` methods 2. remove toast header, move close button to body 3. change how toast ids are generated to use a global incrementing int 4. update toast messages * PR feedback: * reduce width of toast on narrow screens * dynamic delete success toast message based on deleted type * add toasts to auth methods deletion operations * Dismiss all toasts upon page navigation * refine style and use delay prop * more styling --------- Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com> Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>
54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
import { gql, useMutation } from '@apollo/client'
|
|
import Dropdown from 'react-bootstrap/Dropdown'
|
|
import FundError from './fund-error'
|
|
import { useShowModal } from './modal'
|
|
import { useToast } from './toast'
|
|
|
|
export default function DontLikeThisDropdownItem ({ id }) {
|
|
const toaster = useToast()
|
|
const showModal = useShowModal()
|
|
|
|
const [dontLikeThis] = useMutation(
|
|
gql`
|
|
mutation dontLikeThis($id: ID!) {
|
|
dontLikeThis(id: $id)
|
|
}`, {
|
|
update (cache) {
|
|
cache.modify({
|
|
id: `Item:${id}`,
|
|
fields: {
|
|
meDontLike () {
|
|
return true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
)
|
|
|
|
return (
|
|
<Dropdown.Item
|
|
onClick={async () => {
|
|
try {
|
|
await dontLikeThis({
|
|
variables: { id },
|
|
optimisticResponse: { dontLikeThis: true }
|
|
})
|
|
toaster.success('item flagged')
|
|
} catch (error) {
|
|
console.error(error)
|
|
if (error.toString().includes('insufficient funds')) {
|
|
showModal(onClose => {
|
|
return <FundError onClose={onClose} />
|
|
})
|
|
} else {
|
|
toaster.danger('failed to flag item')
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
flag
|
|
</Dropdown.Item>
|
|
)
|
|
}
|