Davide Scaini
a796bf8cae
Diagnosed via on-device debug: build_timeseries produces 3271 points correctly, but the installed wheel's write_activity has a silent exception path that skips writing the timeseries file. The workaround calls build_timeseries directly and writes the file if missing. Also moves useTheme import to @/ThemeContext across all tab screens.
291 lines
9.8 KiB
TypeScript
291 lines
9.8 KiB
TypeScript
import * as FileSystem from 'expo-file-system';
|
|
import { useSQLiteContext } from 'expo-sqlite';
|
|
import { useRouter } from 'expo-router';
|
|
import { useCallback, useState } from 'react';
|
|
import { Alert, FlatList, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';
|
|
import { deleteActivities, useActivities, type ActivitySummary } from '@/db/queries';
|
|
import { syncFeed } from '@/db/sync';
|
|
import { useTheme } from '@/ThemeContext';
|
|
|
|
export default function FeedScreen() {
|
|
const db = useSQLiteContext();
|
|
const theme = useTheme();
|
|
const activities = useActivities();
|
|
const [syncing, setSyncing] = useState(false);
|
|
const [syncMsg, setSyncMsg] = useState<string | null>(null);
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const selecting = selected.size > 0;
|
|
|
|
const doSync = useCallback(async () => {
|
|
setSyncing(true);
|
|
setSyncMsg(null);
|
|
const result = await syncFeed(db);
|
|
setSyncing(false);
|
|
if (result.error) {
|
|
setSyncMsg(result.error);
|
|
} else if (result.total === 0) {
|
|
setSyncMsg('No activities on instance');
|
|
} else if (result.synced === 0 && !result.fetched && !result.uploaded) {
|
|
setSyncMsg(`Up to date (${result.total} activities)`);
|
|
} else {
|
|
const parts = [];
|
|
if (result.synced > 0) parts.push(`${result.synced} new`);
|
|
if (result.fetched) parts.push(`${result.fetched} full dataset${result.fetched === 1 ? '' : 's'}`);
|
|
if (result.uploaded) parts.push(`${result.uploaded} uploaded`);
|
|
setSyncMsg(`Synced: ${parts.join(', ')} (${result.total} total)`);
|
|
}
|
|
setTimeout(() => setSyncMsg(null), 3500);
|
|
}, [db]);
|
|
|
|
function toggleSelect(id: string) {
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id); else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function cancelSelect() {
|
|
setSelected(new Set());
|
|
}
|
|
|
|
function confirmDeleteSelected() {
|
|
const count = selected.size;
|
|
Alert.alert(
|
|
`Delete ${count} activit${count === 1 ? 'y' : 'ies'}`,
|
|
'These activities will be permanently removed from your device.',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Delete',
|
|
style: 'destructive',
|
|
onPress: async () => {
|
|
const ids = Array.from(selected);
|
|
const paths = await deleteActivities(db, ids);
|
|
setSelected(new Set());
|
|
for (const p of paths) {
|
|
if (p) {
|
|
try { await FileSystem.deleteAsync(p, { idempotent: true }); } catch {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
],
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.headerRow}>
|
|
{selecting ? (
|
|
<>
|
|
<Text style={styles.header}>{selected.size} selected</Text>
|
|
<Pressable style={styles.cancelButton} onPress={cancelSelect}>
|
|
<Text style={styles.cancelText}>Cancel</Text>
|
|
</Pressable>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Text style={styles.header}>Feed</Text>
|
|
<Pressable
|
|
style={[styles.syncButton, { backgroundColor: theme.dim }, syncing && styles.syncButtonDisabled]}
|
|
onPress={syncing ? undefined : doSync}
|
|
>
|
|
<Text style={[styles.syncText, { color: theme.accent }]}>{syncing ? 'Syncing…' : '↓ Sync'}</Text>
|
|
</Pressable>
|
|
</>
|
|
)}
|
|
</View>
|
|
|
|
{syncMsg && (
|
|
<Text style={styles.syncMsg}>{syncMsg}</Text>
|
|
)}
|
|
|
|
{activities.length === 0 && !syncing ? (
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyIcon}>🚴</Text>
|
|
<Text style={styles.emptyTitle}>No activities yet</Text>
|
|
<Text style={styles.emptyBody}>
|
|
Import a file or tap Sync to pull from your instance.
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<FlatList
|
|
data={activities}
|
|
keyExtractor={(a) => a.id}
|
|
renderItem={({ item }) => (
|
|
<ActivityCard
|
|
activity={item}
|
|
selecting={selecting}
|
|
checked={selected.has(item.id)}
|
|
onToggleSelect={() => toggleSelect(item.id)}
|
|
onLongPress={() => toggleSelect(item.id)}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.list}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={syncing}
|
|
onRefresh={doSync}
|
|
tintColor="#60a5fa"
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
|
|
{selecting && (
|
|
<View style={styles.actionBar}>
|
|
<Pressable style={styles.deleteBarButton} onPress={confirmDeleteSelected}>
|
|
<Text style={styles.deleteBarText}>Delete {selected.size}</Text>
|
|
</Pressable>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function ActivityCard({
|
|
activity,
|
|
selecting,
|
|
checked,
|
|
onToggleSelect,
|
|
onLongPress,
|
|
}: {
|
|
activity: ActivitySummary;
|
|
selecting: boolean;
|
|
checked: boolean;
|
|
onToggleSelect: () => void;
|
|
onLongPress: () => void;
|
|
}) {
|
|
const router = useRouter();
|
|
const theme = useTheme();
|
|
const km = activity.distance_m != null ? (activity.distance_m / 1000).toFixed(1) : null;
|
|
const elev = activity.elevation_gain_m != null ? Math.round(activity.elevation_gain_m) : null;
|
|
const date = new Date(activity.started_at).toLocaleDateString(undefined, {
|
|
day: 'numeric', month: 'short', year: 'numeric',
|
|
});
|
|
|
|
function handlePress() {
|
|
if (selecting) {
|
|
onToggleSelect();
|
|
} else {
|
|
router.push(`/activity/${activity.id}`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
style={[styles.card, checked && { borderColor: theme.accent }]}
|
|
onPress={handlePress}
|
|
onLongPress={onLongPress}
|
|
>
|
|
<View style={styles.cardTop}>
|
|
<View style={styles.cardLeft}>
|
|
{selecting && (
|
|
<View style={[styles.checkbox, checked && { backgroundColor: theme.accent, borderColor: theme.accent }]}>
|
|
{checked && <Text style={styles.checkmark}>✓</Text>}
|
|
</View>
|
|
)}
|
|
<Text style={styles.sportIcon}>{sportIcon(activity.sport)}</Text>
|
|
</View>
|
|
<View style={styles.cardMeta}>
|
|
<Text style={styles.cardDate}>{date}</Text>
|
|
{activity.origin === 'remote'
|
|
? <Text style={[styles.remoteBadge, { color: theme.accent, borderColor: theme.accent }]}>cloud</Text>
|
|
: !activity.synced_at && <Text style={styles.localBadge}>local</Text>
|
|
}
|
|
</View>
|
|
</View>
|
|
<Text style={styles.cardTitle} numberOfLines={1}>{activity.title}</Text>
|
|
<View style={styles.cardStats}>
|
|
{km && <Stat label="km" value={km} />}
|
|
{elev != null && <Stat label="m↑" value={String(elev)} />}
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<View style={styles.stat}>
|
|
<Text style={styles.statValue}>{value}</Text>
|
|
<Text style={styles.statLabel}>{label}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function sportIcon(sport: string): string {
|
|
const icons: Record<string, string> = {
|
|
cycling: '🚴', running: '🏃', hiking: '🥾', swimming: '🏊', walking: '🚶',
|
|
};
|
|
return icons[sport] ?? '🏅';
|
|
}
|
|
|
|
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' },
|
|
syncButton: {
|
|
borderRadius: 8,
|
|
paddingHorizontal: 14, paddingVertical: 7,
|
|
},
|
|
syncButtonDisabled: { opacity: 0.5 },
|
|
syncText: { fontSize: 13, fontWeight: '600' },
|
|
cancelButton: {
|
|
backgroundColor: '#27272a', borderRadius: 8,
|
|
paddingHorizontal: 14, paddingVertical: 7,
|
|
},
|
|
cancelText: { color: '#a1a1aa', fontSize: 13, fontWeight: '600' },
|
|
syncMsg: {
|
|
color: '#a1a1aa', fontSize: 12, textAlign: 'center',
|
|
paddingHorizontal: 16, paddingBottom: 8,
|
|
},
|
|
list: { padding: 16, gap: 12, paddingBottom: 80 },
|
|
card: {
|
|
backgroundColor: '#18181b', borderRadius: 12,
|
|
padding: 16, borderWidth: 1, borderColor: '#27272a',
|
|
},
|
|
cardTop: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
|
|
cardLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
|
sportIcon: { fontSize: 20 },
|
|
cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
|
cardDate: { color: '#71717a', fontSize: 12 },
|
|
remoteBadge: {
|
|
fontSize: 10, borderWidth: 1,
|
|
borderRadius: 4, paddingHorizontal: 4,
|
|
},
|
|
localBadge: {
|
|
color: '#a1a1aa', fontSize: 10, borderWidth: 1,
|
|
borderColor: '#3f3f46', borderRadius: 4, paddingHorizontal: 4,
|
|
},
|
|
cardTitle: { color: '#f4f4f5', fontSize: 15, fontWeight: '600', marginBottom: 10 },
|
|
cardStats: { flexDirection: 'row', gap: 16 },
|
|
stat: { flexDirection: 'row', alignItems: 'baseline', gap: 3 },
|
|
statValue: { color: '#f4f4f5', fontSize: 16, fontWeight: '600' },
|
|
statLabel: { color: '#71717a', fontSize: 12 },
|
|
checkbox: {
|
|
width: 20, height: 20, borderRadius: 4, borderWidth: 1.5,
|
|
borderColor: '#52525b', alignItems: 'center', justifyContent: 'center',
|
|
},
|
|
checkmark: { color: '#fff', fontSize: 12, fontWeight: '700' },
|
|
empty: {
|
|
flex: 1, alignItems: 'center', justifyContent: 'center', padding: 32,
|
|
},
|
|
emptyIcon: { fontSize: 48, marginBottom: 16 },
|
|
emptyTitle: { color: '#f4f4f5', fontSize: 18, fontWeight: '600', marginBottom: 8 },
|
|
emptyBody: { color: '#71717a', fontSize: 14, textAlign: 'center', lineHeight: 20 },
|
|
actionBar: {
|
|
position: 'absolute', bottom: 0, left: 0, right: 0,
|
|
backgroundColor: '#18181b', borderTopWidth: 1, borderTopColor: '#27272a',
|
|
paddingHorizontal: 16, paddingVertical: 12, paddingBottom: 28,
|
|
},
|
|
deleteBarButton: {
|
|
backgroundColor: '#7f1d1d', borderRadius: 10,
|
|
paddingVertical: 14, alignItems: 'center',
|
|
},
|
|
deleteBarText: { color: '#fca5a5', fontSize: 15, fontWeight: '700' },
|
|
});
|