From 78d31f37077a8c70bb06ee6ba83fbef113f8b7f5 Mon Sep 17 00:00:00 2001
From: JosiasAurel <ndjosiasaurel@gmail.com>
Date: Sat, 23 Dec 2023 13:34:24 +0100
Subject: [PATCH] feat(gallery): support for multiple tags

---
 some.js                       | 19 +++++++++++++++++++
 src/pages/gallery/gallery.css | 12 ++++++++++++
 src/pages/gallery/gallery.tsx | 28 ++++++++++++++++++++++++----
 3 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 some.js

diff --git a/some.js b/some.js
new file mode 100644
index 000000000..0c21bbc22
--- /dev/null
+++ b/some.js
@@ -0,0 +1,19 @@
+
+
+const tags = ["hello", "world"]
+
+const games = [
+  ["hello"],
+  ["world", "hello"],
+  ["hack", "game"],
+  ["hack", "game", "world", "hello"],
+]
+
+const filtered = games.filter(game => {
+  for (const tag of tags) {
+    if (game.indexOf(tag) === -1) return false;
+  }
+  return true;
+})
+
+console.log(filtered)
diff --git a/src/pages/gallery/gallery.css b/src/pages/gallery/gallery.css
index accfcb651..8fad99df0 100644
--- a/src/pages/gallery/gallery.css
+++ b/src/pages/gallery/gallery.css
@@ -163,3 +163,15 @@ p {
 	margin-top: 2px;
 	font-size: 0.9rem;
 }
+
+.filter-tags {
+	margin: 1em 0;
+}
+
+.tag-span {
+	margin: 0 5px 0 0;
+	padding: 2px 4px;
+	background-color: grey;
+	color: white;
+	cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/pages/gallery/gallery.tsx b/src/pages/gallery/gallery.tsx
index 91b4da3b2..9e6e23575 100644
--- a/src/pages/gallery/gallery.tsx
+++ b/src/pages/gallery/gallery.tsx
@@ -10,12 +10,12 @@ type SortOrder = "chronological" | "ascending" | "descending";
 type GalleryGameMetadata = GameMetadata & { show: boolean };
 type Filter = {
 	query: string,
-	tag: string,
+	tags: string[],
 	sort: SortOrder
 };
 export default function Gallery({ games, tags }: { games: GameMetadata[], tags: string[] }) {
 	const [gamesState, setGamesState] = useState<GalleryGameMetadata[]>([]);
-	const [filter, setFilter] = useState<Filter>({query: "", sort: "chronological", tag: ""});
+	const [filter, setFilter] = useState<Filter>({query: "", sort: "chronological", tags: [] })
 
 	useEffect(() => {
 		const lowerCaseQuery = filter.query.toLowerCase();
@@ -23,7 +23,13 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
 				game => game.title.toLowerCase().includes(lowerCaseQuery) || 
 				game.author.toLowerCase().includes(lowerCaseQuery)
 			) // filter by query
-			.filter(game => filter.tag.length === 0 ? game : game.tags.includes(filter.tag)) // filter by tags
+			.filter(game => { // filter by tags
+				for (const tag of filter.tags) {
+					if (game.tags.indexOf(tag) === -1) return false;
+				}
+				return true;
+			});
+			// .filter(game => filter.tag.length === 0 ? game : game.tags.includes(filter.tag)) // filter by tags
 		setGamesState(sortGames(_games, filter.sort).map(game => ({ ...game, show: true })) as GalleryGameMetadata[]);
 
 	}, [filter]);
@@ -106,7 +112,7 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
 					<div class="search-controls">
 						<div class="select">
 							<select onChange={(event) => {
-								setFilter(_filter => ({ ..._filter, tag: (event.target! as HTMLSelectElement).value }))
+								setFilter(_filter => ({ ..._filter, tags: [ ...filter.tags, (event.target! as HTMLSelectElement).value] }))
 							}} id="tag-select">
 								<option value="">Filter by tag...</option>
 								{
@@ -157,6 +163,20 @@ export default function Gallery({ games, tags }: { games: GameMetadata[], tags:
 				</div>
 			</div>
 
+			<div class="filter-tags">
+				{filter.tags.map(tag => 
+					<span 
+						class="tag-span"
+						onClick={() => {
+							setFilter(filter => ({
+								...filter,
+								tags: filter.tags.filter(_tag => _tag != tag)
+							}));
+						}}
+					>{tag} x</span>
+				)}
+			</div>
+
 			<div id="games">
 				{
 					gamesState.map((game: GalleryGameMetadata) => (