stacker.news/pages/settings.js

104 lines
3.6 KiB
JavaScript
Raw Normal View History

2022-04-21 22:50:02 +00:00
import { Checkbox, Form, Input, SubmitButton } from '../components/form'
2021-10-30 16:20:11 +00:00
import * as Yup from 'yup'
2022-05-04 18:29:30 +00:00
import { Alert, Button, InputGroup } from 'react-bootstrap'
2021-10-30 16:20:11 +00:00
import { useMe } from '../components/me'
import LayoutCenter from '../components/layout-center'
import { useState } from 'react'
import { gql, useMutation } from '@apollo/client'
2022-04-21 22:50:02 +00:00
import { getGetServerSideProps } from '../api/ssrApollo'
export const getServerSideProps = getGetServerSideProps()
2021-10-30 16:20:11 +00:00
export const SettingsSchema = Yup.object({
tipDefault: Yup.number().typeError('must be a number').required('required')
.positive('must be positive').integer('must be whole')
})
export default function Settings () {
const me = useMe()
const [success, setSuccess] = useState()
const [setSettings] = useMutation(
gql`
2022-04-21 22:50:02 +00:00
mutation setSettings($tipDefault: Int!, $noteItemSats: Boolean!, $noteEarning: Boolean!,
$noteAllDescendants: Boolean!, $noteMentions: Boolean!, $noteDeposits: Boolean!,
$noteInvites: Boolean!, $noteJobIndicator: Boolean!) {
2022-04-21 22:50:02 +00:00
setSettings(tipDefault: $tipDefault, noteItemSats: $noteItemSats,
noteEarning: $noteEarning, noteAllDescendants: $noteAllDescendants,
noteMentions: $noteMentions, noteDeposits: $noteDeposits, noteInvites: $noteInvites,
noteJobIndicator: $noteJobIndicator)
2021-10-30 16:20:11 +00:00
}`
)
return (
<LayoutCenter>
<h2 className='mb-5 text-left'>settings</h2>
<Form
initial={{
2022-04-21 22:50:02 +00:00
tipDefault: me?.tipDefault || 21,
noteItemSats: me?.noteItemSats,
noteEarning: me?.noteEarning,
noteAllDescendants: me?.noteAllDescendants,
noteMentions: me?.noteMentions,
noteDeposits: me?.noteDeposits,
noteInvites: me?.noteInvites,
noteJobIndicator: me?.noteJobIndicator
2021-10-30 16:20:11 +00:00
}}
schema={SettingsSchema}
2022-04-21 22:50:02 +00:00
onSubmit={async ({ tipDefault, ...values }) => {
await setSettings({ variables: { tipDefault: Number(tipDefault), ...values } })
2021-10-30 16:20:11 +00:00
setSuccess('settings saved')
}}
>
{success && <Alert variant='info' onClose={() => setSuccess(undefined)} dismissible>{success}</Alert>}
<Input
label='tip default'
name='tipDefault'
required
autoFocus
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
/>
2022-04-21 22:50:02 +00:00
<div className='form-label'>notify me when ...</div>
<Checkbox
label='I stack sats from posts and comments'
name='noteItemSats'
groupClassName='mb-0'
/>
<Checkbox
2022-04-23 23:55:38 +00:00
label='I get a daily airdrop'
2022-04-21 22:50:02 +00:00
name='noteEarning'
groupClassName='mb-0'
/>
<Checkbox
label='someone replies to someone who replied to me'
name='noteAllDescendants'
groupClassName='mb-0'
/>
<Checkbox
label='my invite links are redeemed'
name='noteInvites'
groupClassName='mb-0'
/>
<Checkbox
label='sats are deposited in my account'
name='noteDeposits'
groupClassName='mb-0'
/>
<Checkbox
label='someone mentions me'
name='noteMentions'
groupClassName='mb-0'
/>
<Checkbox
label='there is a new job'
name='noteJobIndicator'
2022-04-21 22:50:02 +00:00
/>
2022-05-04 18:29:30 +00:00
<div className='form-label'>saturday newsletter</div>
<Button href='https://mail.stacker.news/subscription/form' target='_blank'>(re)subscribe</Button>
2021-10-30 16:20:11 +00:00
<div className='d-flex'>
<SubmitButton variant='info' className='ml-auto mt-1 px-4'>save</SubmitButton>
</div>
</Form>
</LayoutCenter>
)
}