127 lines
3.2 KiB
TypeScript
127 lines
3.2 KiB
TypeScript
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
|
import { LayoutMode, useBookmarkPageStore } from "./-store"
|
|
import clsx from "clsx"
|
|
import { fetchApi, useAuthenticatedQuery } from "~/api"
|
|
import { LoadingSpinner } from "~/components/loading-spinner"
|
|
import { BookmarkList } from "./-bookmark-list"
|
|
import { useCallback } from "react"
|
|
import type { LinkBookmark } from "@markone/core/bookmark"
|
|
import { ActionBar } from "./-action-bar"
|
|
|
|
export const Route = createFileRoute("/bookmarks/$bookmarkId")({
|
|
component: RouteComponent,
|
|
})
|
|
|
|
function RouteComponent() {
|
|
return (
|
|
<Main>
|
|
<BookmarkListSidebar />
|
|
<BookmarkPreviewContainer>
|
|
<BookmarkPreview />
|
|
</BookmarkPreviewContainer>
|
|
</Main>
|
|
)
|
|
}
|
|
|
|
function Main({ children }: React.PropsWithChildren) {
|
|
const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
|
|
return (
|
|
<main className={clsx("w-full h-full grid", layoutMode === LayoutMode.SideBySide ? "grid-cols-4" : "grid-cols-1")}>
|
|
{children}
|
|
</main>
|
|
)
|
|
}
|
|
|
|
function BookmarkPreviewContainer({ children }: React.PropsWithChildren) {
|
|
const layoutMode = useBookmarkPageStore((state) => state.layoutMode)
|
|
|
|
return (
|
|
<div
|
|
className={clsx("col-span-3 h-screen border-l border-stone-700 dark:border-stone-300 flex dark:bg-stone-900", {
|
|
"absolute border-l-0": layoutMode === LayoutMode.Popup,
|
|
})}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BookmarkListSidebar() {
|
|
return (
|
|
<div className="flex flex-col py-16 w-full h-screen relative">
|
|
<header className="mb-4 text-start">
|
|
<h1 className="font-bold text-start mb-4">
|
|
<span className="invisible"> > </span>
|
|
YOUR BOOKMARKS
|
|
</h1>
|
|
</header>
|
|
<BookmarkListContainer />
|
|
<ActionBar className="absolute bottom-0 left-0 right-0" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BookmarkListContainer() {
|
|
const { bookmarkId } = Route.useParams()
|
|
const navigate = useNavigate()
|
|
const { data: bookmarks, status } = useAuthenticatedQuery(["bookmarks"], () =>
|
|
fetchApi("/bookmarks").then((res) => res.json()),
|
|
)
|
|
const handleBookmarkListItemAction = useBookmarkPageStore((state) => state.handleBookmarkListItemAction)
|
|
|
|
const onSelectedBookmarkChange = useCallback(
|
|
(bookmark: LinkBookmark) => {
|
|
navigate({ to: `/bookmarks/${bookmark.id}` })
|
|
},
|
|
[navigate],
|
|
)
|
|
|
|
switch (status) {
|
|
case "success":
|
|
return (
|
|
<BookmarkList
|
|
alwaysExpandItem
|
|
bookmarks={bookmarks}
|
|
selectedBookmarkId={bookmarkId}
|
|
onSelectionChange={onSelectedBookmarkChange}
|
|
onItemAction={handleBookmarkListItemAction}
|
|
/>
|
|
)
|
|
|
|
case "pending":
|
|
return (
|
|
<p>
|
|
Loading <LoadingSpinner />
|
|
</p>
|
|
)
|
|
|
|
case "error":
|
|
return <p>error loading bookmarks</p>
|
|
}
|
|
}
|
|
|
|
function BookmarkPreview() {
|
|
const { bookmarkId } = Route.useParams()
|
|
const { data, status } = useAuthenticatedQuery(["bookmarks", `${bookmarkId}.html`], () =>
|
|
fetchApi(`/bookmark/${bookmarkId}`, {
|
|
headers: {
|
|
Accept: "text/html",
|
|
},
|
|
}).then((res) => res.text()),
|
|
)
|
|
|
|
switch (status) {
|
|
case "pending":
|
|
return (
|
|
<p>
|
|
Loading <LoadingSpinner />
|
|
</p>
|
|
)
|
|
case "success":
|
|
return <iframe key="preview-iframe" title="asd" className="w-full h-full" srcDoc={data} />
|
|
|
|
default:
|
|
return null
|
|
}
|
|
}
|