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",
},
});