stacker.news/components/link-form.js

132 lines
5.0 KiB
JavaScript
Raw Normal View History

2021-08-11 20:13:10 +00:00
import { Form, Input, SubmitButton } from '../components/form'
import { useRouter } from 'next/router'
import * as Yup from 'yup'
2022-04-19 18:32:39 +00:00
import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client'
2021-08-11 20:34:10 +00:00
import Countdown from './countdown'
2021-09-11 21:52:19 +00:00
import AdvPostForm, { AdvPostInitial, AdvPostSchema } from './adv-post-form'
2021-10-28 20:49:51 +00:00
import { ITEM_FIELDS } from '../fragments/items'
import Item from './item'
import AccordianItem from './accordian-item'
2022-07-13 15:49:55 +00:00
import { MAX_TITLE_LENGTH } from '../lib/constants'
2022-08-18 18:15:24 +00:00
import FeeButton, { EditFeeButton } from './fee-button'
2021-08-11 20:13:10 +00:00
2022-03-10 22:00:04 +00:00
// eslint-disable-next-line
const URL = /^((https?|ftp):\/\/)?(www.)?(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i
2021-08-11 20:13:10 +00:00
export function LinkForm ({ item, editThreshold }) {
2021-10-28 20:49:51 +00:00
const router = useRouter()
2022-04-19 18:32:39 +00:00
const client = useApolloClient()
2021-10-28 20:49:51 +00:00
2021-08-22 15:25:17 +00:00
const [getPageTitle, { data }] = useLazyQuery(gql`
query PageTitle($url: String!) {
pageTitle(url: $url)
2021-10-27 16:03:43 +00:00
}`, {
fetchPolicy: 'network-only'
})
2021-10-28 20:49:51 +00:00
const [getDupes, { data: dupesData }] = useLazyQuery(gql`
${ITEM_FIELDS}
query Dupes($url: String!) {
dupes(url: $url) {
...ItemFields
}
}`, {
fetchPolicy: 'network-only'
})
const [upsertLink] = useMutation(
2021-08-11 20:13:10 +00:00
gql`
mutation upsertLink($id: ID, $title: String!, $url: String!, $boost: Int, $forward: String) {
upsertLink(id: $id, title: $title, url: $url, boost: $boost, forward: $forward) {
2021-08-11 20:13:10 +00:00
id
}
}`
)
2021-10-28 20:49:51 +00:00
2022-04-19 18:32:39 +00:00
const LinkSchema = Yup.object({
2022-07-13 15:49:55 +00:00
title: Yup.string().required('required').trim()
.max(MAX_TITLE_LENGTH,
({ max, value }) => `${Math.abs(max - value.length)} too many`),
2022-04-19 18:32:39 +00:00
url: Yup.string().matches(URL, 'invalid url').required('required'),
...AdvPostSchema(client)
})
2021-08-11 20:13:10 +00:00
return (
<Form
initial={{
title: item?.title || '',
2021-09-11 21:52:19 +00:00
url: item?.url || '',
2022-08-18 18:15:24 +00:00
...AdvPostInitial({ forward: item?.fwdUser?.name })
2021-08-11 20:13:10 +00:00
}}
schema={LinkSchema}
2022-07-13 15:49:55 +00:00
onSubmit={async ({ boost, title, ...values }) => {
const { error } = await upsertLink({
2022-07-13 15:49:55 +00:00
variables: { id: item?.id, boost: Number(boost), title: title.trim(), ...values }
})
2021-08-11 20:13:10 +00:00
if (error) {
throw new Error({ message: error.toString() })
}
2022-01-07 16:50:41 +00:00
if (item) {
2022-03-10 18:25:16 +00:00
await router.push(`/items/${item.id}`)
2022-01-07 16:50:41 +00:00
} else {
2022-03-10 18:25:16 +00:00
await router.push('/recent')
2022-01-07 16:50:41 +00:00
}
2021-08-11 20:13:10 +00:00
}}
2022-01-07 18:28:23 +00:00
storageKeyPrefix={item ? undefined : 'link'}
2021-08-11 20:13:10 +00:00
>
<Input
label='title'
name='title'
2021-08-22 15:25:17 +00:00
overrideValue={data?.pageTitle}
2021-08-11 20:13:10 +00:00
required
/>
<Input
label='url'
name='url'
required
autoFocus
2021-08-11 20:13:10 +00:00
hint={editThreshold
2022-01-07 16:50:41 +00:00
? <div className='text-muted font-weight-bold'><Countdown date={editThreshold} /></div>
2021-08-11 20:13:10 +00:00
: null}
2021-08-22 15:25:17 +00:00
onChange={async (formik, e) => {
if ((/^ *$/).test(formik?.values.title)) {
getPageTitle({
variables: { url: e.target.value }
})
}
2021-10-28 20:49:51 +00:00
getDupes({
variables: { url: e.target.value }
})
2021-08-22 15:25:17 +00:00
}}
2021-08-11 20:13:10 +00:00
/>
2022-08-18 18:15:24 +00:00
<AdvPostForm edit={!!item} />
2022-08-10 15:06:31 +00:00
<div className='mt-3'>
{item
2022-08-18 18:15:24 +00:00
? <EditFeeButton
paidSats={item.meSats}
parentId={null} text='save' ChildButton={SubmitButton} variant='secondary'
/>
2022-08-10 15:06:31 +00:00
: <FeeButton
baseFee={1} parentId={null} text='post'
ChildButton={SubmitButton} variant='secondary'
/>}
</div>
2021-10-28 20:49:51 +00:00
{dupesData?.dupes?.length > 0 &&
<div className='mt-3'>
<AccordianItem
show
headerColor='#c03221'
header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>dupes</div>}
body={
<div>
{dupesData.dupes.map((item, i) => (
<Item item={item} key={item.id} />
))}
</div>
}
/>
</div>}
2021-08-11 20:13:10 +00:00
</Form>
)
}