wip: implement add bookmark

packages/web/src/api.ts

@@ -2,26 +2,46 @@ import { type DefaultError, type UseMutationOptions, type queryOptions, useQuery
 import { useNavigate } from "@tanstack/react-router"
 import { useEffect } from "react"
 
-class BadRequestError extends Error {}
+enum ApiErrorCode {
+	BadRequestBody = "BadRequestBody",
+	WebsiteUnreachable = "WebsiteUnreachable",
+	UnsupportedWebsite = "UnsupportedWebsite",
+}
+
+class BadRequestError extends Error {
+	constructor(
+		public readonly code: ApiErrorCode,
+		public readonly message: string = "Server returned status 400",
+	) {
+		super()
+	}
+}
 class InternalError extends Error {}
 class UnauthenticatedError extends Error {}
 
+interface ErrorBody {
+	code: string
+	message?: string
+}
+
 type QueryKey = ["bookmarks", ...ReadonlyArray<unknown>]
 
-async function fetchApi<TData>(route: string, init?: RequestInit): Promise<[TData | void, Response]> {
+async function fetchApi(route: string, init?: RequestInit): Promise<Response> {
 	const response = await fetch(`${import.meta.env.VITE_API_URL}/api${route}`, {
 		...init,
 		credentials: "include",
 	})
 	switch (response.status) {
 		case 200:
-			return [await response.json(), response]
 		case 204:
-			return [undefined, response]
-		case 400:
-			throw new BadRequestError()
-		case 401:
+			return response
+		case 400: {
+			const body: ErrorBody = await response.json()
+			throw new BadRequestError(body.code as ApiErrorCode, body.message)
+		}
+		case 401: {
 			throw new UnauthenticatedError()
+		}
 		default:
 			throw new InternalError()
 	}
@@ -51,5 +71,13 @@ function mutationOptions<TData = unknown, TError = DefaultError, TVariables = vo
 	return options
 }
 
-export { BadRequestError, InternalError, UnauthenticatedError, fetchApi, useAuthenticatedQuery, mutationOptions }
+export {
+	ApiErrorCode,
+	BadRequestError,
+	InternalError,
+	UnauthenticatedError,
+	fetchApi,
+	useAuthenticatedQuery,
+	mutationOptions,
+}
 export type { QueryKey }

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>

packages/web/src/bookmark/api.ts

@@ -27,4 +27,32 @@ function useDeleteBookmark() {
 	})
 }
 
-export { useDeleteBookmark }
+function useCreateBookmark() {
+	const navigate = useNavigate()
+	const queryClient = useQueryClient()
+
+	return useMutation({
+		mutationFn: ({ url, force = false }: { url: string; force?: boolean }) =>
+			fetchApi("/bookmarks", {
+				method: "POST",
+				body: JSON.stringify({
+					url,
+					force,
+					kind: "link",
+					tags: [],
+				}),
+			}).then((res) => (res.status === 204 ? Promise.resolve() : res.json())),
+		onError: (error) => {
+			if (error instanceof UnauthenticatedError) {
+				navigate({ to: "/login", replace: true })
+			}
+		},
+		onSuccess: (bookmark: Bookmark | undefined) => {
+			if (bookmark) {
+				queryClient.setQueryData(["bookmarks"], (bookmarks: Bookmark[]) => [bookmark, ...bookmarks])
+			}
+		},
+	})
+}
+
+export { useDeleteBookmark, useCreateBookmark }

packages/web/src/components/dialog.tsx

@@ -1,7 +1,7 @@
 function Dialog({ children }: React.PropsWithChildren) {
 	return (
-		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200">
-			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 after:translate-4 md:after:translate-8">
+		<div className="fixed z-20 top-0 bottom-0 left-0 right-0 flex items-center justify-center bg-stone-200 dark:bg-stone-900">
+			<div className="w-full m-8 md:w-2/3 lg:w-1/3 flex flex-col items-center border-2 bg-stone-300 dark:bg-stone-800 relative after:absolute after:-z-10 after:inset-0 after:bg-stone-400 dark:after:bg-stone-950 after:translate-4 md:after:translate-8">
 				{children}
 			</div>
 		</div>
@@ -9,11 +9,15 @@ function Dialog({ children }: React.PropsWithChildren) {
 }
 
 function DialogTitle({ children }: React.PropsWithChildren) {
-	return <h2 className="select-none font-bold w-full bg-stone-800 text-stone-300 text-center">{children}</h2>
+	return (
+		<h2 className="select-none font-bold w-full bg-stone-800 dark:bg-stone-300 text-stone-300 dark:text-stone-800 text-center">
+			{children}
+		</h2>
+	)
 }
 
 function DialogBody({ children }: React.PropsWithChildren) {
-	return <div className="m-8 text-center">{children}</div>
+	return <div className="m-8 w-full text-center">{children}</div>
 }
 
 function DialogActionRow({ children }: React.PropsWithChildren) {

packages/web/src/components/form-field.tsx

@@ -1,27 +1,34 @@
 import { clsx } from "clsx"
 import { useId } from "react"
+import { twMerge } from "tailwind-merge"
 
 interface FormFieldProps {
 	name: string
 	label: string
 	type: React.HTMLInputTypeAttribute
 	className?: string
+	labelClassName?: string
+	required?: boolean
 }
 
-function FormField({ name, label, type, className }: FormFieldProps) {
+function FormField({ name, label, type, className, labelClassName, required = false }: FormFieldProps) {
 	const id = useId()
 	return (
 		<div className={clsx("flex flex-col-reverse focus:text-teal-600", className)}>
 			<input
 				id={id}
+				required={required}
 				name={name}
 				type={type}
 				defaultValue=""
-				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 focus:border-teal-600 focus:ring-0 focus:outline-none"
+				className="peer px-3 pb-2 pt-3 border focus:border-2 border-stone-800 dark:border-stone-200 focus:border-teal-600 focus:ring-0 focus:outline-none"
 			/>
 			<label
 				htmlFor={id}
-				className="select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold"
+				className={twMerge(
+					"select-none border-x-2 border-transparent w-min translate-y-[55%] bg-stone-200 dark:bg-stone-900 mx-2 px-1 peer-focus:text-teal-600 peer-focus:font-bold",
+					labelClassName,
+				)}
 			>
 				{label}
 			</label>

packages/web/src/components/message.tsx

@@ -0,0 +1,22 @@
+import { clsx } from "clsx"
+
+enum MessageVariant {
+	Warning = "Warning",
+	Error = "Error",
+}
+
+const VARIANT_CLASSES = {
+	[MessageVariant.Warning]: "text-amber-600 dark:text-amber-200",
+	[MessageVariant.Error]: "text-red-500 dark:text-red-300",
+} as const
+
+interface MessageProps {
+	variant: MessageVariant
+	className?: string
+}
+
+function Message({ variant, className, children }: React.PropsWithChildren<MessageProps>) {
+	return <p className={clsx(VARIANT_CLASSES[variant], className)}>{children}</p>
+}
+
+export { Message, MessageVariant }