From 285b715b9d3e8b3a2105705833ac67240bfa8e0d Mon Sep 17 00:00:00 2001
From: Alan Zhou <alanzhou@cmail.carleton.ca>
Date: Mon, 7 Jul 2025 15:58:31 -0400
Subject: [PATCH 1/3] Added a media query to hide the tags

---
 src/features/Search/Search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Search/Search.tsx b/src/features/Search/Search.tsx
index 923d2fe..601f7de 100644
--- a/src/features/Search/Search.tsx
+++ b/src/features/Search/Search.tsx
@@ -99,7 +99,7 @@ export function Search({ tags }: SearchProps) {
     setSelectedTagIds((prev) =>
       prev.includes(tag.id)
         ? prev.filter((id) => id !== tag.id)
-        : [...prev, tag.id],
+        : [...prev, tag.id]
     );
   };
 

From 7b97a00c1555a9ebbafe8ddff7a27f04f9374ca7 Mon Sep 17 00:00:00 2001
From: Alan Zhou <alanzhou@cmail.carleton.ca>
Date: Thu, 10 Jul 2025 15:28:18 -0400
Subject: [PATCH 2/3] Added margins when the tag list is hidden

---
 src/features/Search/Search.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/Search/Search.tsx b/src/features/Search/Search.tsx
index 601f7de..e1aa94f 100644
--- a/src/features/Search/Search.tsx
+++ b/src/features/Search/Search.tsx
@@ -61,7 +61,7 @@ export function Search({ tags }: SearchProps) {
       setProjects((prev) =>
         pageToFetch === 1 || reset
           ? (data.results ?? [])
-          : [...prev, ...(data.results ?? [])],
+          : [...prev, ...(data.results ?? [])]
       );
 
       setHasMore((data.results?.length ?? 0) >= 20);

From b5cf966adc198514a6bd947b16bdde239d78a838 Mon Sep 17 00:00:00 2001
From: Alan Zhou <alanzhou@cmail.carleton.ca>
Date: Thu, 31 Jul 2025 15:48:44 -0400
Subject: [PATCH 3/3] Added unit tests to test the tags

---
 src/features/Search/TagList/TagList.test.tsx | 57 ++++++++++++++++++++
 src/features/Search/TagList/TagList.tsx      |  4 +-
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/features/Search/TagList/TagList.test.tsx

diff --git a/src/features/Search/TagList/TagList.test.tsx b/src/features/Search/TagList/TagList.test.tsx
new file mode 100644
index 0000000..1c00788
--- /dev/null
+++ b/src/features/Search/TagList/TagList.test.tsx
@@ -0,0 +1,57 @@
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TagList } from "./TagList";
+
+export interface Tag {
+  id: string;
+  label: string;
+  lucideIcon: string;
+  borderColor: string;
+  backgroundColor: string;
+}
+
+const mockTagLabel = "Atom";
+const secondTagLabel = "Beta";
+const mockTag = {
+  id: "atom",
+  label: mockTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+const secondTag = {
+  id: "beta",
+  label: secondTagLabel,
+  lucideIcon: "",
+  borderColor: "red",
+  backgroundColor: "white",
+};
+
+describe("TagList", () => {
+  it("hides tags", () => {
+    render(
+      <TagList tags={[mockTag]} onTagClick={() => {}} selectedTagIds={[]} />,
+    );
+    expect(screen.getByText(mockTagLabel)).toBeInTheDocument();
+  });
+  it("test click event", () => {
+    const mockClick = jest.fn();
+    render(
+      <TagList tags={[mockTag]} onTagClick={mockClick} selectedTagIds={[]} />,
+    );
+    const tag = screen.getByText("Atom");
+    fireEvent.click(tag);
+    expect(mockClick).toHaveBeenCalledWith(mockTag);
+    expect(mockClick).toHaveBeenCalledTimes(1);
+  });
+  it("will hide 13th element after clicking show less", () => {
+    const mockClick = jest.fn();
+    const tags = Array(13).fill(mockTag);
+    tags.push(secondTag);
+    render(<TagList tags={tags} onTagClick={mockClick} selectedTagIds={[]} />);
+    const showLessButton = screen.getByText("Show Less");
+    fireEvent.click(showLessButton);
+    const tag = screen.queryByText(secondTagLabel);
+    expect(tag).toBeNull();
+  });
+});
diff --git a/src/features/Search/TagList/TagList.tsx b/src/features/Search/TagList/TagList.tsx
index 04094c3..3c8ca81 100644
--- a/src/features/Search/TagList/TagList.tsx
+++ b/src/features/Search/TagList/TagList.tsx
@@ -69,9 +69,9 @@ export function TagList({ tags, selectedTagIds, onTagClick }: TagListProps) {
   return (
     <div className={styles.tagContainer}>
       <div className={styles.tagList}>
-        {visibleTags.map((tag) => (
+        {visibleTags.map((tag, i) => (
           <TagBadge
-            key={tag.id}
+            key={`${tag.id}-${i}`}
             label={tag.label}
             borderColor={tag.borderColor}
             backgroundColor={tag.backgroundColor}