stacker.news/pages/invites/index.js

124 lines
3.3 KiB
JavaScript
Raw Normal View History

2021-10-12 23:49:04 +00:00
import Layout from '../../components/layout'
2022-01-19 21:02:38 +00:00
import { Form, Input, SubmitButton } from '../../components/form'
2021-10-12 23:49:04 +00:00
import { InputGroup } from 'react-bootstrap'
import { gql, useMutation, useQuery } from '@apollo/client'
import { INVITE_FIELDS } from '../../fragments/invites'
2021-10-14 21:05:37 +00:00
import AccordianItem from '../../components/accordian-item'
import styles from '../../styles/invites.module.css'
2022-01-19 21:02:38 +00:00
import Invite from '../../components/invite'
2023-02-08 19:38:04 +00:00
import { inviteSchema } from '../../lib/validate'
2021-10-12 23:49:04 +00:00
function InviteForm () {
const [createInvite] = useMutation(
gql`
${INVITE_FIELDS}
mutation createInvite($gift: Int!, $limit: Int) {
createInvite(gift: $gift, limit: $limit) {
...InviteFields
}
}`, {
update (cache, { data: { createInvite } }) {
cache.modify({
fields: {
invites (existingInviteRefs = []) {
const newInviteRef = cache.writeFragment({
data: createInvite,
fragment: INVITE_FIELDS
})
return [newInviteRef, ...existingInviteRefs]
}
}
})
}
}
)
return (
<Form
initial={{
gift: 100,
limit: undefined
}}
2023-02-08 19:38:04 +00:00
schema={inviteSchema}
2021-10-15 23:07:51 +00:00
onSubmit={async ({ limit, gift }) => {
2021-10-12 23:49:04 +00:00
const { error } = await createInvite({
variables: {
2021-10-15 23:07:51 +00:00
gift: Number(gift), limit: limit ? Number(limit) : limit
2021-10-12 23:49:04 +00:00
}
})
if (error) {
throw new Error({ message: error.String() })
}
}}
>
<Input
label='gift'
name='gift'
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
required
/>
<Input
label={<>invitee limit <small className='text-muted ml-2'>optional</small></>}
name='limit'
/>
2021-10-14 21:05:37 +00:00
<SubmitButton variant='secondary'>create</SubmitButton>
2021-10-12 23:49:04 +00:00
</Form>
)
}
2021-10-14 21:05:37 +00:00
function InviteList ({ name, invites }) {
return (
<div className='mt-4'>
<AccordianItem
show
2021-11-04 18:22:03 +00:00
headerColor='#6c757d'
2021-10-14 21:05:37 +00:00
header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>{name}</div>} body={
<div className={styles.invites}>{invites.map(invite => {
return <Invite invite={invite} key={invite.id} active={name === 'active'} />
})}
</div>
2021-10-15 17:56:54 +00:00
}
2021-10-14 21:05:37 +00:00
/>
</div>
)
}
2021-10-12 23:49:04 +00:00
export default function Invites () {
const { data } = useQuery(
gql`
${INVITE_FIELDS}
{
invites {
...InviteFields
}
}
2021-10-26 20:49:37 +00:00
`, { fetchPolicy: 'cache-and-network' })
2021-10-14 21:05:37 +00:00
const [active, inactive] = data && data.invites
? data.invites.reduce((result, invite) => {
2021-10-15 17:56:54 +00:00
result[
invite.revoked || (invite.limit &&
invite.invitees.length >= invite.limit)
? 1
: 0].push(invite)
2021-10-14 21:05:37 +00:00
return result
},
[[], []])
: [[], []]
2021-10-12 23:49:04 +00:00
return (
<Layout>
2022-04-26 15:48:30 +00:00
<div className='text-center'>
<h2 className='mt-3 mb-0'>
invite links
</h2>
2022-12-19 22:27:52 +00:00
<small className='d-block text-muted font-weight-bold mx-5'>send these to people you trust, e.g. group chats or DMs</small>
2022-04-26 15:48:30 +00:00
</div>
2021-10-12 23:49:04 +00:00
<InviteForm />
2021-10-14 21:05:37 +00:00
{active.length > 0 && <InviteList name='active' invites={active} />}
{inactive.length > 0 && <InviteList name='inactive' invites={inactive} />}
2021-10-12 23:49:04 +00:00
</Layout>
)
}