feat(gallery): support for multiple tags

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)

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;
+}

src/pages/gallery/gallery.tsx

@@ -10,20 +10,26 @@ 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();
  const _games = games.filter(
  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) => (