132 lines
3.6 KiB
TypeScript
132 lines
3.6 KiB
TypeScript
import React from 'react'
|
|
import type { Article } from '@/types/nostr'
|
|
import { t } from '@/lib/i18n'
|
|
import { AuthorFilter } from './AuthorFilter'
|
|
|
|
export type SortOption = 'newest' | 'oldest'
|
|
|
|
export interface ArticleFilters {
|
|
authorPubkey: string | null
|
|
sortBy: SortOption
|
|
category: 'science-fiction' | 'scientific-research' | 'all' | null
|
|
}
|
|
|
|
interface ArticleFiltersProps {
|
|
filters: ArticleFilters
|
|
onFiltersChange: (filters: ArticleFilters) => void
|
|
articles: Article[]
|
|
}
|
|
|
|
interface FiltersData {
|
|
authors: string[]
|
|
}
|
|
|
|
function useFiltersData(articles: Article[]): FiltersData {
|
|
const authorArticleCount = new Map<string, number>()
|
|
articles.forEach((article) => {
|
|
if (!article.isPresentation) {
|
|
const count = authorArticleCount.get(article.pubkey) ?? 0
|
|
authorArticleCount.set(article.pubkey, count + 1)
|
|
}
|
|
})
|
|
const authors = Array.from(authorArticleCount.keys()).filter((pubkey) => {
|
|
const count = authorArticleCount.get(pubkey) ?? 0
|
|
return count > 0
|
|
})
|
|
return {
|
|
authors,
|
|
}
|
|
}
|
|
|
|
function FiltersGrid({
|
|
data,
|
|
filters,
|
|
onFiltersChange,
|
|
}: {
|
|
data: FiltersData
|
|
filters: ArticleFilters
|
|
onFiltersChange: (filters: ArticleFilters) => void
|
|
}) {
|
|
const update = (patch: Partial<ArticleFilters>) => onFiltersChange({ ...filters, ...patch })
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<AuthorFilter authors={data.authors} value={filters.authorPubkey} onChange={(value) => update({ authorPubkey: value })} />
|
|
<SortFilter value={filters.sortBy} onChange={(value) => update({ sortBy: value })} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function FiltersHeader({
|
|
hasActiveFilters,
|
|
onClear,
|
|
}: {
|
|
hasActiveFilters: boolean
|
|
onClear: () => void
|
|
}) {
|
|
return (
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-semibold text-neon-cyan">{t('filters.sort')}</h3>
|
|
{hasActiveFilters && (
|
|
<button onClick={onClear} className="text-sm text-neon-cyan hover:text-neon-green font-medium transition-colors">
|
|
{t('filters.clear')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
function SortFilter({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
value: SortOption
|
|
onChange: (value: SortOption) => void
|
|
}) {
|
|
return (
|
|
<div>
|
|
<label htmlFor="sort" className="block text-sm font-medium text-cyber-accent mb-1">
|
|
{t('filters.sort')}
|
|
</label>
|
|
<select
|
|
id="sort"
|
|
value={value}
|
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => onChange(e.target.value as SortOption)}
|
|
className="block w-full px-3 py-2 border border-neon-cyan/30 rounded-lg focus:ring-2 focus:ring-neon-cyan focus:border-neon-cyan bg-cyber-dark text-cyber-accent hover:border-neon-cyan/50 transition-colors"
|
|
>
|
|
<option value="newest" className="bg-cyber-dark">{t('filters.sort.newest')}</option>
|
|
<option value="oldest" className="bg-cyber-dark">{t('filters.sort.oldest')}</option>
|
|
</select>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ArticleFiltersComponent({
|
|
filters,
|
|
onFiltersChange,
|
|
articles,
|
|
}: ArticleFiltersProps) {
|
|
const data = useFiltersData(articles)
|
|
|
|
const handleClearFilters = () => {
|
|
onFiltersChange({
|
|
authorPubkey: null,
|
|
sortBy: 'newest',
|
|
category: null,
|
|
})
|
|
}
|
|
|
|
const hasActiveFilters =
|
|
filters.authorPubkey !== null ||
|
|
filters.sortBy !== 'newest' ||
|
|
filters.category !== null
|
|
|
|
return (
|
|
<div className="bg-cyber-dark border border-neon-cyan/30 rounded-lg p-4 mb-6 shadow-glow-cyan">
|
|
<FiltersHeader hasActiveFilters={hasActiveFilters} onClear={handleClearFilters} />
|
|
<FiltersGrid data={data} filters={filters} onFiltersChange={onFiltersChange} />
|
|
</div>
|
|
)
|
|
}
|