From 3208dda3848ad739f54cebf44c423e2b68e85b2d Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 28 Feb 2024 20:45:28 +0000
Subject: feature: Add support for storing and previewing raw notes

---
 .../dashboard/bookmarks/components/AddBookmark.tsx | 96 ++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx

(limited to 'packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx')

diff --git a/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx b/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx
new file mode 100644
index 00000000..4f0de87a
--- /dev/null
+++ b/packages/web/app/dashboard/bookmarks/components/AddBookmark.tsx
@@ -0,0 +1,96 @@
+"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),
+  });
+
+  const invalidateBookmarksCache = api.useUtils().bookmarks.invalidate;
+  const createBookmarkMutator = api.bookmarks.createBookmark.useMutation({
+    onSuccess: () => {
+      invalidateBookmarksCache();
+    },
+    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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2