import { InputGroup, Modal } from 'react-bootstrap' import React, { useState, useCallback, useContext, useRef, useEffect } from 'react' import * as Yup from 'yup' import { Form, Input, SubmitButton } from './form' import { useMe } from './me' export const ItemActContext = React.createContext({ item: null, setItem: () => {} }) export function ItemActProvider ({ children }) { const [item, setItem] = useState(null) const contextValue = { item, setItem: useCallback(i => setItem(i), []) } return ( {children} ) } export function useItemAct () { const { item, setItem } = useContext(ItemActContext) return { item, setItem } } export const ActSchema = Yup.object({ amount: Yup.number().typeError('must be a number').required('required') .positive('must be positive').integer('must be whole') }) export function ItemActModal () { const { item, setItem } = useItemAct() const inputRef = useRef(null) const me = useMe() useEffect(() => { inputRef.current?.focus() }, [item]) return ( { setItem(null) }} >
setItem(null)}>X
{ await item.act({ variables: { id: item.itemId, sats: Number(amount) } }) await item.strike() setItem(null) }} > sats} />
tip
) }