stacker.news/components/upvote.js

206 lines
6.4 KiB
JavaScript
Raw Normal View History

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'
2021-07-08 18:42:57 +00:00
import ActionTooltip from './action-tooltip'
2023-12-27 02:27:52 +00:00
import ItemAct, { useAct, useZap } from './item-act'
2021-09-12 16:55:38 +00:00
import { useMe } from './me'
import getColor from '../lib/rainbow'
2023-10-06 20:01:51 +00:00
import { useCallback, useMemo, useRef, useState } from 'react'
2021-10-30 16:52:24 +00:00
import LongPressable from 'react-longpressable'
2023-07-24 18:35:05 +00:00
import Overlay from 'react-bootstrap/Overlay'
import Popover from 'react-bootstrap/Popover'
import { useShowModal } from './modal'
2023-12-27 02:27:52 +00:00
import { useLightning } from './lightning'
2023-08-08 22:15:30 +00:00
import { numWithUnits } from '../lib/format'
import { Dropdown } from 'react-bootstrap'
2021-12-09 20:40:40 +00:00
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.Header className='d-flex justify-content-between alert-dismissible' as='h4'>Zapping
<button type='button' className='btn-close' onClick={handleClose}><span className='visually-hidden-focusable'>Close alert</span></button>
</Popover.Header>
2023-07-24 18:35:05 +00:00
<Popover.Body>
<div className='mb-2'>Press the bolt again to zap {me?.privates?.tipDefault || 1} more sat{me?.privates?.tipDefault > 1 ? 's' : ''}.</div>
2023-06-19 18:21:55 +00:00
<div>Repeatedly press the bolt to zap more sats.</div>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2022-04-12 21:09:12 +00:00
</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.Header className='d-flex justify-content-between alert-dismissible' as='h4'>Press and hold
<button type='button' className='btn-close' onClick={handleClose}><span className='visually-hidden-focusable'>Close alert</span></button>
</Popover.Header>
2023-07-24 18:35:05 +00:00
<Popover.Body>
2023-06-19 18:21:55 +00:00
<div className='mb-2'>Press and hold bolt to zap a custom amount.</div>
<div>As you zap more, the bolt color follows the rainbow.</div>
2023-07-24 18:35:05 +00:00
</Popover.Body>
2021-12-09 20:40:40 +00:00
</Popover>
</Overlay>
)
export function DropdownItemUpVote ({ item }) {
const showModal = useShowModal()
return (
<Dropdown.Item
onClick={async () => {
showModal(onClose =>
2023-12-27 02:27:52 +00:00
<ItemAct onClose={onClose} itemId={item.id} />)
}}
>
<span className='text-success'>zap</span>
</Dropdown.Item>
)
}
2023-12-27 02:27:52 +00:00
export default function UpVote ({ item, className }) {
const showModal = useShowModal()
const [voteShow, _setVoteShow] = useState(false)
const [tipShow, _setTipShow] = useState(false)
const ref = useRef()
const me = useMe()
const [setWalkthrough] = useMutation(
gql`
mutation setWalkthrough($upvotePopover: Boolean, $tipPopover: Boolean) {
setWalkthrough(upvotePopover: $upvotePopover, tipPopover: $tipPopover)
}`
)
const setVoteShow = useCallback((yes) => {
if (!me) return
// if they haven't seen the walkthrough and they have sats
if (yes && !me.privates?.upvotePopover && me.privates?.sats) {
_setVoteShow(true)
}
if (voteShow && !yes) {
_setVoteShow(false)
setWalkthrough({ variables: { upvotePopover: true } })
}
}, [me, voteShow, setWalkthrough])
const setTipShow = useCallback((yes) => {
if (!me) return
// if we want to show it, yet we still haven't shown
if (yes && !me.privates?.tipPopover && me.privates?.sats) {
_setTipShow(true)
}
// if it's currently showing and we want to hide it
if (tipShow && !yes) {
_setTipShow(false)
setWalkthrough({ variables: { tipPopover: true } })
}
}, [me, tipShow, setWalkthrough])
2023-12-26 22:51:47 +00:00
const [act] = useAct()
2023-12-27 02:27:52 +00:00
const zap = useZap()
const strike = useLightning()
2023-08-28 14:40:29 +00:00
const disabled = useMemo(() => item?.mine || item?.meForward || item?.deletedAt,
[item?.mine, item?.meForward, item?.deletedAt])
2023-12-27 02:27:52 +00:00
const [meSats, overlayText, color] = useMemo(() => {
const meSats = (item?.meSats || item?.meAnonSats || 0)
2022-12-09 19:25:38 +00:00
// what should our next tip be?
let sats = me?.privates?.tipDefault || 1
2023-12-27 02:27:52 +00:00
let raiseSats = sats
if (me?.privates?.turboTipping) {
2023-12-27 02:27:52 +00:00
while (meSats >= raiseSats) {
raiseSats *= 10
}
2022-12-09 19:25:38 +00:00
2023-12-27 02:27:52 +00:00
sats = raiseSats - meSats
} else {
raiseSats = meSats + sats
}
2021-09-12 16:55:38 +00:00
2023-12-27 02:27:52 +00:00
return [meSats, me ? numWithUnits(sats, { abbreviate: false }) : 'zap it', getColor(meSats)]
}, [item?.meSats, item?.meAnonSats, me?.privates?.tipDefault, me?.privates?.turboDefault])
2023-01-12 23:53:09 +00:00
2021-04-22 22:14:32 +00:00
return (
2023-12-27 02:27:52 +00:00
<div ref={ref} className='upvoteParent'>
<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 =>
2023-12-27 02:27:52 +00:00
<ItemAct onClose={onClose} itemId={item.id} />)
2021-10-30 16:52:24 +00:00
}
}
2023-12-27 02:27:52 +00:00
onShortPress={
me
2021-06-24 23:56:01 +00:00
? async (e) => {
2023-07-25 14:14:45 +00:00
if (!item) return
2021-09-12 16:55:38 +00:00
2023-07-25 14:14:45 +00:00
// we can't tip ourselves
if (disabled) {
return
}
2021-09-12 16:55:38 +00:00
2023-07-25 14:14:45 +00:00
if (meSats) {
setVoteShow(false)
2023-12-26 22:51:47 +00:00
} else {
setTipShow(true)
2023-07-25 14:14:45 +00:00
}
2021-09-10 18:55:36 +00:00
2023-07-25 14:14:45 +00:00
strike()
2021-09-10 18:55:36 +00:00
2023-12-27 02:27:52 +00:00
zap({ item, me })
2023-07-25 14:14:45 +00:00
}
2023-12-27 02:27:52 +00:00
: () => showModal(onClose => <ItemAct onClose={onClose} itemId={item.id} act={act} />)
}
2023-12-27 02:27:52 +00:00
>
<ActionTooltip notForm disable={disabled} overlayText={overlayText}>
<div
className={`${disabled ? styles.noSelfTips : ''} ${styles.upvoteWrapper}`}
2021-12-09 20:40:40 +00:00
>
2023-12-27 02:27:52 +00:00
<UpBolt
width={26}
height={26}
className={
2021-12-09 20:40:40 +00:00
`${styles.upvote}
${className || ''}
2023-01-12 23:53:09 +00:00
${disabled ? styles.noSelfTips : ''}
${meSats ? styles.voted : ''}`
2021-12-09 20:40:40 +00:00
}
2023-12-27 02:27:52 +00:00
style={meSats
? {
fill: color,
filter: `drop-shadow(0 0 6px ${color}90)`
}
: undefined}
/>
</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
)
}