33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import { useSearchParams } from 'react-router-dom';
|
|
import type { MediaFilters } from './filters.js';
|
|
import { initialMediaFilters, MediaPage } from './media-page.js';
|
|
|
|
function parseType(value: string | null): MediaFilters['type'] {
|
|
return value === 'image' || value === 'gif' ? value : 'all';
|
|
}
|
|
|
|
function parseDateRange(value: string | null): MediaFilters['dateRange'] {
|
|
return value === '24h' || value === '7d' || value === '30d' ? value : 'all';
|
|
}
|
|
|
|
export function MediaRoute() {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const filters: MediaFilters = {
|
|
conversation: searchParams.get('conversation') ?? initialMediaFilters.conversation,
|
|
sender: searchParams.get('sender') ?? initialMediaFilters.sender,
|
|
type: parseType(searchParams.get('type')),
|
|
dateRange: parseDateRange(searchParams.get('range')),
|
|
};
|
|
|
|
function updateFilters(next: MediaFilters) {
|
|
const params = new URLSearchParams();
|
|
if (next.conversation !== 'all') params.set('conversation', next.conversation);
|
|
if (next.sender !== 'all') params.set('sender', next.sender);
|
|
if (next.type !== 'all') params.set('type', next.type);
|
|
if (next.dateRange !== 'all') params.set('range', next.dateRange);
|
|
setSearchParams(params, { replace: true });
|
|
}
|
|
|
|
return <MediaPage filters={filters} onFiltersChange={updateFilters} />;
|
|
}
|