58 lines
1.5 KiB
JavaScript
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>
|
|
)
|
|
}
|