77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { MOCK_CONTENT } from '@/src/constants/mockContent';
|
|
import { addFavorite, setReaction } from '@/src/storage/appStorage';
|
|
|
|
export default function HomeScreen() {
|
|
const { t } = useTranslation();
|
|
const [index, setIndex] = useState(0);
|
|
|
|
const item = useMemo(() => MOCK_CONTENT[index % MOCK_CONTENT.length], [index]);
|
|
|
|
async function onLike() {
|
|
await setReaction(item.id, 'like');
|
|
await addFavorite(item.id);
|
|
setIndex((i) => i + 1);
|
|
}
|
|
|
|
async function onDislike() {
|
|
await setReaction(item.id, 'dislike');
|
|
setIndex((i) => i + 1);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.card}>
|
|
<Text style={styles.text}>{item.text}</Text>
|
|
</View>
|
|
|
|
<View style={styles.actions}>
|
|
<Pressable style={[styles.button, styles.dislike]} onPress={onDislike}>
|
|
<Text style={styles.buttonText}>{t('home.dislike')}</Text>
|
|
</Pressable>
|
|
<Pressable style={[styles.button, styles.like]} onPress={onLike}>
|
|
<Text style={styles.buttonText}>{t('home.like')}</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
justifyContent: 'center',
|
|
gap: 16,
|
|
},
|
|
card: {
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
backgroundColor: '#F6F7FB',
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#E5E7EB',
|
|
},
|
|
text: {
|
|
fontSize: 20,
|
|
lineHeight: 28,
|
|
color: '#111827',
|
|
},
|
|
actions: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
paddingVertical: 14,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
},
|
|
like: { backgroundColor: '#16A34A' },
|
|
dislike: { backgroundColor: '#EF4444' },
|
|
buttonText: { color: 'white', fontSize: 16, fontWeight: '600' },
|
|
});
|
|
|