stacker.news/components/item-act.js

70 lines
1.8 KiB
JavaScript
Raw Normal View History

import { Button, InputGroup } from 'react-bootstrap'
import React, { useState, useRef, useEffect } from 'react'
2021-09-10 18:55:36 +00:00
import * as Yup from 'yup'
import { Form, Input, SubmitButton } from './form'
2021-09-12 16:55:38 +00:00
import { useMe } from './me'
2022-12-09 20:13:31 +00:00
import UpBolt from '../svgs/bolt.svg'
2021-09-10 18:55:36 +00:00
export const ActSchema = Yup.object({
amount: Yup.number().typeError('must be a number').required('required')
.positive('must be positive').integer('must be whole')
})
export default function ItemAct ({ onClose, itemId, act, strike }) {
2021-09-10 18:55:36 +00:00
const inputRef = useRef(null)
2021-09-12 16:55:38 +00:00
const me = useMe()
2022-12-09 20:13:31 +00:00
const [oValue, setOValue] = useState()
2021-09-10 18:55:36 +00:00
useEffect(() => {
inputRef.current?.focus()
}, [onClose, itemId])
2021-09-10 18:55:36 +00:00
return (
<Form
initial={{
amount: me?.tipDefault,
default: false
}}
schema={ActSchema}
onSubmit={async ({ amount }) => {
await act({
variables: {
id: itemId,
sats: Number(amount)
}
})
await strike()
onClose()
2021-09-10 18:55:36 +00:00
}}
>
<Input
label='amount'
name='amount'
innerRef={inputRef}
overrideValue={oValue}
required
autoFocus
append={<InputGroup.Text className='text-monospace'>sats</InputGroup.Text>}
/>
<div>
{[1, 10, 100, 1000, 10000].map(num =>
<Button
size='sm'
className={`${num > 1 ? 'ml-2' : ''} mb-2`}
key={num}
onClick={() => { setOValue(num) }}
>
<UpBolt
className='mr-1'
width={14}
height={14}
/>{num}
</Button>)}
</div>
<div className='d-flex'>
<SubmitButton variant='success' className='ml-auto mt-1 px-4' value='TIP'>tip</SubmitButton>
</div>
</Form>
2021-09-10 18:55:36 +00:00
)
}