add: Filter by category

frontend/src/context/bookmarkList.js

@@ -19,7 +19,13 @@ export function BookMarkListProvider({ children }) {
     abortController.current.abort();
   }
 
-  async function fetchBookmarks({ offset = 0, limit = 25, query, tag }) {
+  async function fetchBookmarks({
+    offset = 0,
+    limit = 25,
+    query,
+    tag,
+    category,
+  }) {
     setIsBookmarksLoading(true);
     setErrorBookmarks(undefined);
 
@@ -30,6 +36,7 @@ export function BookMarkListProvider({ children }) {
     searchParams.append("limit", limit);
     if (query) searchParams.append("q", query);
     if (tag) searchParams.append("tag", tag);
+    if (category) searchParams.append("category", category);
     let res = await getJSON(
       `/api/bookmarks/?${searchParams.toString()}`,
       abortController.current.signal

frontend/src/pages/link/components/BookmarksHeader.jsx

@@ -4,6 +4,7 @@ import { useBookMarkList } from "../../../context/bookmarkList";
 import { DEF_MAX_ITEMS } from "../../../helpers/constants";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { useRef } from "react";
+import { useSearchParams } from "react-router-dom";
 
 export default function BookmarksHeader() {
   const [query, setQuery] = useState("");
@@ -13,6 +14,7 @@ export default function BookmarksHeader() {
 
   const { fetchBookmarks } = useBookMarkList();
   const [maxItemsInList] = useLocalStorage("maxItemsInList", DEF_MAX_ITEMS);
+  const [searchParams] = useSearchParams();
 
   const firstUpdate = useRef(true);
   useEffect(() => {
@@ -25,7 +27,10 @@ export default function BookmarksHeader() {
   }, [delayedQuery, query]);
 
   function updateBookmarkList() {
-    fetchBookmarks({ offset: 0, limit: maxItemsInList, query });
+    let tag = searchParams.get("tag");
+    let category = searchParams.get("category");
+
+    fetchBookmarks({ offset: 0, limit: maxItemsInList, query, tag, category });
   }
 
   return (

frontend/src/pages/link/components/BookmarksList.jsx

@@ -27,8 +27,10 @@ export default function BookmarksList() {
     let offset = (page - 1) * limit;
 
     let tag = searchParams.get("tag");
-    if (tag) {
-      fetchBookmarks({ offset, limit, tag });
+    let category = searchParams.get("category")
+
+    if (tag || category) {
+      fetchBookmarks({ offset, limit, tag, category });
       return;
     }
     fetchBookmarks({ offset, limit });

frontend/src/pages/link/index.jsx

@@ -7,7 +7,7 @@ import Page from "../../components/Page";
 export default function LinksPage() {
   return (
     <Page>
-      <div className="flex flex-col gap-4 justify-center w-full md:flex-row">
+      <div className="flex flex-col gap-4 md:justify-center w-full md:flex-row">
         <BookMarkListProvider>
           <BookmarksList />
           <RightPanel />

server/db/bookmarks.js

@@ -143,16 +143,33 @@ function getBookmarkByUrl(url) {
 /**
  *
  * @param {string} query
+ * @param {string?} tag
+ * @param {string?} category
  * @param {number} limit
  * @param {number} offset
  * @returns {Bookmark[]} Array of bookmarks
  */
-function findBookmark(query, limit = 10, offset = 0) {
+function findBookmark(
+  query,
+  tag = undefined,
+  category = undefined,
+  limit = 10,
+  offset = 0
+) {
+  let countQuery = `SELECT 
+    COUNT(*) as count
+  FROM bookmarks 
+    LEFT JOIN category ON category.id = bookmarks.categoryId
+    LEFT JOIN bookmarksTags ON bookmarksTags.bookmarkId = bookmarks.id 
+    LEFT JOIN tags ON bookmarksTags.tagId = tags.id
+  WHERE bookmarks.search LIKE :query
+  ${tag !== undefined ? "AND tags.name = :tag" : ""}
+  ${category !== undefined ? "AND category.name = :category" : ""}`;
+
   let total = db
-    .prepare(
-      "SELECT COUNT(*) AS count FROM bookmarks WHERE title LIKE :query OR desc LIKE :query OR url LIKE :query"
-    )
-    .get({ query: `%${query}%` }).count;
+    .prepare(countQuery)
+    .get({ query: `%${query}%`, tag, category: category }).count;
+
   let maxPage = Math.ceil(total / limit);
   let currentPage = offset / limit + 1;
   let bookmarks = db
@@ -163,16 +180,26 @@ function findBookmark(query, limit = 10, offset = 0) {
       title,
       desc,
       created,
+      categoryId,
       group_concat(tags.name, ',') as tags
     FROM bookmarks 
+      LEFT JOIN category ON category.id = bookmarks.categoryId
       LEFT JOIN bookmarksTags ON bookmarksTags.bookmarkId = bookmarks.id 
       LEFT JOIN tags ON bookmarksTags.tagId = tags.id
     WHERE bookmarks.search LIKE :query
+    ${tag !== undefined ? "AND tags.name = :tag" : ""}
+    ${category !== undefined ? "AND category.name = :category" : ""}
     GROUP BY bookmarks.id
     ORDER BY bookmarks.created
     LIMIT :limit OFFSET :offset`
     )
-    .all({ query: `%${query.toLocaleLowerCase()}%`, limit, offset })
+    .all({
+      query: `%${query.toLocaleLowerCase()}%`,
+      tag,
+      category: category,
+      limit,
+      offset,
+    })
     .map((bookmark) => {
       return { ...bookmark, tags: bookmark.tags?.split(",") };
     });

server/db/tags.js

@@ -27,7 +27,6 @@ function findTags(query) {
   return db
     .prepare(
       `SELECT tags.id AS id, tags.name AS name FROM tags
-    INNER JOIN bookmarksTags ON tags.id = bookmarksTags.tagId
     WHERE tags.name LIKE :query
     GROUP BY tags.id
     ORDER BY tags.name`

server/routes/api/bookmarks/index.js

@@ -20,8 +20,9 @@ module.exports = async function (fastify, opts) {
       let limit = query.get("limit") ?? undefined;
       let q = query.get("q") ?? undefined;
       let tag = query.get("tag") ?? undefined;
-      if (q !== undefined) return db.findBookmark(q, limit, offset);
-      if (tag !== undefined) return db.findBookmarkByTag(tag, limit, offset);
+      let category = query.get("category") ?? undefined;
+      if (q || tag || category)
+        return db.findBookmark(q || "", tag, category, limit, offset);
       return db.getAllBookmarks(offset, limit);
     }
   );