1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
import { ActionButton } from "@/components/ui/action-button";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { cn } from "@/lib/utils";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
export default function EditorCard({ className }: { className?: string }) {
const formSchema = z.object({
text: z.string(),
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
text: "",
},
});
const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
const { mutate, isPending } = api.bookmarks.createBookmark.useMutation({
onSuccess: () => {
invalidateBookmarksCache();
form.reset();
},
onError: () => {
toast({ description: "Something went wrong", variant: "destructive" });
},
});
const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = (data) => {
const text = data.text.trim();
try {
new URL(text);
mutate({ type: "link", url: text });
} catch (e) {
// Not a URL
mutate({ type: "text", text });
}
};
const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => {
toast({
description: Object.values(errors)
.map((v) => v.message)
.join("\n"),
variant: "destructive",
});
};
return (
<Form {...form}>
<form
className={cn(
className,
"flex h-96 flex-col gap-2 rounded-xl bg-white p-4",
)}
onSubmit={form.handleSubmit(onSubmit, onError)}
>
<p className="text-sm">NEW ITEM</p>
<hr />
<FormField
control={form.control}
name="text"
render={({ field }) => {
return (
<FormItem className="flex-1">
<FormControl>
<Textarea
disabled={isPending}
className="h-full w-full resize-none border-none text-lg focus-visible:ring-0"
placeholder={
"Paste a link, write a note or drag and drop an image in here ..."
}
onKeyDown={(e) => {
if (e.key === "Enter" && e.metaKey) {
form.handleSubmit(onSubmit, onError)();
}
}}
{...field}
/>
</FormControl>
</FormItem>
);
}}
/>
<ActionButton loading={isPending} type="submit" variant="default">
{form.formState.dirtyFields.text ? "Press ⌘ + Enter to Save" : "Save"}
</ActionButton>
</form>
</Form>
);
}
|
