diff --git a/src/components/search-filters.tsx b/src/components/search-filters.tsx index 2fd45e8..3ac8adf 100644 --- a/src/components/search-filters.tsx +++ b/src/components/search-filters.tsx @@ -1,10 +1,9 @@ -import React from 'react'; -import { StyleSheet, ScrollView, TouchableOpacity, View } from 'react-native'; -import { SearchFilters } from '@/types/feed'; -import { ThemedText } from './themed-text'; -import { ThemedView } from './themed-view'; -import { Colors, Spacing } from '@/constants/theme'; -import { useColorScheme } from 'react-native'; +import React from "react"; +import { StyleSheet, ScrollView, TouchableOpacity, View } from "react-native"; +import { SearchFilters as SearchFiltersData } from "@/types/feed"; +import { ThemedView } from "./themed-view"; +import { Colors, Spacing } from "@/constants/theme"; +import { useColorScheme } from "react-native"; interface FilterChipProps { label: string; @@ -15,7 +14,7 @@ interface FilterChipProps { function FilterChip({ label, value, onRemove, icon }: FilterChipProps) { const scheme = useColorScheme(); - const colors = Colors[scheme === 'unspecified' ? 'light' : scheme]; + const colors = Colors[scheme === "unspecified" ? "light" : scheme]; return ( {icon && {icon}} - - {label}: - - - {value} - + {label}: + {value} ); } interface SearchFiltersProps { - filters: SearchFilters; + filters: SearchFiltersData; onFilterChange: (filters: Partial) => void; onClearAll: () => void; availableFeeds?: Array<{ id: string; title: string }>; } -export function SearchFilters({ filters, onFilterChange, onClearAll, availableFeeds }: SearchFiltersProps) { +export function SearchFilters({ + filters, + onFilterChange, + onClearAll, + availableFeeds, +}: SearchFiltersProps) { const scheme = useColorScheme(); - const colors = Colors[scheme === 'unspecified' ? 'light' : scheme]; + const colors = Colors[scheme === "unspecified" ? "light" : scheme]; const getFeedTitle = (feedId: string) => { - const feed = availableFeeds?.find(f => f.id === feedId); + const feed = availableFeeds?.find((f) => f.id === feedId); return feed?.title || feedId; }; const formatDate = (date: Date) => { - return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); + return date.toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric", + }); }; const renderFilterChips = () => { @@ -60,25 +64,30 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe // Date range filter if (filters.dateFrom || filters.dateTo) { - const fromLabel = filters.dateFrom ? formatDate(filters.dateFrom) : 'Any date'; - const toLabel = filters.dateTo ? formatDate(filters.dateTo) : 'Now'; + const fromLabel = filters.dateFrom + ? formatDate(filters.dateFrom) + : "Any date"; + const toLabel = filters.dateTo ? formatDate(filters.dateTo) : "Now"; chips.push( onFilterChange({ dateFrom: undefined, dateTo: undefined })} - /> + onRemove={() => + onFilterChange({ dateFrom: undefined, dateTo: undefined }) + } + />, ); } // Feed filters if (filters.feedIds && filters.feedIds.length > 0) { const feedCount = filters.feedIds.length; - const feedTitle = feedCount === 1 - ? getFeedTitle(filters.feedIds[0]) - : `${feedCount} feeds`; + const feedTitle = + feedCount === 1 + ? getFeedTitle(filters.feedIds[0]) + : `${feedCount} feeds`; chips.push( onFilterChange({ feedIds: undefined })} - /> + />, ); } // Author filters if (filters.authors && filters.authors.length > 0) { const authorCount = filters.authors.length; - const authorLabel = authorCount === 1 - ? filters.authors[0] - : `${authorCount} authors`; + const authorLabel = + authorCount === 1 ? filters.authors[0] : `${authorCount} authors`; chips.push( onFilterChange({ authors: undefined })} - /> + />, ); } // Content type filter if (filters.contentType) { const contentTypeLabels: Record = { - article: 'Articles', - audio: 'Audio', - video: 'Video', + article: "Articles", + audio: "Audio", + video: "Video", }; const contentTypeIcons: Record = { - article: '📄', - audio: '🎵', - video: '🎬', + article: "📄", + audio: "🎵", + video: "🎬", }; chips.push( onFilterChange({ contentType: undefined })} - /> + />, ); } return chips; }; - const hasActiveFilters = - filters.dateFrom || - filters.dateTo || - (filters.feedIds?.length ?? 0) > 0 || - (filters.authors?.length ?? 0) > 0 || + const hasActiveFilters = + filters.dateFrom || + filters.dateTo || + (filters.feedIds?.length ?? 0) > 0 || + (filters.authors?.length ?? 0) > 0 || filters.contentType !== undefined; if (!hasActiveFilters) { @@ -168,8 +176,8 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe const styles = StyleSheet.create({ container: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", paddingHorizontal: Spacing.three, paddingVertical: Spacing.two, gap: Spacing.two, @@ -179,12 +187,12 @@ const styles = StyleSheet.create({ gap: Spacing.two, }, chip: { - flexDirection: 'row', - alignItems: 'center', + flexDirection: "row", + alignItems: "center", paddingHorizontal: Spacing.three, paddingVertical: Spacing.one, borderRadius: Spacing.two, - backgroundColor: '#e5e5ea', + backgroundColor: "#e5e5ea", gap: Spacing.one, }, chipIcon: { @@ -192,16 +200,16 @@ const styles = StyleSheet.create({ }, chipText: { fontSize: 12, - color: '#8e8e93', - fontWeight: '600', + color: "#8e8e93", + fontWeight: "600", }, chipValue: { fontSize: 12, - color: '#000000', + color: "#000000", }, chipClose: { fontSize: 14, - color: '#8e8e93', + color: "#8e8e93", marginLeft: Spacing.one, }, clearAllButton: { @@ -210,7 +218,7 @@ const styles = StyleSheet.create({ }, clearAllText: { fontSize: 12, - color: '#007AFF', - fontWeight: '500', + color: "#007AFF", + fontWeight: "500", }, });