stacker.news/components/mute.js

58 lines
1.5 KiB
JavaScript

import { createContext, useContext } from 'react'
import { useMutation } from '@apollo/client'
import { gql } from 'graphql-tag'
import Dropdown from 'react-bootstrap/Dropdown'
import { useToast } from './toast'
const MuteUserContext = createContext(() => ({
refetchQueries: []
}))
export const MuteUserContextProvider = ({ children, value }) => {
return (
<MuteUserContext.Provider value={value}>
{children}
</MuteUserContext.Provider>
)
}
export const useMuteUserContext = () => useContext(MuteUserContext)
export default function MuteDropdownItem ({ user: { name, id, meMute } }) {
const toaster = useToast()
const { refetchQueries } = useMuteUserContext()
const [toggleMute] = useMutation(
gql`
mutation toggleMute($id: ID!) {
toggleMute(id: $id) {
meMute
}
}`, {
refetchQueries,
update (cache, { data: { toggleMute } }) {
cache.modify({
id: `User:${id}`,
fields: {
meMute: () => toggleMute.meMute
}
})
}
}
)
return (
<Dropdown.Item
onClick={async () => {
try {
await toggleMute({ variables: { id } })
toaster.success(`${meMute ? 'un' : ''}muted ${name}`)
} catch (err) {
console.error(err)
toaster.danger(err.message ?? `failed to ${meMute ? 'un' : ''}mute ${name}`)
}
}}
>
{`${meMute ? 'un' : ''}mute ${name}`}
</Dropdown.Item>
)
}