import { useState, useEffect, useCallback } from 'react' import { Form, Input, SubmitButton } from '../components/form' import { useRouter } from 'next/router' import { gql, useApolloClient, useLazyQuery, useMutation } from '@apollo/client' import Countdown from './countdown' import AdvPostForm, { AdvPostInitial } from './adv-post-form' import { ITEM_FIELDS } from '../fragments/items' import Item from './item' import AccordianItem from './accordian-item' import FeeButton, { EditFeeButton } from './fee-button' import Delete from './delete' import Button from 'react-bootstrap/Button' import { linkSchema } from '../lib/validate' import Moon from '../svgs/moon-fill.svg' import { SubSelectInitial } from './sub-select-form' import CancelButton from './cancel-button' import { useAnonymous } from '../lib/anonymous' export function LinkForm ({ item, sub, editThreshold, children }) { const router = useRouter() const client = useApolloClient() const schema = linkSchema(client) // if Web Share Target API was used const shareUrl = router.query.url const shareTitle = router.query.title const [getPageTitleAndUnshorted, { data }] = useLazyQuery(gql` query PageTitleAndUnshorted($url: String!) { pageTitleAndUnshorted(url: $url) { title unshorted } }`) const [getDupes, { data: dupesData, loading: dupesLoading }] = useLazyQuery(gql` ${ITEM_FIELDS} query Dupes($url: String!) { dupes(url: $url) { ...ItemFields } }`, { onCompleted: () => setPostDisabled(false) }) const [getRelated, { data: relatedData }] = useLazyQuery(gql` ${ITEM_FIELDS} query related($title: String!) { related(title: $title, minMatch: "75%", limit: 3) { items { ...ItemFields } } }`) const related = [] for (const item of relatedData?.related?.items || []) { let found = false for (const ditem of dupesData?.dupes || []) { if (ditem.id === item.id) { found = true break } } if (!found) { related.push(item) } } const [upsertLink] = useMutation( gql` mutation upsertLink($sub: String, $id: ID, $title: String!, $url: String!, $boost: Int, $forward: String, $invoiceHash: String) { upsertLink(sub: $sub, id: $id, title: $title, url: $url, boost: $boost, forward: $forward, invoiceHash: $invoiceHash) { id } }` ) const submitUpsertLink = useCallback( async (_, boost, title, values, invoiceHash) => { const { error } = await upsertLink({ variables: { sub: item?.subName || sub?.name, id: item?.id, boost: boost ? Number(boost) : undefined, title: title.trim(), invoiceHash, ...values } }) if (error) { throw new Error({ message: error.toString() }) } if (item) { await router.push(`/items/${item.id}`) } else { const prefix = sub?.name ? `/~${sub.name}` : '' await router.push(prefix + '/recent') } }, [upsertLink, router]) const anonUpsertLink = useAnonymous(submitUpsertLink) useEffect(() => { if (data?.pageTitleAndUnshorted?.title) { setTitleOverride(data.pageTitleAndUnshorted.title) } }, [data?.pageTitleAndUnshorted?.title]) useEffect(() => { if (data?.pageTitleAndUnshorted?.unshorted) { getDupes({ variables: { url: data?.pageTitleAndUnshorted?.unshorted } }) } }, [data?.pageTitleAndUnshorted?.unshorted]) const [postDisabled, setPostDisabled] = useState(false) const [titleOverride, setTitleOverride] = useState() return (
{ await anonUpsertLink(cost, boost, title, values) }} storageKeyPrefix={item ? undefined : 'link'} > {children} { if (e.target.value) { getRelated({ variables: { title: e.target.value } }) } if (e.target.value === e.target.value.toUpperCase()) { setTitleOverride(e.target.value.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase())) } }} /> : null} onChange={async (formik, e) => { if ((/^ *$/).test(formik?.values.title)) { getPageTitleAndUnshorted({ variables: { url: e.target.value } }) } else { client.cache.modify({ fields: { pageTitleAndUnshorted () { return null } } }) } if (e.target.value) { setPostDisabled(true) setTimeout(() => setPostDisabled(false), 3000) getDupes({ variables: { url: e.target.value } }) } }} />
{item ? (
router.push(`/items/${item.id}`)}>
) : (
{dupesLoading &&
searching for dupes
}
)}
{!item && <> {dupesData?.dupes?.length > 0 &&
dupes
} body={
{dupesData.dupes.map((item, i) => ( ))}
} /> }
0 ? '' : 'invisible'}`}> similar
} body={
{related.map((item, i) => ( ))}
} /> } ) }