101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import { gql, useApolloClient, useMutation } from '@apollo/client'
|
|
import { useShowModal } from './modal'
|
|
import { useToast } from './toast'
|
|
import { Button, Dropdown, InputGroup } from 'react-bootstrap'
|
|
import { Form, InputUserSuggest, SubmitButton } from './form'
|
|
import { territoryTransferSchema } from '@/lib/validate'
|
|
import { useCallback } from 'react'
|
|
import Link from 'next/link'
|
|
import { useMe } from './me'
|
|
|
|
function TransferObstacle ({ sub, onClose, userName }) {
|
|
const toaster = useToast()
|
|
const [transfer] = useMutation(
|
|
gql`
|
|
mutation transferTerritory($subName: String!, $userName: String!) {
|
|
transferTerritory(subName: $subName, userName: $userName) {
|
|
name
|
|
user {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
`
|
|
)
|
|
|
|
return (
|
|
<div className='text-center'>
|
|
Do you really want to transfer your territory
|
|
<div>
|
|
<Link href={`/~${sub.name}`}>~{sub.name}</Link>
|
|
{' '}to{' '}
|
|
<Link href={`/${userName}`}>@{userName}</Link>?
|
|
</div>
|
|
<div className='d-flex justify-center align-items-center mt-3 mx-auto'>
|
|
<Button className='d-flex ms-auto mx-3' variant='danger' onClick={onClose}>cancel</Button>
|
|
<Button
|
|
className='d-flex me-auto mx-3' variant='success'
|
|
onClick={
|
|
async () => {
|
|
try {
|
|
await transfer({ variables: { subName: sub.name, userName } })
|
|
onClose()
|
|
toaster.success('transfer successful')
|
|
} catch (err) {
|
|
console.error(err)
|
|
toaster.danger('failed to transfer')
|
|
}
|
|
}
|
|
}
|
|
>confirm
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TerritoryTransferForm ({ sub, onClose }) {
|
|
const showModal = useShowModal()
|
|
const client = useApolloClient()
|
|
const { me } = useMe()
|
|
const schema = territoryTransferSchema({ me, client })
|
|
|
|
const onSubmit = useCallback(async (values) => {
|
|
showModal(onClose => <TransferObstacle sub={sub} onClose={onClose} {...values} />)
|
|
}, [])
|
|
|
|
return (
|
|
<Form
|
|
initial={{
|
|
userName: ''
|
|
}}
|
|
schema={schema}
|
|
onSubmit={onSubmit}
|
|
>
|
|
<h2 className='text-center'>transfer territory</h2>
|
|
<div className='d-flex align-items-center mb-2'>
|
|
<InputUserSuggest
|
|
label='stacker'
|
|
name='userName'
|
|
prepend={<InputGroup.Text>@</InputGroup.Text>}
|
|
showValid
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<SubmitButton variant='success'>transfer</SubmitButton>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
export function TerritoryTransferDropdownItem ({ sub }) {
|
|
const showModal = useShowModal()
|
|
return (
|
|
<Dropdown.Item onClick={async () =>
|
|
showModal(onClose =>
|
|
<TerritoryTransferForm sub={sub} onClose={onClose} />)}
|
|
>
|
|
transfer
|
|
</Dropdown.Item>
|
|
)
|
|
}
|