feat(mobile): search/filter tab — sport, date, sort; hidden on Karoo
Adds a fourth tab visible only on Android API 29+ (full phone, not Karoo). Filters by sport pill, date preset (7d/30d/6mo/year), and sort order (newest/distance/elevation). Paginated FlatList with the same activity cards. ActivityCard extracted to mobile/components/ActivityCard.tsx so both the feed tab and the new search tab share the same component without duplication.
This commit is contained in:
Davide Scaini
@@ -0,0 +1,145 @@
|
||||
import { useState } from 'react';
|
||||
import { FlatList, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
||||
import { PAGE_SIZE, useFilteredActivities, useFilteredCount, type ActivityFilter } from '@/db/queries';
|
||||
import { ActivityCard } from '@/components/ActivityCard';
|
||||
import { useTheme } from '@/ThemeContext';
|
||||
|
||||
type DatePreset = 'all' | '7d' | '30d' | '6mo' | 'year';
|
||||
type SortKey = 'date' | 'distance' | 'elevation';
|
||||
|
||||
const SPORTS = [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'cycling', label: '🚴 Cycling' },
|
||||
{ value: 'running', label: '🏃 Running' },
|
||||
{ value: 'hiking', label: '🥾 Hiking' },
|
||||
{ value: 'swimming', label: '🏊 Swimming' },
|
||||
{ value: 'walking', label: '🚶 Walking' },
|
||||
];
|
||||
|
||||
const DATE_PRESETS: { value: DatePreset; label: string }[] = [
|
||||
{ value: 'all', label: 'All time' },
|
||||
{ value: '7d', label: '7 days' },
|
||||
{ value: '30d', label: '30 days' },
|
||||
{ value: '6mo', label: '6 months' },
|
||||
{ value: 'year', label: 'This year' },
|
||||
];
|
||||
|
||||
const SORTS: { value: SortKey; label: string }[] = [
|
||||
{ value: 'date', label: 'Newest' },
|
||||
{ value: 'distance', label: 'Distance' },
|
||||
{ value: 'elevation', label: 'Elevation' },
|
||||
];
|
||||
|
||||
function computeDateFrom(preset: DatePreset): string {
|
||||
if (preset === 'all') return '';
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
const now = new Date();
|
||||
let d: Date;
|
||||
if (preset === '7d') d = new Date(now.getTime() - 7 * 86_400_000);
|
||||
else if (preset === '30d') d = new Date(now.getTime() - 30 * 86_400_000);
|
||||
else if (preset === '6mo') { d = new Date(now); d.setMonth(d.getMonth() - 6); }
|
||||
else d = new Date(now.getFullYear(), 0, 1);
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T000000Z`;
|
||||
}
|
||||
|
||||
export default function SearchScreen() {
|
||||
const theme = useTheme();
|
||||
const [sport, setSport] = useState('');
|
||||
const [datePre, setDatePre] = useState<DatePreset>('all');
|
||||
const [sort, setSort] = useState<SortKey>('date');
|
||||
const [limit, setLimit] = useState(PAGE_SIZE);
|
||||
|
||||
const filter: ActivityFilter = { sport, dateFrom: computeDateFrom(datePre), sort };
|
||||
const activities = useFilteredActivities(filter, limit);
|
||||
const total = useFilteredCount(filter);
|
||||
const hasMore = activities.length < total;
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.headerRow}>
|
||||
<Text style={styles.header}>Filter</Text>
|
||||
{total > 0 && <Text style={styles.count}>{total} activities</Text>}
|
||||
</View>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}
|
||||
style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
|
||||
{SPORTS.map(s => (
|
||||
<Pill key={s.value} label={s.label} active={sport === s.value} accent={theme.accent}
|
||||
onPress={() => { setSport(s.value); setLimit(PAGE_SIZE); }} />
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<ScrollView horizontal showsHorizontalScrollIndicator={false}
|
||||
style={styles.pillScroll} contentContainerStyle={styles.pillRow}>
|
||||
{DATE_PRESETS.map(d => (
|
||||
<Pill key={d.value} label={d.label} active={datePre === d.value} accent={theme.accent}
|
||||
onPress={() => { setDatePre(d.value); setLimit(PAGE_SIZE); }} />
|
||||
))}
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.sortRow}>
|
||||
{SORTS.map(s => (
|
||||
<Pressable key={s.value}
|
||||
style={[styles.sortBtn, sort === s.value && { borderBottomColor: theme.accent, borderBottomWidth: 2 }]}
|
||||
onPress={() => { setSort(s.value); setLimit(PAGE_SIZE); }}>
|
||||
<Text style={[styles.sortText, sort === s.value && { color: theme.accent }]}>{s.label}</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{activities.length === 0 ? (
|
||||
<View style={styles.empty}>
|
||||
<Text style={styles.emptyText}>No activities match</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={activities}
|
||||
keyExtractor={a => a.id}
|
||||
renderItem={({ item }) => (
|
||||
<ActivityCard activity={item} selecting={false} checked={false}
|
||||
onToggleSelect={() => {}} onLongPress={() => {}} />
|
||||
)}
|
||||
contentContainerStyle={styles.list}
|
||||
onEndReached={() => { if (hasMore) setLimit(l => l + PAGE_SIZE); }}
|
||||
onEndReachedThreshold={0.3}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Pill({ label, active, accent, onPress }: {
|
||||
label: string; active: boolean; accent: string; onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable
|
||||
style={[styles.pill, active && { backgroundColor: accent + '33', borderColor: accent }]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={[styles.pillText, active && { color: accent }]}>{label}</Text>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#09090b' },
|
||||
headerRow: {
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
|
||||
paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
|
||||
},
|
||||
header: { color: '#fff', fontSize: 22, fontWeight: '700' },
|
||||
count: { color: '#71717a', fontSize: 13 },
|
||||
pillScroll: { flexGrow: 0 },
|
||||
pillRow: { flexDirection: 'row', gap: 8, paddingHorizontal: 16, paddingBottom: 10 },
|
||||
pill: {
|
||||
borderRadius: 20, borderWidth: 1, borderColor: '#3f3f46',
|
||||
paddingHorizontal: 14, paddingVertical: 7,
|
||||
},
|
||||
pillText: { color: '#a1a1aa', fontSize: 13, fontWeight: '500' },
|
||||
sortRow: { flexDirection: 'row', paddingHorizontal: 16, marginBottom: 4 },
|
||||
sortBtn: { marginRight: 24, paddingBottom: 8, borderBottomWidth: 2, borderBottomColor: 'transparent' },
|
||||
sortText: { color: '#71717a', fontSize: 13, fontWeight: '600' },
|
||||
list: { padding: 16, gap: 12, paddingBottom: 80 },
|
||||
empty: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
emptyText: { color: '#52525b', fontSize: 15 },
|
||||
});
|
||||
Reference in New Issue
Block a user