62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { FlatList, StyleSheet, Text, View } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { MOCK_CONTENT } from '@/src/constants/mockContent';
|
|
import { getFavorites } from '@/src/storage/appStorage';
|
|
|
|
export default function FavoritesScreen() {
|
|
const { t } = useTranslation();
|
|
const [ids, setIds] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
(async () => {
|
|
const list = await getFavorites();
|
|
if (!cancelled) setIds(list);
|
|
})();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, []);
|
|
|
|
const items = useMemo(() => {
|
|
const map = new Map(MOCK_CONTENT.map((c) => [c.id, c]));
|
|
return ids.map((id) => map.get(id)).filter(Boolean) as { id: string; text: string }[];
|
|
}, [ids]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{items.length === 0 ? (
|
|
<Text style={styles.empty}>{t('favorites.empty')}</Text>
|
|
) : (
|
|
<FlatList
|
|
data={items}
|
|
keyExtractor={(it) => it.id}
|
|
contentContainerStyle={styles.list}
|
|
renderItem={({ item }) => (
|
|
<View style={styles.row}>
|
|
<Text style={styles.text}>{item.text}</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, padding: 16 },
|
|
empty: { color: '#6B7280', fontSize: 16, textAlign: 'center', marginTop: 40 },
|
|
list: { gap: 12, paddingBottom: 24 },
|
|
row: {
|
|
borderRadius: 14,
|
|
padding: 16,
|
|
backgroundColor: '#F9FAFB',
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
text: { color: '#111827', fontSize: 16, lineHeight: 22 },
|
|
});
|
|
|