stacker.news/pages/satistics.js

225 lines
6.9 KiB
JavaScript
Raw Normal View History

2021-12-15 16:50:11 +00:00
import { useQuery } from '@apollo/client'
import Link from 'next/link'
import { getGetServerSideProps } from '../api/ssrApollo'
import Layout from '../components/layout'
import MoreFooter from '../components/more-footer'
import { WALLET_HISTORY } from '../fragments/wallet'
import styles from '../styles/satistics.module.css'
import Moon from '../svgs/moon-fill.svg'
import Check from '../svgs/check-double-line.svg'
import ThumbDown from '../svgs/thumb-down-fill.svg'
2021-12-16 17:27:12 +00:00
import { Checkbox, Form } from '../components/form'
import { useRouter } from 'next/router'
2021-12-16 20:02:17 +00:00
import Item from '../components/item'
2023-05-06 21:51:17 +00:00
import { CommentFlat } from '../components/comment'
2023-01-12 23:53:09 +00:00
import ItemJob from '../components/item-job'
import PageLoading from '../components/page-loading'
import PayerData from '../components/payer-data'
2021-12-15 16:50:11 +00:00
export const getServerSideProps = getGetServerSideProps({ query: WALLET_HISTORY, authRequired: true })
2021-12-15 16:50:11 +00:00
function satusClass (status) {
2021-12-16 20:02:17 +00:00
if (!status) {
return ''
}
2021-12-15 16:50:11 +00:00
switch (status) {
case 'CONFIRMED':
return 'text-reset'
2021-12-15 16:50:11 +00:00
case 'PENDING':
return 'text-muted'
default:
return `${styles.failed} text-muted`
2021-12-15 16:50:11 +00:00
}
}
function Satus ({ status }) {
if (!status) {
return null
}
let color = 'danger'; let desc
switch (status) {
case 'CONFIRMED':
desc = 'confirmed'
color = 'success'
break
case 'EXPIRED':
desc = 'expired'
color = 'muted'
break
case 'PENDING':
desc = 'pending'
color = 'muted'
break
case 'INSUFFICIENT_BALANCE':
desc = "you didn't have enough sats"
break
case 'INVALID_PAYMENT':
desc = 'invalid payment'
break
case 'PATHFINDING_TIMEOUT':
case 'ROUTE_NOT_FOUND':
desc = 'no route found'
break
default:
return 'unknown failure'
2021-12-15 16:50:11 +00:00
}
const Icon = () => {
switch (status) {
case 'CONFIRMED':
return <Check width='20' height='20' className={`fill-${color}`} />
2021-12-15 16:50:11 +00:00
case 'PENDING':
return <Moon width='20' height='20' className={`fill-${color} spin`} />
2021-12-15 16:50:11 +00:00
default:
return <ThumbDown width='18' height='18' className={`fill-${color}`} />
2021-12-15 16:50:11 +00:00
}
}
return (
<span className='d-block'>
2023-07-24 18:35:05 +00:00
<Icon /><small className={`text-${color} fw-bold ms-2`}>{desc}</small>
</span>
2021-12-15 16:50:11 +00:00
)
}
2021-12-16 20:02:17 +00:00
function Detail ({ fact }) {
2022-03-17 20:13:19 +00:00
if (fact.type === 'earn') {
return (
2023-08-15 17:41:51 +00:00
<Link href={`/rewards/${new Date(fact.createdAt).toISOString().slice(0, 10)}`} className='px-3 text-reset' style={{ lineHeight: '140%' }}>
SN distributes the sats it earns back to its best stackers daily. These sats come from <Link href='/~jobs'>jobs</Link>, boosts, posting fees, and donations.
</Link>
2022-03-17 20:13:19 +00:00
)
}
2022-12-08 00:04:02 +00:00
if (fact.type === 'donation') {
return (
<div className='px-3'>
You made a donation to <Link href='/rewards'>daily rewards</Link>!
</div>
2022-12-19 22:27:52 +00:00
)
}
if (fact.type === 'referral') {
return (
<div className='px-3'>
You stacked sats from <Link href='/referrals/month'>a referral</Link>!
</div>
2022-12-08 00:04:02 +00:00
)
}
2021-12-16 20:02:17 +00:00
if (!fact.item) {
2023-09-27 01:59:15 +00:00
let zap
try {
zap = JSON.parse(fact.description)
2023-09-27 01:59:15 +00:00
} catch { }
2021-12-16 20:02:17 +00:00
return (
<div className='px-3'>
<Link className={satusClass(fact.status)} href={`/${fact.type}s/${fact.factId}`}>
{(zap && <span className='d-block'>nostr zap{zap.content && `: ${zap.content}`}</span>) ||
2023-09-27 01:59:15 +00:00
(fact.description && <span className='d-block'>{fact.description}</span>)}
<PayerData data={fact.invoicePayerData} className='text-muted' header />
{fact.invoiceComment && <small className='text-muted'><b>sender says:</b> {fact.invoiceComment}</small>}
{!fact.invoiceComment && !fact.description && <span className='d-block'>no description</span>}
<Satus status={fact.status} />
</Link>
</div>
2021-12-16 20:02:17 +00:00
)
}
if (fact.item.title) {
2023-01-12 23:53:09 +00:00
if (fact.item.isJob) {
return <ItemJob className={styles.itemWrapper} item={fact.item} />
}
return <Item item={fact.item} siblingComments />
2021-12-16 20:02:17 +00:00
}
return <CommentFlat item={fact.item} includeParent noReply truncate />
2021-12-16 20:02:17 +00:00
}
function Fact ({ fact }) {
return (
<>
<div className={`${styles.type} ${satusClass(fact.status)} ${fact.sats > 0 ? '' : 'text-muted'}`}>{fact.type}</div>
<div className={styles.detail}>
<Detail fact={fact} />
</div>
<div className={`${styles.sats} ${satusClass(fact.status)} ${fact.sats > 0 ? '' : 'text-muted'}`}>{fact.sats}</div>
</>
)
}
export default function Satistics ({ ssrData }) {
2021-12-16 17:27:12 +00:00
const router = useRouter()
const { data, fetchMore } = useQuery(WALLET_HISTORY, { variables: { inc: router.query.inc } })
if (!data && !ssrData) return <PageLoading />
2021-12-16 17:27:12 +00:00
function filterRoutePush (filter, add) {
2021-12-16 20:17:50 +00:00
const inc = new Set(router.query.inc?.split(','))
2021-12-16 17:27:12 +00:00
inc.delete('')
// depending on addrem, add or remove filter
if (add) {
inc.add(filter)
} else {
inc.delete(filter)
}
const incstr = [...inc].join(',')
router.push(`/satistics?inc=${incstr}`)
}
function included (filter) {
2021-12-16 20:17:50 +00:00
const inc = new Set(router.query.inc?.split(','))
2021-12-16 17:27:12 +00:00
return inc.has(filter)
}
2021-12-15 16:50:11 +00:00
const { walletHistory: { facts, cursor } } = data || ssrData
2021-12-15 16:50:11 +00:00
return (
<Layout>
2021-12-16 17:27:12 +00:00
<div className='mt-3'>
<h2 className='text-center'>satistics</h2>
2021-12-16 17:27:12 +00:00
<Form
initial={{
invoice: included('invoice'),
withdrawal: included('withdrawal'),
stacked: included('stacked'),
spent: included('spent')
}}
>
<div className='d-flex justify-content-around flex-wrap'>
<Checkbox
label='invoice' name='invoice' inline
2022-01-19 21:51:55 +00:00
checked={included('invoice')}
2021-12-16 17:27:12 +00:00
handleChange={c => filterRoutePush('invoice', c)}
/>
<Checkbox
label='withdrawal' name='withdrawal' inline
2022-01-19 21:51:55 +00:00
checked={included('withdrawal')}
2021-12-16 17:27:12 +00:00
handleChange={c => filterRoutePush('withdrawal', c)}
/>
<Checkbox
label='stacked' name='stacked' inline
2022-01-19 21:51:55 +00:00
checked={included('stacked')}
2021-12-16 17:27:12 +00:00
handleChange={c => filterRoutePush('stacked', c)}
/>
<Checkbox
label='spent' name='spent' inline
2022-01-19 21:51:55 +00:00
checked={included('spent')}
2021-12-16 17:27:12 +00:00
handleChange={c => filterRoutePush('spent', c)}
/>
</div>
</Form>
<div className='py-2 px-0 mb-0 mw-100'>
<div className={styles.rows}>
<div className={[styles.type, styles.head].join(' ')}>type</div>
<div className={[styles.detail, styles.head].join(' ')}>detail</div>
<div className={[styles.sats, styles.head].join(' ')}>sats</div>
{facts.map(f => <Fact key={f.id} fact={f} />)}
</div>
</div>
<MoreFooter cursor={cursor} count={facts?.length} fetchMore={fetchMore} Skeleton={PageLoading} />
2021-12-16 17:27:12 +00:00
</div>
2021-12-15 16:50:11 +00:00
</Layout>
)
}