akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 07:37:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Put tags and search of changelogs and versions in URL

Browse Source
This commit is contained in:
Misode
2022-05-21 02:45:32 +02:00
parent 2ebba08d4b
commit 781d545962
4 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/components/versions/ChangelogList.tsx
View File

@@ -1,29 +1,26 @@
import { useMemo, useState } from 'preact/hooks'
import { Btn, TextInput } from '..'
import { useLocale } from '../../contexts'
import { useSearchParam } from '../../hooks'
import { useTags } from '../../hooks/useTags'
import type { Change } from '../../services'
import { ChangelogEntry } from './ChangelogEntry'
import { ChangelogTag } from './ChangelogTag'
const SEARCH_KEY = 'search'
interface Props {
changes: Change[] | undefined,
defaultOrder: 'asc' | 'desc',
}
export function ChangelogList({ changes, defaultOrder }: Props) {
const { locale } = useLocale()
const [search, setSearch] = useState('')
const [tags, setTags] = useState<string[]>([])
const toggleTag = (tag: string) => {
if (!tags.includes(tag)) {
setTags([...tags, tag])
} else {
setTags(tags.filter(t => t !== tag))
}
}
const [search, setSearch] = useSearchParam(SEARCH_KEY)
const [tags, toggleTag] = useTags()
const filteredChangelogs = useMemo(() => {
const query = search.split(' ').map(q => q.trim().toLowerCase()).filter(q => q.length > 0)
const query = (search ?? '').split(' ').map(q => q.trim().toLowerCase()).filter(q => q.length > 0)
if (query.length === 0 && tags.length === 0) return changes
return changes?.filter(change => {
if (!tags.every(tag => change.tags.includes(tag))) {
@@ -48,11 +45,11 @@ export function ChangelogList({ changes, defaultOrder }: Props) {
return <>
<div class="changelog-query">
<TextInput class="btn btn-input changelog-search" list="sound-list" placeholder={locale('changelog.search')}
value={search} onChange={setSearch} />
value={search} onChange={v => setSearch(v, true)} />
<Btn icon={sort ? 'sort_desc' : 'sort_asc'} label={sort ? 'Newest first' : 'Oldest first'} onClick={() => setSort(!sort)} />
</div>
{tags.length > 0 && <div class="changelog-tags">
{tags.map(tag => <ChangelogTag label={tag} onClick={() => setTags(tags.filter(t => t !== tag))} />)}
{tags.map(tag => <ChangelogTag label={tag} onClick={() => toggleTag(tag)} />)}
</div>}
<div class="changelog-list">
{sortedChangelogs === undefined

7
src/app/components/versions/VersionList.tsx
View File

@@ -1,9 +1,12 @@
import { useMemo, useState } from 'preact/hooks'
import { Checkbox, TextInput } from '..'
import { useLocale } from '../../contexts'
import { useSearchParam } from '../../hooks'
import type { VersionMeta } from '../../services'
import { VersionEntry } from './VersionEntry'
const SEARCH_KEY = 'search'
interface Props {
versions: VersionMeta[]
link?: (id: string) => string
@@ -12,11 +15,11 @@ export function VersionList({ versions, link }: Props) {
const { locale } = useLocale()
const [snapshots, setSnapshots] = useState(true)
const [search, setSearch] = useState('')
const [search, setSearch] = useSearchParam(SEARCH_KEY)
const filteredVersions = useMemo(() => versions.filter(v => {
if (v.type === 'snapshot' && !snapshots) return false
return v.id.includes(search)
return v.id.includes(search ?? '')
}), [versions, snapshots, search])