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 { useInvoiceable } from './invoice' import { normalizeForwards } from '../lib/form' 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: [ItemForwardInput], $invoiceHash: String, $invoiceHmac: String) { upsertLink(sub: $sub, id: $id, title: $title, url: $url, boost: $boost, forward: $forward, invoiceHash: $invoiceHash, invoiceHmac: $invoiceHmac) { id } }` ) const submitUpsertLink = useCallback( async (_, boost, title, values, invoiceHash, invoiceHmac) => { const { error } = await upsertLink({ variables: { sub: item?.subName || sub?.name, id: item?.id, boost: boost ? Number(boost) : undefined, title: title.trim(), invoiceHash, invoiceHmac, ...values, forward: normalizeForwards(values.forward) } }) 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 invoiceableUpsertLink = useInvoiceable(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 (
) }