implement tag filtering ui
This commit is contained in:
@@ -60,7 +60,7 @@ async function listUserBookmarks(request: Bun.BunRequest<"/api/bookmarks">, user
|
||||
if (queryParams.q || queryParams.tags) {
|
||||
let tagIds: TagId[] = []
|
||||
if (queryParams.tags) {
|
||||
const tagNames = queryParams.tags.split(",")
|
||||
const tagNames = queryParams.tags.split(" ")
|
||||
const tagIdsQuery = db.query<{ id: string }, string[]>(
|
||||
`SELECT id FROM tags WHERE name IN (${Array(tagNames.length).fill("?").join(",")})`,
|
||||
)
|
||||
|
@@ -52,12 +52,14 @@ interface BookmarkPageState {
|
||||
bookmarkToBeEdited: Bookmark | null
|
||||
layoutMode: LayoutMode
|
||||
dialog: DialogData
|
||||
hasDialog: boolean
|
||||
actionBarContent: ActionBarContent
|
||||
statusMessage: string
|
||||
isSearchBarActive: boolean
|
||||
isTagFilterWindowOpen: boolean
|
||||
|
||||
openSearchBar: () => void
|
||||
closeSearchBar: () => void
|
||||
openTagFilterWindow: () => void
|
||||
closeTagFilterWindow: () => void
|
||||
toggleTagFilterWindow: () => void
|
||||
setActionBarContent: (content: ActionBarContent) => void
|
||||
handleBookmarkListItemAction: (bookmark: Bookmark, action: BookmarkListItemAction) => void
|
||||
setActiveDialog: (dialog: DialogData) => void
|
||||
@@ -73,14 +75,22 @@ const useBookmarkPageStore = create<BookmarkPageState>()((set, get) => ({
|
||||
dialog: NO_DIALOG,
|
||||
actionBarContent: { kind: ActionBarContentKind.Normal },
|
||||
statusMessage: "",
|
||||
isSearchBarActive: false,
|
||||
isTagFilterWindowOpen: false,
|
||||
|
||||
openSearchBar() {
|
||||
set({ isSearchBarActive: true })
|
||||
get hasDialog(): boolean {
|
||||
return get().dialog.kind !== DialogKind.None
|
||||
},
|
||||
|
||||
closeSearchBar() {
|
||||
set({ isSearchBarActive: false })
|
||||
toggleTagFilterWindow() {
|
||||
set({ isTagFilterWindowOpen: !get().isTagFilterWindowOpen })
|
||||
},
|
||||
|
||||
openTagFilterWindow() {
|
||||
set({ isTagFilterWindowOpen: true })
|
||||
},
|
||||
|
||||
closeTagFilterWindow() {
|
||||
set({ isTagFilterWindowOpen: false })
|
||||
},
|
||||
|
||||
setActionBarContent(content: ActionBarContent) {
|
||||
|
@@ -1,10 +1,15 @@
|
||||
import { autoUpdate, offset, useFloating } from "@floating-ui/react-dom"
|
||||
import type { Tag } from "@markone/core"
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router"
|
||||
import { useCallback, useEffect, useId, useRef } from "react"
|
||||
import { memo, useCallback, useEffect, useId, useRef } from "react"
|
||||
import { fetchApi, useAuthenticatedQuery } from "~/api"
|
||||
import { ActionBar } from "~/app/bookmarks/-action-bar.tsx"
|
||||
import { useLogOut } from "~/auth.ts"
|
||||
import { useTags } from "~/bookmark/api.ts"
|
||||
import { Button } from "~/components/button.tsx"
|
||||
import { LoadingSpinner } from "~/components/loading-spinner"
|
||||
import { Message, MessageVariant } from "~/components/message.tsx"
|
||||
import { useDocumentEvent } from "~/hooks/use-document-event.ts"
|
||||
import { useMnemonics } from "~/hooks/use-mnemonics.ts"
|
||||
import { BookmarkList } from "./-bookmark-list"
|
||||
import { ActionBarContentKind, DialogKind, useBookmarkPageStore } from "./-store"
|
||||
@@ -73,20 +78,30 @@ function BookmarkListContainer() {
|
||||
}
|
||||
|
||||
function BookmarkListActionBar({ className }: { className?: string }) {
|
||||
const isTagFilterWindowOpen = useBookmarkPageStore((state) => state.isTagFilterWindowOpen)
|
||||
const content = useBookmarkPageStore((state) => state.actionBarContent)
|
||||
const { refs, floatingStyles } = useFloating({
|
||||
placement: "top",
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [offset(8)],
|
||||
})
|
||||
|
||||
return (
|
||||
<ActionBar className={className}>
|
||||
{(() => {
|
||||
switch (content.kind) {
|
||||
case ActionBarContentKind.Normal:
|
||||
return <ActionButtons />
|
||||
case ActionBarContentKind.StatusMessage:
|
||||
return <p>{content.message}</p>
|
||||
case ActionBarContentKind.SearchBar:
|
||||
return <SearchBar />
|
||||
}
|
||||
})()}
|
||||
</ActionBar>
|
||||
<>
|
||||
<ActionBar ref={refs.setReference} className={className}>
|
||||
{(() => {
|
||||
switch (content.kind) {
|
||||
case ActionBarContentKind.Normal:
|
||||
return <ActionButtons />
|
||||
case ActionBarContentKind.StatusMessage:
|
||||
return <p>{content.message}</p>
|
||||
case ActionBarContentKind.SearchBar:
|
||||
return <SearchBar />
|
||||
}
|
||||
})()}
|
||||
</ActionBar>
|
||||
{isTagFilterWindowOpen ? <TagFilterWindow ref={refs.setFloating} style={floatingStyles} /> : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -98,20 +113,22 @@ function SearchBar() {
|
||||
const navigate = Route.useNavigate()
|
||||
const { q } = Route.useSearch()
|
||||
|
||||
useMnemonics(
|
||||
{
|
||||
Escape: () => {
|
||||
navigate({
|
||||
search: (prevSearch: Record<string, string | undefined>) => ({
|
||||
...prevSearch,
|
||||
tags: undefined,
|
||||
q: undefined,
|
||||
}),
|
||||
})
|
||||
setActionBarContent({ kind: ActionBarContentKind.Normal })
|
||||
useDocumentEvent(
|
||||
"keydown",
|
||||
useCallback(
|
||||
(event) => {
|
||||
if (event.key === "Escape") {
|
||||
navigate({
|
||||
search: (prevSearch: Record<string, string | undefined>) => ({
|
||||
...prevSearch,
|
||||
q: undefined,
|
||||
}),
|
||||
})
|
||||
setActionBarContent({ kind: ActionBarContentKind.Normal })
|
||||
}
|
||||
},
|
||||
},
|
||||
{ ignore: () => false },
|
||||
[navigate, setActionBarContent],
|
||||
),
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -195,11 +212,13 @@ function SearchBar() {
|
||||
function ActionButtons() {
|
||||
const setActiveDialog = useBookmarkPageStore((state) => state.setActiveDialog)
|
||||
const setActionBarContent = useBookmarkPageStore((state) => state.setActionBarContent)
|
||||
const toggleTagFilterWindow = useBookmarkPageStore((state) => state.toggleTagFilterWindow)
|
||||
|
||||
useMnemonics(
|
||||
{
|
||||
a: addBookmark,
|
||||
s: openSearchBar,
|
||||
t: toggleTagFilterWindow,
|
||||
},
|
||||
{ ignore: useCallback(() => useBookmarkPageStore.getState().dialog.kind !== DialogKind.None, []) },
|
||||
)
|
||||
@@ -220,10 +239,99 @@ function ActionButtons() {
|
||||
<Button onClick={openSearchBar}>
|
||||
<span className="underline">S</span>EARCH
|
||||
</Button>
|
||||
<LogOutButton />
|
||||
<Button onClick={toggleTagFilterWindow}>
|
||||
<span className="underline">T</span>AGS
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TagFilterWindow({ ref, style }: { ref: React.Ref<HTMLDivElement>; style: React.CSSProperties }) {
|
||||
const { data: tags, status } = useTags()
|
||||
const navigate = Route.useNavigate()
|
||||
const { tags: tagsQuery } = Route.useSearch()
|
||||
const filterByTags = new Set(tagsQuery ? tagsQuery.split(" ") : [])
|
||||
|
||||
const onTagFilterItemChange = useCallback(
|
||||
(tag: Tag, selected: boolean) => {
|
||||
navigate({
|
||||
search: (prevSearch: Record<string, string | undefined>) => {
|
||||
const tagsQuery = prevSearch.tags
|
||||
const tags = tagsQuery ? tagsQuery.split(" ").filter((tagName) => Boolean(tagName)) : []
|
||||
|
||||
if (selected) {
|
||||
tags.push(tag.name)
|
||||
} else {
|
||||
const i = tags.indexOf(tag.name)
|
||||
if (i >= 0) {
|
||||
tags.splice(i, 1)
|
||||
}
|
||||
}
|
||||
|
||||
if (tags.length === 0) {
|
||||
return { ...prevSearch, tags: undefined }
|
||||
}
|
||||
|
||||
return { ...prevSearch, tags: tags.join(" ") }
|
||||
},
|
||||
})
|
||||
},
|
||||
[navigate],
|
||||
)
|
||||
|
||||
function content() {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return (
|
||||
<p className="p-4 text-center">
|
||||
Loading tags <LoadingSpinner />
|
||||
</p>
|
||||
)
|
||||
case "success":
|
||||
return (
|
||||
<ul className="p-4 flex flex-row flex-wrap gap-2">
|
||||
{tags.map((tag) => (
|
||||
<TagFilterItem
|
||||
key={tag.id}
|
||||
tag={tag}
|
||||
checked={filterByTags.has(tag.name)}
|
||||
onChange={onTagFilterItemChange}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
case "error":
|
||||
return <Message variant={MessageVariant.Error}>Failed to load tags!</Message>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} style={style} className="border w-full md:w-100">
|
||||
<p className="bg-stone-900 dark:bg-stone-200 text-stone-300 dark:text-stone-800 text-center">TAGS</p>
|
||||
{content()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const TagFilterItem = memo(
|
||||
({ tag, checked, onChange }: { tag: Tag; checked: boolean; onChange: (tag: Tag, selected: boolean) => void }) => {
|
||||
const id = useId()
|
||||
return (
|
||||
<li key={tag.id} className="flex flex-row items-center space-x-1">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={(event) => {
|
||||
onChange(tag, event.target.checked)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor={id}>#{tag.name}</label>
|
||||
</li>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
function LogOutButton() {
|
||||
const logOutMutation = useLogOut()
|
||||
const navigate = useNavigate()
|
||||
|
@@ -167,46 +167,43 @@ function _TagList({ ref, style, tags }: { tags: Tag[]; ref: React.Ref<HTMLDivEle
|
||||
}
|
||||
}, [shouldResetSelection])
|
||||
|
||||
useMnemonics(
|
||||
{
|
||||
ArrowUp: (event) => {
|
||||
event.preventDefault()
|
||||
if (selectedTag) {
|
||||
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
|
||||
if (i === 0) {
|
||||
setSelectedTag(null)
|
||||
} else if (i === -1) {
|
||||
setSelectedTag(filteredTags[0])
|
||||
} else {
|
||||
setSelectedTag(filteredTags[i - 1])
|
||||
}
|
||||
} else {
|
||||
setSelectedTag(filteredTags.at(-1) ?? null)
|
||||
}
|
||||
},
|
||||
ArrowDown: (event) => {
|
||||
event.preventDefault()
|
||||
if (selectedTag) {
|
||||
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
|
||||
if (i === filteredTags.length - 1) {
|
||||
setSelectedTag(null)
|
||||
} else {
|
||||
setSelectedTag(filteredTags[i + 1])
|
||||
}
|
||||
} else {
|
||||
useMnemonics({
|
||||
ArrowUp: (event) => {
|
||||
event.preventDefault()
|
||||
if (selectedTag) {
|
||||
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
|
||||
if (i === 0) {
|
||||
setSelectedTag(null)
|
||||
} else if (i === -1) {
|
||||
setSelectedTag(filteredTags[0])
|
||||
} else {
|
||||
setSelectedTag(filteredTags[i - 1])
|
||||
}
|
||||
},
|
||||
Enter: (event) => {
|
||||
if (lastTag) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
addTag(selectedTag)
|
||||
}
|
||||
},
|
||||
} else {
|
||||
setSelectedTag(filteredTags.at(-1) ?? null)
|
||||
}
|
||||
},
|
||||
{ ignore: () => false },
|
||||
)
|
||||
ArrowDown: (event) => {
|
||||
event.preventDefault()
|
||||
if (selectedTag) {
|
||||
const i = filteredTags.findIndex((tag) => tag.id === selectedTag.id)
|
||||
if (i === filteredTags.length - 1) {
|
||||
setSelectedTag(null)
|
||||
} else {
|
||||
setSelectedTag(filteredTags[i + 1])
|
||||
}
|
||||
} else {
|
||||
setSelectedTag(filteredTags[0])
|
||||
}
|
||||
},
|
||||
Enter: (event) => {
|
||||
if (lastTag) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
addTag(selectedTag)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function addTag(selectedTag: Tag | null | undefined) {
|
||||
if (selectedTag) {
|
||||
|
15
packages/web/src/hooks/use-document-event.ts
Normal file
15
packages/web/src/hooks/use-document-event.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { useEffect } from "react"
|
||||
|
||||
function useDocumentEvent<TEvent extends keyof DocumentEventMap>(
|
||||
type: TEvent,
|
||||
listener: (this: Document, event: DocumentEventMap[TEvent]) => void,
|
||||
) {
|
||||
useEffect(() => {
|
||||
document.addEventListener<TEvent>(type, listener)
|
||||
return () => {
|
||||
document.removeEventListener(type, listener)
|
||||
}
|
||||
}, [type, listener])
|
||||
}
|
||||
|
||||
export { useDocumentEvent }
|
@@ -1,12 +1,14 @@
|
||||
import { useEffect } from "react"
|
||||
|
||||
const DONT_IGNORE = () => false
|
||||
|
||||
function useMnemonics(
|
||||
mnemonicMap: Record<string, (event: KeyboardEvent) => void>,
|
||||
{ ignore }: { ignore: (event: KeyboardEvent) => boolean },
|
||||
{ ignore }: { ignore: (event: KeyboardEvent) => boolean } = { ignore: DONT_IGNORE },
|
||||
) {
|
||||
useEffect(() => {
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === "Escape" || document.activeElement?.tagName !== "INPUT") {
|
||||
if (!ignore(event)) {
|
||||
mnemonicMap[event.key]?.(event)
|
||||
}
|
||||
}
|
||||
@@ -14,7 +16,7 @@ function useMnemonics(
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKeyDown)
|
||||
}
|
||||
}, [mnemonicMap])
|
||||
}, [mnemonicMap, ignore])
|
||||
}
|
||||
|
||||
export { useMnemonics }
|
||||
|
Reference in New Issue
Block a user