feat: filtering by tags now works

This commit is contained in:
overflowerror 2021-10-10 16:38:04 +02:00
parent fbdc8df6e6
commit 55df389ae9
2 changed files with 24 additions and 4 deletions

View file

@ -2,16 +2,23 @@ import React, {FunctionComponent} from "react";
import {CountedTag} from "../../database/query";
export type SidebarProps = {
countedTags: CountedTag[]
countedTags: CountedTag[],
selected: string[],
onSelect: (tag: string) => void
}
const Sidebar: FunctionComponent<SidebarProps> = ({countedTags}) => {
const Sidebar: FunctionComponent<SidebarProps> = ({countedTags, selected, onSelect}) => {
return (
<div>
<ul>
{
countedTags.map(t => (
<li key={t.name}>{t.name} ({t.count})</li>
<li key={t.name}>
{ selected.indexOf(t.name) >= 0 && "#" }
<a onClick={() => onSelect(t.name)}>
{t.name} ({t.count})
</a>
</li>
))
}
</ul>

View file

@ -99,7 +99,20 @@ const Home: FunctionComponent<HomeProps> = () => {
}
{ !message &&
<>
<Sidebar countedTags={query.countedTags()} />
<Sidebar
countedTags={query.countedTags()}
selected={tags}
onSelect={(tag) => {
const i = tags.indexOf(tag)
const _tags = [...tags]
if (i < 0) {
_tags.push(tag)
} else {
_tags.splice(i, 1)
}
setTags(_tags)
}}
/>
{ selected &&
<>
<button onClick={() => setSelected(null)}>Back</button>