mirror of
https://github.com/linsa-io/linsa.git
synced 2026-03-26 19:11:17 +01:00
291 lines
8.8 KiB
TypeScript
291 lines
8.8 KiB
TypeScript
import * as React from "react"
|
|
import { useAccount, useCoState } from "@/lib/providers/jazz-provider"
|
|
import { PersonalLink, Topic } from "@/lib/schema"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { toast } from "sonner"
|
|
import { createLinkSchema, LinkFormValues } from "./schema"
|
|
import { cn, generateUniqueSlug } from "@/lib/utils"
|
|
import { Form } from "@/components/ui/form"
|
|
import { Button } from "@/components/ui/button"
|
|
import { UrlInput } from "./url-input"
|
|
import { UrlBadge } from "./url-badge"
|
|
import { TitleInput } from "./title-input"
|
|
import { NotesSection } from "./notes-section"
|
|
import { DescriptionInput } from "./description-input"
|
|
import { atom, useAtom } from "jotai"
|
|
import { linkLearningStateSelectorAtom } from "@/store/link"
|
|
import { FormField, FormItem, FormLabel } from "@/components/ui/form"
|
|
import { LearningStateSelector } from "@/components/custom/learning-state-selector"
|
|
import { TopicSelector, topicSelectorAtom } from "@/components/custom/topic-selector"
|
|
import { JAZZ_GLOBAL_GROUP_ID } from "@/lib/constants"
|
|
|
|
export const globalLinkFormExceptionRefsAtom = atom<React.RefObject<HTMLElement>[]>([])
|
|
|
|
interface LinkFormProps extends React.ComponentPropsWithoutRef<"form"> {
|
|
onClose?: () => void
|
|
onSuccess?: () => void
|
|
onFail?: () => void
|
|
personalLink?: PersonalLink
|
|
exceptionsRefs?: React.RefObject<HTMLElement>[]
|
|
}
|
|
|
|
const defaultValues: Partial<LinkFormValues> = {
|
|
url: "",
|
|
icon: "",
|
|
title: "",
|
|
description: "",
|
|
completed: false,
|
|
notes: "",
|
|
learningState: undefined,
|
|
topic: null
|
|
}
|
|
|
|
export const LinkForm: React.FC<LinkFormProps> = ({
|
|
onSuccess,
|
|
onFail,
|
|
personalLink,
|
|
onClose,
|
|
exceptionsRefs = []
|
|
}) => {
|
|
const [istopicSelectorOpen] = useAtom(topicSelectorAtom)
|
|
const [islearningStateSelectorOpen] = useAtom(linkLearningStateSelectorAtom)
|
|
const [globalExceptionRefs] = useAtom(globalLinkFormExceptionRefsAtom)
|
|
|
|
const formRef = React.useRef<HTMLFormElement>(null)
|
|
|
|
const [isFetching, setIsFetching] = React.useState(false)
|
|
const [urlFetched, setUrlFetched] = React.useState<string | null>(null)
|
|
const { me } = useAccount()
|
|
const selectedLink = useCoState(PersonalLink, personalLink?.id)
|
|
|
|
const form = useForm<LinkFormValues>({
|
|
resolver: zodResolver(createLinkSchema),
|
|
defaultValues,
|
|
mode: "all"
|
|
})
|
|
|
|
const topicName = form.watch("topic")
|
|
const findTopic = React.useMemo(
|
|
() => me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me),
|
|
[topicName, me]
|
|
)
|
|
|
|
const selectedTopic = useCoState(Topic, findTopic, {})
|
|
|
|
const allExceptionRefs = React.useMemo(
|
|
() => [...exceptionsRefs, ...globalExceptionRefs],
|
|
[exceptionsRefs, globalExceptionRefs]
|
|
)
|
|
|
|
React.useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const isClickInsideForm = formRef.current && formRef.current.contains(event.target as Node)
|
|
|
|
const isClickInsideExceptions = allExceptionRefs.some((ref, index) => {
|
|
const isInside = ref.current && ref.current.contains(event.target as Node)
|
|
return isInside
|
|
})
|
|
|
|
if (!isClickInsideForm && !istopicSelectorOpen && !islearningStateSelectorOpen && !isClickInsideExceptions) {
|
|
onClose?.()
|
|
}
|
|
}
|
|
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside)
|
|
}
|
|
}, [islearningStateSelectorOpen, istopicSelectorOpen, allExceptionRefs, onClose])
|
|
|
|
React.useEffect(() => {
|
|
if (selectedLink) {
|
|
setUrlFetched(selectedLink.url)
|
|
form.reset({
|
|
url: selectedLink.url,
|
|
icon: selectedLink.icon,
|
|
title: selectedLink.title,
|
|
description: selectedLink.description,
|
|
completed: selectedLink.completed,
|
|
notes: selectedLink.notes,
|
|
learningState: selectedLink.learningState,
|
|
topic: selectedLink.topic?.name
|
|
})
|
|
}
|
|
}, [selectedLink, selectedLink?.topic, form])
|
|
|
|
const fetchMetadata = async (url: string) => {
|
|
setIsFetching(true)
|
|
try {
|
|
const res = await fetch(`/api/metadata?url=${encodeURIComponent(url)}`, { cache: "force-cache" })
|
|
const data = await res.json()
|
|
setUrlFetched(data.url)
|
|
form.setValue("url", data.url, {
|
|
shouldValidate: true
|
|
})
|
|
form.setValue("icon", data.icon ?? "", {
|
|
shouldValidate: true
|
|
})
|
|
form.setValue("title", data.title, {
|
|
shouldValidate: true
|
|
})
|
|
if (!form.getValues("description"))
|
|
form.setValue("description", data.description, {
|
|
shouldValidate: true
|
|
})
|
|
form.setFocus("title")
|
|
} catch (err) {
|
|
console.error("Failed to fetch metadata", err)
|
|
} finally {
|
|
setIsFetching(false)
|
|
}
|
|
}
|
|
|
|
const onSubmit = (values: LinkFormValues) => {
|
|
if (isFetching || !me) return
|
|
|
|
try {
|
|
const slug = generateUniqueSlug(values.title)
|
|
|
|
if (selectedLink) {
|
|
const { topic, ...diffValues } = values
|
|
|
|
if (!selectedTopic) {
|
|
selectedLink.applyDiff({ ...diffValues, slug, updatedAt: new Date() })
|
|
} else {
|
|
selectedLink.applyDiff({ ...values, slug, topic: selectedTopic })
|
|
}
|
|
} else {
|
|
const newPersonalLink = PersonalLink.create(
|
|
{
|
|
...values,
|
|
slug,
|
|
topic: selectedTopic,
|
|
sequence: me.root?.personalLinks?.length || 1,
|
|
createdAt: new Date(),
|
|
updatedAt: new Date()
|
|
},
|
|
{ owner: me._owner }
|
|
)
|
|
me.root?.personalLinks?.push(newPersonalLink)
|
|
}
|
|
form.reset(defaultValues)
|
|
onSuccess?.()
|
|
} catch (error) {
|
|
onFail?.()
|
|
console.error("Failed to create/update link", error)
|
|
toast.error(personalLink ? "Failed to update link" : "Failed to create link")
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
form.reset(defaultValues)
|
|
onClose?.()
|
|
}
|
|
|
|
const handleResetUrl = () => {
|
|
setUrlFetched(null)
|
|
form.setFocus("url")
|
|
form.reset({ url: "", title: "", icon: "", description: "" })
|
|
}
|
|
|
|
const canSubmit = form.formState.isValid && !form.formState.isSubmitting
|
|
|
|
return (
|
|
<div className="p-3 transition-all">
|
|
<div className={cn("bg-muted/30 relative rounded-md border", isFetching && "opacity-50")}>
|
|
<Form {...form}>
|
|
<form ref={formRef} onSubmit={form.handleSubmit(onSubmit)} className="relative min-w-0 flex-1">
|
|
{isFetching && <div className="absolute inset-0 z-10 bg-transparent" aria-hidden="true" />}
|
|
<div className="flex flex-col gap-1.5 p-3">
|
|
<div className="flex flex-row items-start justify-between">
|
|
<UrlInput urlFetched={urlFetched} fetchMetadata={fetchMetadata} isFetchingUrlMetadata={isFetching} />
|
|
{urlFetched && <TitleInput urlFetched={urlFetched} />}
|
|
|
|
<div className="flex flex-row items-center gap-2">
|
|
<FormField
|
|
control={form.control}
|
|
name="learningState"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-0">
|
|
<FormLabel className="sr-only">Topic</FormLabel>
|
|
<LearningStateSelector
|
|
value={field.value}
|
|
onChange={value => {
|
|
// toggle, if already selected set undefined
|
|
form.setValue("learningState", field.value === value ? undefined : value)
|
|
}}
|
|
showSearch={false}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="topic"
|
|
render={({ field }) => (
|
|
<FormItem className="space-y-0">
|
|
<FormLabel className="sr-only">Topic</FormLabel>
|
|
<TopicSelector
|
|
{...field}
|
|
renderSelectedText={() => (
|
|
<span className="truncate">{selectedTopic?.prettyName || "Topic"}</span>
|
|
)}
|
|
/>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<DescriptionInput />
|
|
<UrlBadge urlFetched={urlFetched} handleResetUrl={handleResetUrl} />
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center justify-between gap-2 rounded-b-md border-t px-3 py-2">
|
|
<NotesSection />
|
|
|
|
{isFetching ? (
|
|
<div className="flex w-auto items-center justify-end gap-x-2">
|
|
<span className="text-muted-foreground flex items-center text-sm">
|
|
<svg className="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24">
|
|
<circle
|
|
className="opacity-25"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke="currentColor"
|
|
strokeWidth="4"
|
|
fill="none"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
|
/>
|
|
</svg>
|
|
Fetching metadata...
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex w-auto items-center justify-end gap-x-2">
|
|
<Button size="sm" type="button" variant="ghost" onClick={handleCancel}>
|
|
Cancel
|
|
</Button>
|
|
<Button size="sm" type="submit" disabled={!canSubmit}>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
LinkForm.displayName = "LinkForm"
|