feat: filter posts by query tags

Author: SidonieBouthors

app/share/page.tsx

@@ -1,6 +1,7 @@
 import ArticleBlock from "@components/ArticleBlock";
 import { posts, Post } from "@content";
 import { Metadata } from "next";
+import TagFilteredList from "@/components/TagFilteredList";
 
 export const metadata: Metadata = {
   title: "Share",
@@ -19,15 +20,13 @@ export default function Share() {
   return (
     <div className="share-page">
       <h1>Share</h1>
-      <ul>
-        <hr />
-        {displayPosts.map((post: Post) => (
-          <li key={post.slug}>
-            <ArticleBlock article={post}></ArticleBlock>
-            <hr />
-          </li>
-        ))}
-      </ul>
+      <TagFilteredList>
+        {displayPosts.map((post: Post) => ({
+          content: <ArticleBlock article={post} />,
+          tags: post.tags,
+          slug: post.slug,
+        }))}
+      </TagFilteredList>
     </div>
   );
 }

components/TagFilteredList.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Post } from "@content";
+import { useSearchParams } from "next/navigation";
+import ArticleBlock from "@components/ArticleBlock";
+
+interface TaggedItem {
+  content: React.ReactNode;
+  tags: string[];
+  slug: string;
+}
+
+interface TagFilteredListProps {
+  children: TaggedItem[];
+}
+
+/**
+ * Displays a list of items, filtering them based on the tags in the URL query.
+ * @param children The items to display, each with a `content`, `tags`, and `slug` property.
+ */
+export default function TagFilteredList({ children }: TagFilteredListProps) {
+  const selectedTags = useSearchParams().get("tags")?.split(",") || [];
+
+  let filteredItems = children;
+  if (selectedTags.length > 0) {
+    filteredItems = children.filter((child: TaggedItem) =>
+      child.tags.some((tag) => selectedTags.includes(tag))
+    );
+  }
+
+  return (
+    <ul>
+      <hr />
+      {filteredItems.map((item: TaggedItem) => (
+        <li key={item.slug}>
+          {item.content}
+          <hr />
+        </li>
+      ))}
+    </ul>
+  );
+}