From b88245799fb39e3953f19fb39a9dfe0c0c1626fd Mon Sep 17 00:00:00 2001
From: Sidonie Bouthors <sidonie.bouthors@epfl.ch>
Date: Sat, 17 Aug 2024 14:11:46 +0200
Subject: [PATCH] feat: filter posts by query tags

---
 app/share/page.tsx             | 17 +++++++-------
 components/TagFilteredList.tsx | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 components/TagFilteredList.tsx

diff --git a/app/share/page.tsx b/app/share/page.tsx
index c17f793..e6d31c2 100644
--- a/app/share/page.tsx
+++ b/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>
   );
 }
diff --git a/components/TagFilteredList.tsx b/components/TagFilteredList.tsx
new file mode 100644
index 0000000..8adc175
--- /dev/null
+++ b/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>
+  );
+}