diff options
Diffstat (limited to 'packages/web/components/dashboard')
4 files changed, 170 insertions, 100 deletions
diff --git a/packages/web/components/dashboard/bookmarks/AddBookmark.tsx b/packages/web/components/dashboard/bookmarks/AddBookmark.tsx deleted file mode 100644 index d12fc663..00000000 --- a/packages/web/components/dashboard/bookmarks/AddBookmark.tsx +++ /dev/null @@ -1,100 +0,0 @@ -"use client"; - -import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; -import { Pencil, Plus } from "lucide-react"; -import { useForm, SubmitErrorHandler } from "react-hook-form"; -import { z } from "zod"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { toast } from "@/components/ui/use-toast"; -import { api } from "@/lib/trpc"; -import { ActionButton } from "@/components/ui/action-button"; -import { Button } from "@/components/ui/button"; -import { BookmarkedTextEditor } from "./BookmarkedTextEditor"; -import { useState } from "react"; - -function AddText() { - const [isEditorOpen, setEditorOpen] = useState(false); - - return ( - <div className="flex"> - <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} /> - <Button className="m-auto" onClick={() => setEditorOpen(true)}> - <Pencil /> - </Button> - </div> - ); -} - -function AddLink() { - const formSchema = z.object({ - url: z.string().url({ message: "The link must be a valid URL" }), - }); - const form = useForm<z.infer<typeof formSchema>>({ - resolver: zodResolver(formSchema), - defaultValues: { - url: "", - }, - }); - - const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate; - const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({ - onSuccess: () => { - invalidateBookmarksCache(); - form.reset(); - }, - onError: () => { - toast({ description: "Something went wrong", variant: "destructive" }); - }, - }); - - 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="flex-grow" - onSubmit={form.handleSubmit( - (value) => - createBookmarkMutator.mutate({ url: value.url, type: "link" }), - onError, - )} - > - <div className="flex w-full items-center space-x-2 py-4"> - <FormField - control={form.control} - name="url" - render={({ field }) => { - return ( - <FormItem className="flex-1"> - <FormControl> - <Input type="text" placeholder="Link" {...field} /> - </FormControl> - </FormItem> - ); - }} - /> - <ActionButton type="submit" loading={createBookmarkMutator.isPending}> - <Plus /> - </ActionButton> - </div> - </form> - </Form> - ); -} - -export default function AddBookmark() { - return ( - <div className="container flex gap-2"> - <AddLink /> - <AddText /> - </div> - ); -} diff --git a/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx b/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx new file mode 100644 index 00000000..5973f909 --- /dev/null +++ b/packages/web/components/dashboard/bookmarks/AddLinkButton.tsx @@ -0,0 +1,102 @@ +import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { useForm, SubmitErrorHandler } from "react-hook-form"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { toast } from "@/components/ui/use-toast"; +import { api } from "@/lib/trpc"; +import { ActionButton } from "@/components/ui/action-button"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { useState } from "react"; + +export function AddLinkButton({ children }: { children: React.ReactNode }) { + const [isOpen, setOpen] = useState(false); + + const formSchema = z.object({ + url: z.string().url({ message: "The link must be a valid URL" }), + }); + const form = useForm<z.infer<typeof formSchema>>({ + resolver: zodResolver(formSchema), + defaultValues: { + url: "", + }, + }); + + const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate; + const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({ + onSuccess: () => { + invalidateBookmarksCache(); + form.reset(); + setOpen(false); + }, + onError: () => { + toast({ description: "Something went wrong", variant: "destructive" }); + }, + }); + + const onError: SubmitErrorHandler<z.infer<typeof formSchema>> = (errors) => { + toast({ + description: Object.values(errors) + .map((v) => v.message) + .join("\n"), + variant: "destructive", + }); + }; + + return ( + <Dialog open={isOpen} onOpenChange={setOpen}> + <DialogTrigger asChild>{children}</DialogTrigger> + <DialogContent> + <Form {...form}> + <DialogHeader> + <DialogTitle>Add Link</DialogTitle> + </DialogHeader> + <form + className="flex flex-col gap-4" + onSubmit={form.handleSubmit( + (value) => + createBookmarkMutator.mutate({ url: value.url, type: "link" }), + onError, + )} + > + <FormField + control={form.control} + name="url" + render={({ field }) => { + return ( + <FormItem className="flex-1"> + <FormControl> + <Input type="text" placeholder="Link" {...field} /> + </FormControl> + </FormItem> + ); + }} + /> + <DialogFooter className="flex-shrink gap-1 sm:justify-end"> + <DialogClose asChild> + <Button type="button" variant="secondary"> + Close + </Button> + </DialogClose> + <ActionButton + type="submit" + loading={createBookmarkMutator.isPending} + > + Add + </ActionButton> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ); +} diff --git a/packages/web/components/dashboard/bookmarks/TopNav.tsx b/packages/web/components/dashboard/bookmarks/TopNav.tsx new file mode 100644 index 00000000..6c0f18e5 --- /dev/null +++ b/packages/web/components/dashboard/bookmarks/TopNav.tsx @@ -0,0 +1,43 @@ +"use client"; + +import { Link, NotebookPen } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { BookmarkedTextEditor } from "./BookmarkedTextEditor"; +import { useState } from "react"; +import { AddLinkButton } from "./AddLinkButton"; +import { SearchInput } from "../search/SearchInput"; + +function AddText() { + const [isEditorOpen, setEditorOpen] = useState(false); + + return ( + <div className="flex"> + <BookmarkedTextEditor open={isEditorOpen} setOpen={setEditorOpen} /> + <Button className="m-auto" onClick={() => setEditorOpen(true)}> + <NotebookPen /> + </Button> + </div> + ); +} + +function AddLink() { + return ( + <div className="flex"> + <AddLinkButton> + <Button className="m-auto"> + <Link /> + </Button> + </AddLinkButton> + </div> + ); +} + +export default function TopNav() { + return ( + <div className="container flex gap-2 py-4"> + <SearchInput /> + <AddLink /> + <AddText /> + </div> + ); +} diff --git a/packages/web/components/dashboard/search/SearchInput.tsx b/packages/web/components/dashboard/search/SearchInput.tsx new file mode 100644 index 00000000..73d14c90 --- /dev/null +++ b/packages/web/components/dashboard/search/SearchInput.tsx @@ -0,0 +1,25 @@ +import { Input } from "@/components/ui/input"; +import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search"; +import { cn } from "@/lib/utils"; +import React from "react"; + +const SearchInput = React.forwardRef< + HTMLInputElement, + React.HTMLAttributes<HTMLInputElement> & { loading?: boolean } +>(({ className, loading = false, ...props }, ref) => { + const { debounceSearch, searchQuery } = useDoBookmarkSearch(); + + return ( + <Input + ref={ref} + placeholder="Search" + defaultValue={searchQuery} + onChange={(e) => debounceSearch(e.target.value)} + className={cn(loading ? "animate-pulse-border" : undefined, className)} + {...props} + /> + ); +}); +SearchInput.displayName = "SearchInput"; + +export { SearchInput }; |