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>
41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import { useMutation } from '@apollo/client'
|
|
import { gql } from 'graphql-tag'
|
|
import Dropdown from 'react-bootstrap/Dropdown'
|
|
import { useToast } from './toast'
|
|
|
|
export default function BookmarkDropdownItem ({ item: { id, meBookmark } }) {
|
|
const toaster = useToast()
|
|
const [bookmarkItem] = useMutation(
|
|
gql`
|
|
mutation bookmarkItem($id: ID!) {
|
|
bookmarkItem(id: $id) {
|
|
meBookmark
|
|
}
|
|
}`, {
|
|
update (cache, { data: { bookmarkItem } }) {
|
|
cache.modify({
|
|
id: `Item:${id}`,
|
|
fields: {
|
|
meBookmark: () => bookmarkItem.meBookmark
|
|
}
|
|
})
|
|
}
|
|
}
|
|
)
|
|
return (
|
|
<Dropdown.Item
|
|
onClick={async () => {
|
|
try {
|
|
await bookmarkItem({ variables: { id } })
|
|
toaster.success(meBookmark ? 'bookmark removed' : 'bookmark added')
|
|
} catch (err) {
|
|
console.error(err)
|
|
toaster.danger(meBookmark ? 'failed to remove bookmark' : 'failed to bookmark')
|
|
}
|
|
}}
|
|
>
|
|
{meBookmark ? 'remove bookmark' : 'bookmark'}
|
|
</Dropdown.Item>
|
|
)
|
|
}
|