stacker.news/components/upvote.js

269 lines
8.0 KiB
JavaScript
Raw Normal View History

2021-04-22 22:14:32 +00:00
import { LightningConsumer } from './lightning'
2021-12-05 17:37:55 +00:00
import UpBolt from '../svgs/bolt.svg'
2021-04-22 22:14:32 +00:00
import styles from './upvote.module.css'
import { gql, useMutation } from '@apollo/client'
import FundError from './fund-error'
2021-07-08 18:42:57 +00:00
import ActionTooltip from './action-tooltip'
import ItemAct from './item-act'
2021-09-12 16:55:38 +00:00
import { useMe } from './me'
import Rainbow from '../lib/rainbow'
2021-12-09 20:40:40 +00:00
import { useRef, useState } from 'react'
2021-10-30 16:52:24 +00:00
import LongPressable from 'react-longpressable'
2021-12-09 20:40:40 +00:00
import { Overlay, Popover } from 'react-bootstrap'
import { useShowModal } from './modal'
import { useRouter } from 'next/router'
2021-12-09 20:40:40 +00:00
const getColor = (meSats) => {
if (!meSats || meSats <= 10) {
return 'var(--secondary)'
}
const idx = Math.min(
Math.floor((Math.log(meSats) / Math.log(10000)) * (Rainbow.length - 1)),
2021-12-09 20:40:40 +00:00
Rainbow.length - 1)
return Rainbow[idx]
}
2022-04-12 21:09:12 +00:00
const UpvotePopover = ({ target, show, handleClose }) => {
const me = useMe()
return (
<Overlay
show={show}
target={target}
placement='right'
>
<Popover id='popover-basic'>
<Popover.Title className='d-flex justify-content-between alert-dismissible' as='h3'>Tipping
<button type='button' className='close' onClick={handleClose}><span aria-hidden='true'>×</span><span className='sr-only'>Close alert</span></button>
</Popover.Title>
<Popover.Content>
<div className='mb-2'>Press the bolt again to tip {me?.tipDefault || 1} more sat{me?.tipDefault > 1 ? 's' : ''}.</div>
<div>Repeatedly press the bolt to tip more sats.</div>
</Popover.Content>
</Popover>
</Overlay>
)
}
2021-12-09 20:40:40 +00:00
const TipPopover = ({ target, show, handleClose }) => (
<Overlay
show={show}
target={target}
placement='right'
>
<Popover id='popover-basic'>
<Popover.Title className='d-flex justify-content-between alert-dismissible' as='h3'>Press and hold
<button type='button' class='close' onClick={handleClose}><span aria-hidden='true'>×</span><span class='sr-only'>Close alert</span></button>
</Popover.Title>
<Popover.Content>
<div className='mb-2'>Press and hold bolt to tip a custom amount.</div>
<div>As you tip more, the bolt color follows the rainbow.</div>
2021-12-09 20:40:40 +00:00
</Popover.Content>
</Popover>
</Overlay>
)
2021-09-10 21:13:52 +00:00
export default function UpVote ({ item, className }) {
const showModal = useShowModal()
const router = useRouter()
2021-12-09 20:40:40 +00:00
const [voteShow, _setVoteShow] = useState(false)
const [tipShow, _setTipShow] = useState(false)
const ref = useRef()
2021-09-12 16:55:38 +00:00
const me = useMe()
2021-12-09 20:40:40 +00:00
const [setWalkthrough] = useMutation(
gql`
mutation setWalkthrough($upvotePopover: Boolean, $tipPopover: Boolean) {
setWalkthrough(upvotePopover: $upvotePopover, tipPopover: $tipPopover)
}`
)
const fwd2me = me && Number(me?.id) === item?.fwdUserId
2022-04-19 18:32:39 +00:00
2021-12-09 20:40:40 +00:00
const setVoteShow = (yes) => {
if (!me) return
// if they haven't seen the walkthrough and they have sats
if (yes && !me.upvotePopover && me.sats) {
_setVoteShow(true)
2021-12-09 20:40:40 +00:00
}
if (voteShow && !yes) {
_setVoteShow(false)
2021-12-09 20:40:40 +00:00
setWalkthrough({ variables: { upvotePopover: true } })
}
}
const setTipShow = (yes) => {
if (!me) return
// if we want to show it, yet we still haven't shown
if (yes && !me.tipPopover && me.sats) {
_setTipShow(true)
2021-12-09 20:40:40 +00:00
}
// if it's currently showing and we want to hide it
if (tipShow && !yes) {
_setTipShow(false)
2021-12-09 20:40:40 +00:00
setWalkthrough({ variables: { tipPopover: true } })
}
}
2021-09-08 21:51:23 +00:00
const [act] = useMutation(
gql`
mutation act($id: ID!, $sats: Int!) {
act(id: $id, sats: $sats) {
vote,
2021-09-10 21:13:52 +00:00
sats
}
}`, {
update (cache, { data: { act: { vote, sats } } }) {
cache.modify({
2021-09-10 21:13:52 +00:00
id: `Item:${item.id}`,
fields: {
sats (existingSats = 0) {
return existingSats + sats
2021-04-27 21:30:58 +00:00
},
2021-12-05 17:37:55 +00:00
meSats (existingSats = 0) {
if (sats <= me.sats) {
if (existingSats === 0) {
setVoteShow(true)
} else {
setTipShow(true)
}
2021-09-10 21:13:52 +00:00
}
return existingSats + sats
2021-09-10 21:13:52 +00:00
},
upvotes (existingUpvotes = 0) {
return existingUpvotes + vote
}
}
})
// update all ancestors
item.path.split('.').forEach(id => {
if (Number(id) === Number(item.id)) return
cache.modify({
id: `Item:${id}`,
fields: {
commentSats (existingCommentSats = 0) {
return existingCommentSats + sats
}
}
})
})
}
}
)
2021-04-22 22:14:32 +00:00
2022-12-09 19:25:38 +00:00
// what should our next tip be?
let sats = me?.tipDefault || 1
if (me?.turboTipping && item?.meSats) {
let raiseTip = sats
while (item?.meSats >= raiseTip) {
raiseTip *= 10
2021-09-12 16:55:38 +00:00
}
2022-12-09 19:25:38 +00:00
sats = raiseTip - item.meSats
}
const overlayText = () => {
return `${sats} sat${sats > 1 ? 's' : ''}`
2021-09-12 16:55:38 +00:00
}
2023-01-12 23:53:09 +00:00
const disabled = item?.mine || fwd2me || item?.deletedAt
2021-12-05 17:37:55 +00:00
const color = getColor(item?.meSats)
2021-04-22 22:14:32 +00:00
return (
<LightningConsumer>
{({ strike }) =>
<div ref={ref} className='upvoteParent'>
2021-12-09 20:40:40 +00:00
<LongPressable
onLongPress={
2021-10-30 16:52:24 +00:00
async (e) => {
2022-01-20 23:23:21 +00:00
if (!item) return
2021-10-30 16:52:24 +00:00
// we can't tip ourselves
2023-01-12 23:53:09 +00:00
if (disabled) {
2021-10-30 16:52:24 +00:00
return
}
2021-12-09 20:40:40 +00:00
setTipShow(false)
showModal(onClose =>
<ItemAct onClose={onClose} itemId={item.id} act={act} strike={strike} />)
2021-10-30 16:52:24 +00:00
}
}
2021-12-09 20:40:40 +00:00
onShortPress={
me
2021-06-24 23:56:01 +00:00
? async (e) => {
2022-01-20 23:23:21 +00:00
if (!item) return
2021-09-12 16:55:38 +00:00
// we can't tip ourselves
2023-01-12 23:53:09 +00:00
if (disabled) {
2021-09-12 16:55:38 +00:00
return
}
if (item?.meSats) {
2021-12-09 20:40:40 +00:00
setVoteShow(false)
2021-09-10 18:55:36 +00:00
}
2021-06-24 23:56:01 +00:00
strike()
2021-09-10 18:55:36 +00:00
2021-05-20 21:32:59 +00:00
try {
2022-01-20 23:23:21 +00:00
await act({
2022-12-09 19:25:38 +00:00
variables: { id: item.id, sats },
2022-01-20 23:23:21 +00:00
optimisticResponse: {
act: {
id: `Item:${item.id}`,
2022-12-09 19:25:38 +00:00
sats,
2022-01-20 23:23:21 +00:00
vote: 0
}
}
})
2021-05-20 21:32:59 +00:00
} catch (error) {
if (error.toString().includes('insufficient funds')) {
showModal(onClose => {
return <FundError onClose={onClose} />
})
2021-05-20 21:32:59 +00:00
return
}
throw new Error({ message: error.toString() })
}
}
: async () => await router.push({
pathname: '/signup',
query: { callbackUrl: window.location.origin + router.asPath }
})
}
2021-12-09 20:40:40 +00:00
>
2023-01-12 23:53:09 +00:00
<ActionTooltip notForm disable={disabled} overlayText={overlayText()}>
2021-12-09 20:40:40 +00:00
<div
2023-01-12 23:53:09 +00:00
className={`${disabled ? styles.noSelfTips : ''}
2021-12-09 20:40:40 +00:00
${styles.upvoteWrapper}`}
>
2021-12-06 15:32:33 +00:00
<UpBolt
width={24}
height={24}
className={
2021-12-09 20:40:40 +00:00
`${styles.upvote}
${className || ''}
2023-01-12 23:53:09 +00:00
${disabled ? styles.noSelfTips : ''}
2022-01-19 23:00:20 +00:00
${item?.meSats ? styles.voted : ''}`
2021-12-09 20:40:40 +00:00
}
2022-01-19 23:00:20 +00:00
style={item?.meSats
2021-12-06 15:32:33 +00:00
? {
fill: color,
filter: `drop-shadow(0 0 6px ${color}90)`
}
: undefined}
/>
2021-12-09 20:40:40 +00:00
</div>
</ActionTooltip>
</LongPressable>
<TipPopover target={ref.current} show={tipShow} handleClose={() => setTipShow(false)} />
<UpvotePopover target={ref.current} show={voteShow} handleClose={() => setVoteShow(false)} />
</div>}
2021-04-22 22:14:32 +00:00
</LightningConsumer>
)
}