128 lines
3.5 KiB
TypeScript
128 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import { withObservables } from '@nozbe/watermelondb/react';
|
|
import { database } from '../../src/db';
|
|
import UserChallenge from '../../src/db/models/UserChallenge';
|
|
import { Q } from '@nozbe/watermelondb';
|
|
import ProgressScreen from '../screens/ProgressScreen';
|
|
import { Colors } from '@/constants/theme';
|
|
|
|
const HomeScreen = ({ userChallenge }: { userChallenge: UserChallenge | null }) => {
|
|
const router = useRouter();
|
|
|
|
const handleReset = async () => {
|
|
Alert.alert(
|
|
"Reset Data",
|
|
"Are you sure you want to clear all local data? This cannot be undone.",
|
|
[
|
|
{ text: "Cancel", style: "cancel" },
|
|
{
|
|
text: "Reset",
|
|
style: "destructive",
|
|
onPress: async () => {
|
|
try {
|
|
await database.write(async () => {
|
|
await database.unsafeResetDatabase();
|
|
});
|
|
// Reload or just let the UI update (observables should handle it, but reset might need reload)
|
|
// For now, unsafeResetDatabase might require app reload in some contexts,
|
|
// but let's see if observables pick up the empty state.
|
|
// Actually, unsafeResetDatabase clears everything.
|
|
} catch (e) {
|
|
console.error("Error resetting database:", e);
|
|
}
|
|
}
|
|
}
|
|
]
|
|
);
|
|
};
|
|
|
|
if (userChallenge) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<ProgressScreen />
|
|
<TouchableOpacity style={styles.debugButton} onPress={handleReset}>
|
|
<Text style={styles.debugButtonText}>Debug: Reset Data</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.title}>Welcome to Surge</Text>
|
|
<Text style={styles.subtitle}>You don{`'`}t have an active challenge yet.</Text>
|
|
|
|
<TouchableOpacity
|
|
style={styles.button}
|
|
onPress={() => router.push('/(tabs)/explore')}
|
|
>
|
|
<Text style={styles.buttonText}>Explore Challenges</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.debugButton} onPress={handleReset}>
|
|
<Text style={styles.debugButtonText}>Debug: Reset Data</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const enhance = withObservables([], () => ({
|
|
userChallenge: database.get<UserChallenge>('user_challenges')
|
|
.query(Q.where('status', 'active'))
|
|
.observeWithColumns(['status'])
|
|
.pipe(
|
|
// @ts-ignore
|
|
require('rxjs/operators').map((challenges: UserChallenge[]) => challenges.length > 0 ? challenges[0] : null)
|
|
),
|
|
}));
|
|
|
|
export default enhance(HomeScreen);
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 20,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
color: '#333',
|
|
},
|
|
subtitle: {
|
|
fontSize: 18,
|
|
color: '#666',
|
|
marginBottom: 40,
|
|
textAlign: 'center',
|
|
},
|
|
button: {
|
|
backgroundColor: Colors.light.tint,
|
|
paddingHorizontal: 30,
|
|
paddingVertical: 15,
|
|
borderRadius: 25,
|
|
marginBottom: 20,
|
|
},
|
|
buttonText: {
|
|
color: 'white',
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
},
|
|
debugButton: {
|
|
marginTop: 20,
|
|
padding: 10,
|
|
},
|
|
debugButtonText: {
|
|
color: 'red',
|
|
fontSize: 14,
|
|
}
|
|
});
|