stacker.news/components/job-form.js

266 lines
8.6 KiB
JavaScript
Raw Normal View History

2022-02-26 16:41:30 +00:00
import { Checkbox, Form, Input, MarkdownInput, SubmitButton } from './form'
2022-02-17 17:23:43 +00:00
import TextareaAutosize from 'react-textarea-autosize'
2022-07-21 22:55:05 +00:00
import { InputGroup, Form as BForm, Col, Image } from 'react-bootstrap'
2022-02-17 17:23:43 +00:00
import * as Yup from 'yup'
import { useEffect, useState } from 'react'
2022-04-18 16:08:58 +00:00
import Info from './info'
2022-02-17 17:23:43 +00:00
import AccordianItem from './accordian-item'
import styles from '../styles/post.module.css'
import { useLazyQuery, gql, useMutation } from '@apollo/client'
import { useRouter } from 'next/router'
2022-02-26 16:41:30 +00:00
import Link from 'next/link'
2022-03-07 19:30:21 +00:00
import { usePrice } from './price'
2022-07-21 22:55:05 +00:00
import Avatar from './avatar'
2022-02-17 17:23:43 +00:00
Yup.addMethod(Yup.string, 'or', function (schemas, msg) {
return this.test({
name: 'or',
message: msg,
test: value => {
if (Array.isArray(schemas) && schemas.length > 1) {
const resee = schemas.map(schema => schema.isValidSync(value))
return resee.some(res => res)
} else {
throw new TypeError('Schemas is not correct array schema')
}
},
exclusive: false
})
})
2022-03-07 19:30:21 +00:00
function satsMin2Mo (minute) {
return minute * 30 * 24 * 60
}
function PriceHint ({ monthly }) {
const price = usePrice()
if (!price) {
return null
}
const fixed = (n, f) => Number.parseFloat(n).toFixed(f)
const fiat = fixed((price / 100000000) * monthly, 0)
return <span className='text-muted'>{monthly} sats/mo which is ${fiat}/mo</span>
2022-02-17 17:23:43 +00:00
}
// need to recent list items
export default function JobForm ({ item, sub }) {
const storageKeyPrefix = item ? undefined : `${sub.name}-job`
const router = useRouter()
2022-03-07 19:30:21 +00:00
const [monthly, setMonthly] = useState(satsMin2Mo(item?.maxBid || sub.baseCost))
2022-07-21 22:55:05 +00:00
const [logoId, setLogoId] = useState(item?.uploadId)
2022-02-17 17:23:43 +00:00
const [getAuctionPosition, { data }] = useLazyQuery(gql`
query AuctionPosition($id: ID, $bid: Int!) {
auctionPosition(sub: "${sub.name}", id: $id, bid: $bid)
}`,
{ fetchPolicy: 'network-only' })
const [upsertJob] = useMutation(gql`
2022-03-07 21:50:13 +00:00
mutation upsertJob($id: ID, $title: String!, $company: String!, $location: String,
2022-07-21 22:55:05 +00:00
$remote: Boolean, $text: String!, $url: String!, $maxBid: Int!, $status: String, $logo: Int) {
2022-03-07 21:50:13 +00:00
upsertJob(sub: "${sub.name}", id: $id, title: $title, company: $company,
location: $location, remote: $remote, text: $text,
2022-07-21 22:55:05 +00:00
url: $url, maxBid: $maxBid, status: $status, logo: $logo) {
2022-02-17 17:23:43 +00:00
id
}
}`
)
const JobSchema = Yup.object({
title: Yup.string().required('required').trim(),
2022-03-07 21:50:13 +00:00
company: Yup.string().required('required').trim(),
2022-02-17 17:23:43 +00:00
text: Yup.string().required('required').trim(),
url: Yup.string()
.or([Yup.string().email(), Yup.string().url()], 'invalid url or email')
.required('Required'),
maxBid: Yup.number('must be number')
2022-03-09 19:44:50 +00:00
.integer('must be whole').min(sub.baseCost, `must be at least ${sub.baseCost}`)
.required('required'),
2022-06-03 02:09:27 +00:00
location: Yup.string().test(
'no-remote',
"don't write remote, just check the box",
v => !v?.match(/\bremote\b/gi))
.when('remote', {
is: (value) => !value,
then: Yup.string().required('required').trim()
})
2022-02-17 17:23:43 +00:00
})
const position = data?.auctionPosition
useEffect(() => {
const initialMaxBid = Number(item?.maxBid || localStorage.getItem(storageKeyPrefix + '-maxBid')) || sub.baseCost
getAuctionPosition({ variables: { id: item?.id, bid: initialMaxBid } })
2022-03-07 19:30:21 +00:00
setMonthly(satsMin2Mo(initialMaxBid))
2022-02-17 17:23:43 +00:00
}, [])
return (
<>
<Form
className='py-5'
initial={{
title: item?.title || '',
2022-03-07 21:50:13 +00:00
company: item?.company || '',
location: item?.location || '',
remote: item?.remote || false,
2022-02-17 17:23:43 +00:00
text: item?.text || '',
url: item?.url || '',
2022-02-26 16:41:30 +00:00
maxBid: item?.maxBid || sub.baseCost,
stop: false,
start: false
2022-02-17 17:23:43 +00:00
}}
schema={JobSchema}
storageKeyPrefix={storageKeyPrefix}
2022-02-26 16:41:30 +00:00
onSubmit={(async ({ maxBid, stop, start, ...values }) => {
let status
if (start) {
status = 'ACTIVE'
} else if (stop) {
status = 'STOPPED'
}
const { error } = await upsertJob({
variables: {
id: item?.id,
sub: sub.name,
maxBid: Number(maxBid),
status,
2022-07-21 22:55:05 +00:00
logo: Number(logoId),
...values
}
})
2022-02-17 17:23:43 +00:00
if (error) {
throw new Error({ message: error.toString() })
}
if (item) {
2022-03-10 18:25:16 +00:00
await router.push(`/items/${item.id}`)
2022-02-17 17:23:43 +00:00
} else {
2022-03-10 18:25:16 +00:00
await router.push(`/~${sub.name}/recent`)
2022-02-17 17:23:43 +00:00
}
})}
>
2022-07-21 22:55:05 +00:00
<div className='form-group'>
<label className='form-label'>logo</label>
<div className='position-relative' style={{ width: 'fit-content' }}>
<Image
src={logoId ? `https://${process.env.NEXT_PUBLIC_AWS_UPLOAD_BUCKET}.s3.amazonaws.com/${logoId}` : '/jobs-default.png'} width='135' height='135' roundedCircle
/>
<Avatar onSuccess={setLogoId} />
</div>
</div>
2022-02-17 17:23:43 +00:00
<Input
2022-03-07 21:50:13 +00:00
label='job title'
2022-02-17 17:23:43 +00:00
name='title'
required
autoFocus
/>
2022-03-07 21:50:13 +00:00
<Input
label='company'
name='company'
required
/>
<BForm.Row className='mr-0'>
<Col>
<Input
label='location'
name='location'
/>
</Col>
<Checkbox
label={<div className='font-weight-bold'>remote</div>} name='remote' hiddenLabel
groupClassName={styles.inlineCheckGroup}
/>
</BForm.Row>
2022-02-17 17:23:43 +00:00
<MarkdownInput
topLevel
2022-02-17 17:23:43 +00:00
label='description'
name='text'
as={TextareaAutosize}
minRows={6}
required
/>
<Input
label={<>how to apply <small className='text-muted ml-2'>url or email address</small></>}
name='url'
required
/>
<Input
label={
<div className='d-flex align-items-center'>bid
2022-04-18 16:08:58 +00:00
<Info>
<ol className='font-weight-bold'>
<li>The higher your bid the higher your job will rank</li>
<li>The minimum bid is {sub.baseCost} sats/min</li>
<li>You can increase or decrease your bid, and edit or stop your job at anytime</li>
<li>Your job will be hidden if your wallet runs out of sats and can be unhidden by filling your wallet again</li>
</ol>
</Info>
2022-02-17 17:23:43 +00:00
</div>
}
name='maxBid'
onChange={async (formik, e) => {
if (e.target.value >= sub.baseCost && e.target.value <= 100000000) {
2022-03-07 19:30:21 +00:00
setMonthly(satsMin2Mo(e.target.value))
2022-02-17 17:23:43 +00:00
getAuctionPosition({ variables: { id: item?.id, bid: Number(e.target.value) } })
} else {
2022-03-07 19:30:21 +00:00
setMonthly(satsMin2Mo(sub.baseCost))
2022-02-17 17:23:43 +00:00
}
}}
2022-03-07 19:30:21 +00:00
append={<InputGroup.Text className='text-monospace'>sats/min</InputGroup.Text>}
hint={<PriceHint monthly={monthly} />}
2022-02-17 17:23:43 +00:00
/>
2022-03-07 18:12:41 +00:00
<><div className='font-weight-bold text-muted'>This bid puts your job in position: {position}</div></>
2022-02-26 16:41:30 +00:00
{item && <StatusControl item={item} />}
2022-02-17 17:23:43 +00:00
<SubmitButton variant='secondary' className='mt-3'>{item ? 'save' : 'post'}</SubmitButton>
</Form>
</>
)
}
2022-02-26 16:41:30 +00:00
function StatusControl ({ item }) {
let StatusComp
2022-02-28 20:09:21 +00:00
if (item.status !== 'STOPPED') {
2022-02-26 16:41:30 +00:00
StatusComp = () => {
return (
2022-02-28 20:09:21 +00:00
<>
<AccordianItem
header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>I want to stop my job</div>}
headerColor='var(--danger)'
body={
<Checkbox
label={<div className='font-weight-bold text-danger'>stop my job</div>} name='stop' inline
/>
2022-02-26 16:41:30 +00:00
}
2022-02-28 20:09:21 +00:00
/>
</>
2022-02-26 16:41:30 +00:00
)
}
2022-02-28 20:09:21 +00:00
} else {
2022-02-26 16:41:30 +00:00
StatusComp = () => {
return (
<AccordianItem
header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>I want to resume my job</div>}
headerColor='var(--success)'
body={
<Checkbox
label={<div className='font-weight-bold text-success'>resume my job</div>} name='start' inline
/>
}
/>
)
}
}
return (
<div className='my-2'>
2022-02-28 20:09:21 +00:00
{item.status === 'NOSATS' &&
<div className='text-danger font-weight-bold my-1'>
you have no sats! <Link href='/wallet?type=fund' passHref><a className='text-reset text-underline'>fund your wallet</a></Link> to resume your job
</div>}
2022-02-26 16:41:30 +00:00
<StatusComp />
</div>
)
}