fix: Tags and Categories frontend filtering

frontend/src/pages/link/components/rightPanel/CategoryItem.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { useSearchParams } from "react-router-dom";
+
+export default function CategoryItem({ category }) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  let selected = searchParams.get("category") === category.name;
+
+  if (searchParams.has("category")) {
+    if (searchParams.get("category") === category.name) {
+      searchParams.delete("category");
+    } else {
+      searchParams.set("category", category.name);
+    }
+  } else {
+    searchParams.append("category", category.name);
+  }
+
+  return (
+    <div
+      onClick={() => setSearchParams(searchParams)}
+      className={`hover:underline hover:text-cyan-700 cursor-pointer capitalize px-4 py-1 rounded ${
+        selected && "bg-cyan-400 text-white font-medium"
+      }`}
+    >
+      {category.name}
+    </div>
+  );
+}

frontend/src/pages/link/components/rightPanel/CategoryList.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from "react";
+import { useCategoriesList } from "../../../../context/categoriesList";
+import CategoryItem from "./CategoryItem";
+
+export default function CategoryList() {
+  const { categories, fetchCategories, abort } = useCategoriesList();
+
+  useEffect(() => {
+    fetchCategories();
+    return () => abort();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (categories.length === 0) return <div>No categories</div>;
+  return (
+    <div className="flex flex-col">
+      {categories.map((category) => (
+        <CategoryItem key={category.id} category={category} />
+      ))}
+    </div>
+  );
+}

frontend/src/pages/link/components/rightPanel/RightPanel.jsx

@@ -1,10 +1,16 @@
 import React from "react";
+import { CategoriesListProvider } from "../../../../context/categoriesList";
 import { TagsListProvider } from "../../../../context/tagsList";
+import CategoryList from "./CategoryList";
 import TagList from "./TagList";
 
 export default function RightPanel() {
   return (
     <div className="flex flex-col gap-3 p-3 md:w-1/5 dark:text-white">
+      <h3 className="text-xl">Categories</h3>
+      <CategoriesListProvider>
+        <CategoryList />
+      </CategoriesListProvider>
       <h3 className="text-xl">Tags</h3>
       <TagsListProvider>
         <TagList />

frontend/src/pages/link/components/rightPanel/TagItem.jsx

@@ -1,17 +1,28 @@
 import React from "react";
-import { Link, useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 export default function TagItem({ tag }) {
   const [searchParams, setSearchParams] = useSearchParams();
-  let searchTag = searchParams.get("tag");
+  let selected = searchParams.get("tag") === tag.name;
+
+  if (searchParams.has("tag")) {
+    if (searchParams.get("tag") === tag.name) {
+      searchParams.delete("tag");
+    } else {
+      searchParams.set("tag", tag.name);
+    }
+  } else {
+    searchParams.append("tag", tag.name);
+  }
+
   return (
-    <Link
-      to={`/links?tag=${tag.name}`}
-      className={`hover:underline hover:text-cyan-700 capitalize px-4 py-1 rounded ${
-        tag.name === searchTag && "bg-cyan-400 text-white font-medium"
+    <div
+      onClick={() => setSearchParams(searchParams)}
+      className={`hover:underline hover:text-cyan-700 cursor-pointer capitalize px-4 py-1 rounded ${
+        selected && "bg-cyan-400 text-white font-medium"
       }`}
     >
       #{tag.name}
-    </Link>
+    </div>
   );
 }