wip: implement add bookmark

packages/web/src/app/bookmarks.tsx

@@ -1,14 +1,16 @@
 import type { LinkBookmark } from "@markone/core/bookmark"
 import { createFileRoute } from "@tanstack/react-router"
 import clsx from "clsx"
-import { useEffect } from "react"
+import { useEffect, useId, useState } from "react"
 import { create } from "zustand"
-import { fetchApi, useAuthenticatedQuery } from "~/api"
+import { fetchApi, useAuthenticatedQuery, BadRequestError, ApiErrorCode } from "~/api"
+import { useCreateBookmark, useDeleteBookmark } from "~/bookmark/api"
 import { Button } from "~/components/button"
-import { useDeleteBookmark } from "~/bookmark/api"
+import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
+import { Message, MessageVariant } from "~/components/message"
+import { FormField } from "~/components/form-field"
 import { LoadingSpinner } from "~/components/loading-spinner"
 import { useMnemonics } from "~/hooks/use-mnemonics"
-import { Dialog, DialogActionRow, DialogBody, DialogTitle } from "~/components/dialog"
 
 const LAYOUT_MODE = {
 	popup: "popup",
@@ -157,7 +159,7 @@ function PageDialog() {
 		case ActiveDialog.None:
 			return null
 		case ActiveDialog.AddBookmark:
-			return null
+			return <AddBookmarkDialog />
 		case ActiveDialog.DeleteBookmark:
 			return <DeleteBookmarkDialog />
 	}
@@ -243,9 +245,94 @@ function DeleteBookmarkDialog() {
 	)
 }
 
+function AddBookmarkDialog() {
+	const [isWebsiteUnreachable, setIsWebsiteUnreachable] = useState(false)
+	const createBookmarkMutation = useCreateBookmark()
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+	const formId = useId()
+
+	useMnemonics(
+		{
+			c: cancel,
+		},
+		{ active: true },
+	)
+
+	async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+		event.preventDefault()
+
+		const formData = new FormData(event.currentTarget)
+		const url = formData.get("link")
+		if (url && typeof url === "string") {
+			try {
+				await createBookmarkMutation.mutateAsync({ url, force: isWebsiteUnreachable })
+			} catch (error) {
+				if (error instanceof BadRequestError && error.code === ApiErrorCode.WebsiteUnreachable) {
+					setIsWebsiteUnreachable(true)
+				}
+			}
+		}
+	}
+
+	function cancel() {
+		setActiveDialog(ActiveDialog.None)
+	}
+
+	function message() {
+		if (createBookmarkMutation.isPending) {
+			return (
+				<p>
+					Loading <LoadingSpinner />
+				</p>
+			)
+		}
+		if (isWebsiteUnreachable) {
+			return (
+				<Message variant={MessageVariant.Warning} className="px-4">
+					The link does not seem to be reachable. Click "SAVE" to save anyways.
+				</Message>
+			)
+		}
+		if (createBookmarkMutation.status === "error") {
+			return (
+				<Message variant={MessageVariant.Error} className="px-4">
+					An error occurred when saving bookmark
+				</Message>
+			)
+		}
+		return null
+	}
+
+	return (
+		<Dialog>
+			<DialogTitle>NEW BOOKMARK</DialogTitle>
+			<DialogBody>
+				{message()}
+				<form id={formId} className="px-8" onSubmit={onSubmit}>
+					<FormField
+						type="text"
+						name="link"
+						label="LINK"
+						className="w-full"
+						labelClassName="bg-stone-300 dark:bg-stone-800"
+					/>
+				</form>
+			</DialogBody>
+			<DialogActionRow>
+				<Button type="submit" disabled={createBookmarkMutation.isPending} form={formId}>
+					SAVE
+				</Button>
+				<Button type="button" disabled={createBookmarkMutation.isPending} onClick={cancel}>
+					<span className="underline">C</span>ANCEL
+				</Button>
+			</DialogActionRow>
+		</Dialog>
+	)
+}
+
 function BookmarkListSection() {
 	const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
-		fetchApi<LinkBookmark[]>("/bookmarks").then(([data]) => data),
+		fetchApi("/bookmarks").then((res) => res.json()),
 	)
 
 	switch (status) {
@@ -485,9 +572,22 @@ function OpenBookmarkPreviewButton() {
 }
 
 function ActionBar() {
+	const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
+
+	useMnemonics(
+		{
+			a: addBookmark,
+		},
+		{ active: true },
+	)
+
+	function addBookmark() {
+		setActiveDialog(ActiveDialog.AddBookmark)
+	}
+
 	return (
 		<div className="fixed z-10 bottom-0 left-0 right-0 border-t-1 flex flex-row justify-center py-4 space-x-4">
-			<Button>
+			<Button onClick={addBookmark}>
 				<span className="underline">A</span>DD
 			</Button>
 			<Button>