fix import
This commit is contained in:
@@ -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 (
|
||||
<TouchableOpacity
|
||||
@@ -24,35 +23,40 @@ function FilterChip({ label, value, onRemove, icon }: FilterChipProps) {
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{icon && <ThemedText style={styles.chipIcon}>{icon}</ThemedText>}
|
||||
<ThemedText style={styles.chipText}>
|
||||
{label}:
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.chipValue}>
|
||||
{value}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.chipText}>{label}:</ThemedText>
|
||||
<ThemedText style={styles.chipValue}>{value}</ThemedText>
|
||||
<ThemedText style={styles.chipClose}>✕</ThemedText>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
interface SearchFiltersProps {
|
||||
filters: SearchFilters;
|
||||
filters: SearchFiltersData;
|
||||
onFilterChange: (filters: Partial<SearchFilters>) => 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(
|
||||
<FilterChip
|
||||
key="date"
|
||||
label="Date"
|
||||
value={`${fromLabel} – ${toLabel}`}
|
||||
icon="📅"
|
||||
onRemove={() => 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(
|
||||
<FilterChip
|
||||
key="feeds"
|
||||
@@ -86,16 +95,15 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
||||
value={feedTitle}
|
||||
icon="📰"
|
||||
onRemove={() => 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(
|
||||
<FilterChip
|
||||
key="authors"
|
||||
@@ -103,21 +111,21 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
||||
value={authorLabel}
|
||||
icon="✍️"
|
||||
onRemove={() => onFilterChange({ authors: undefined })}
|
||||
/>
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
// Content type filter
|
||||
if (filters.contentType) {
|
||||
const contentTypeLabels: Record<string, string> = {
|
||||
article: 'Articles',
|
||||
audio: 'Audio',
|
||||
video: 'Video',
|
||||
article: "Articles",
|
||||
audio: "Audio",
|
||||
video: "Video",
|
||||
};
|
||||
const contentTypeIcons: Record<string, string> = {
|
||||
article: '📄',
|
||||
audio: '🎵',
|
||||
video: '🎬',
|
||||
article: "📄",
|
||||
audio: "🎵",
|
||||
video: "🎬",
|
||||
};
|
||||
chips.push(
|
||||
<FilterChip
|
||||
@@ -126,18 +134,18 @@ export function SearchFilters({ filters, onFilterChange, onClearAll, availableFe
|
||||
value={contentTypeLabels[filters.contentType]}
|
||||
icon={contentTypeIcons[filters.contentType]}
|
||||
onRemove={() => 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",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user