104 lines
2.6 KiB
JavaScript
104 lines
2.6 KiB
JavaScript
import Dropdown from 'react-bootstrap/Dropdown'
|
|
import { useShowModal } from './modal'
|
|
import { useToast } from './toast'
|
|
import ItemAct from './item-act'
|
|
import AccordianItem from './accordian-item'
|
|
import Flag from '@/svgs/flag-fill.svg'
|
|
import { useMemo } from 'react'
|
|
import getColor from '@/lib/rainbow'
|
|
import { gql, useMutation } from '@apollo/client'
|
|
|
|
export function DownZap ({ item, ...props }) {
|
|
const { meDontLikeSats } = item
|
|
const style = useMemo(() => (meDontLikeSats
|
|
? {
|
|
fill: getColor(meDontLikeSats),
|
|
filter: `drop-shadow(0 0 6px ${getColor(meDontLikeSats)}90)`
|
|
}
|
|
: undefined), [meDontLikeSats])
|
|
return (
|
|
<DownZapper item={item} As={({ ...oprops }) => <Flag {...props} {...oprops} style={style} />} />
|
|
)
|
|
}
|
|
|
|
function DownZapper ({ item, As, children }) {
|
|
const toaster = useToast()
|
|
const showModal = useShowModal()
|
|
|
|
return (
|
|
<As
|
|
onClick={async () => {
|
|
try {
|
|
showModal(onClose =>
|
|
<ItemAct
|
|
onClose={onClose} item={item} down
|
|
>
|
|
<AccordianItem
|
|
header='what is a downzap?' body={
|
|
<ul>
|
|
<li>downzaps are just like zaps but cause items to lose ranking position</li>
|
|
<li>downzaps also reduce trust between you and whoever zaps it so you'll see less of what they zap in the future</li>
|
|
<li>all sats from downzaps go to rewards</li>
|
|
</ul>
|
|
}
|
|
/>
|
|
</ItemAct>)
|
|
} catch (error) {
|
|
toaster.danger('failed to downzap item')
|
|
}
|
|
}}
|
|
>
|
|
{children}
|
|
</As>
|
|
)
|
|
}
|
|
|
|
export default function DontLikeThisDropdownItem ({ item }) {
|
|
return (
|
|
<DownZapper
|
|
As={Dropdown.Item}
|
|
item={item}
|
|
>
|
|
<span className='text-danger'>downzap</span>
|
|
</DownZapper>
|
|
)
|
|
}
|
|
|
|
export function OutlawDropdownItem ({ item }) {
|
|
const toaster = useToast()
|
|
|
|
const [toggleOutlaw] = useMutation(
|
|
gql`
|
|
mutation toggleOutlaw($id: ID!) {
|
|
toggleOutlaw(id: $id) {
|
|
outlawed
|
|
}
|
|
}`, {
|
|
update (cache, { data: { toggleOutlaw } }) {
|
|
cache.modify({
|
|
id: `Item:${item.id}`,
|
|
fields: {
|
|
outlawed: () => true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
)
|
|
|
|
return (
|
|
<Dropdown.Item onClick={async () => {
|
|
try {
|
|
await toggleOutlaw({ variables: { id: item.id } })
|
|
} catch {
|
|
toaster.danger('failed to outlaw')
|
|
return
|
|
}
|
|
|
|
toaster.success('item outlawed')
|
|
}}
|
|
>
|
|
outlaw
|
|
</Dropdown.Item>
|
|
)
|
|
}
|