465 lines
12 KiB
TypeScript
465 lines
12 KiB
TypeScript
import {
|
|
StatusBar,
|
|
useColorScheme,
|
|
View,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
Alert,
|
|
NativeModules,
|
|
Image,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
import { useState, useEffect } from 'react';
|
|
import Login from './src/components/Login';
|
|
import Register from './src/components/Register';
|
|
import { authAPI } from './src/services/authAPI';
|
|
import { networkService } from './src/services/networkService';
|
|
import { ScannerScreen } from './src/screens/ScannerScreen';
|
|
|
|
type Screen = 'login' | 'register' | 'home' | 'scanner';
|
|
const { MyNativeModule } = NativeModules;
|
|
|
|
function App() {
|
|
const isDarkMode = useColorScheme() === 'dark';
|
|
const [currentScreen, setCurrentScreen] = useState<Screen>('login');
|
|
const [isInitialized, setIsInitialized] = useState(false);
|
|
const [isOnline, setIsOnline] = useState(true);
|
|
const [currentUser, setCurrentUser] = useState<any>(null);
|
|
const [qrCode, setQrCode] = useState<string | null>(null);
|
|
const [isGeneratingQR, setIsGeneratingQR] = useState(false);
|
|
const [scannedCodes, setScannedCodes] = useState<any[]>([]);
|
|
|
|
// Initialize app
|
|
useEffect(() => {
|
|
initializeApp();
|
|
console.log("MyNativeModule", MyNativeModule);
|
|
MyNativeModule.greet("John").then((msg: any) => {
|
|
console.log(msg);
|
|
});
|
|
|
|
// Listen for network changes
|
|
const unsubscribe = networkService.addListener((networkState) => {
|
|
setIsOnline(networkState.isConnected);
|
|
});
|
|
|
|
return unsubscribe;
|
|
}, []);
|
|
|
|
const initializeApp = async () => {
|
|
try {
|
|
console.log('Initializing app...');
|
|
|
|
// Initialize authentication system
|
|
await authAPI.initialize();
|
|
|
|
// Check if user is already logged in
|
|
const isLoggedIn = await authAPI.isLoggedIn();
|
|
if (isLoggedIn) {
|
|
const user = await authAPI.getCurrentUser();
|
|
setCurrentUser(user);
|
|
setCurrentScreen('home');
|
|
}
|
|
|
|
setIsInitialized(true);
|
|
console.log('App initialized successfully');
|
|
} catch (error) {
|
|
console.error('App initialization error:', error);
|
|
setIsInitialized(true); // Continue anyway
|
|
}
|
|
};
|
|
|
|
const navigateToLogin = () => {
|
|
setCurrentUser(null);
|
|
setQrCode(null); // Clear QR code when navigating to login
|
|
setCurrentScreen('login');
|
|
};
|
|
|
|
const navigateToRegister = () => setCurrentScreen('register');
|
|
|
|
const navigateToHome = async () => {
|
|
const user = await authAPI.getCurrentUser();
|
|
setCurrentUser(user);
|
|
setQrCode(null); // Clear old QR code when new user logs in
|
|
setCurrentScreen('home');
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await authAPI.logout();
|
|
setQrCode(null); // Clear QR code on logout
|
|
navigateToLogin();
|
|
Alert.alert('Success', 'Logged out successfully');
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
Alert.alert('Error', 'Failed to logout');
|
|
}
|
|
};
|
|
|
|
const showAppStatus = async () => {
|
|
try {
|
|
const status = await authAPI.getAppStatus();
|
|
const statusMessage = `
|
|
Network: ${status.network.isOnline ? 'Online' : 'Offline'}
|
|
Users: ${status.storage.totalUsers}
|
|
Current User: ${status.authentication.currentUser || 'None'}
|
|
Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}
|
|
`.trim();
|
|
|
|
Alert.alert('App Status', statusMessage);
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Failed to get app status');
|
|
}
|
|
};
|
|
|
|
const handleScanResult = (result: any) => {
|
|
console.log('Scan result:', result);
|
|
setScannedCodes(prev => [
|
|
{
|
|
code: result.code,
|
|
format: result.format,
|
|
timestamp: new Date().toLocaleTimeString(),
|
|
},
|
|
...prev,
|
|
]);
|
|
Alert.alert(
|
|
'✓ Scanned Successfully',
|
|
`Code: ${result.code}\nFormat: ${result.format}`,
|
|
[
|
|
{
|
|
text: 'Close',
|
|
onPress: () => setCurrentScreen('home'),
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const openScanner = () => {
|
|
setCurrentScreen('scanner');
|
|
} catch (error) {
|
|
Alert.alert('Error', 'Failed to get app status');
|
|
}
|
|
};
|
|
|
|
const generateQRCode = async () => {
|
|
if (!currentUser?.email) {
|
|
Alert.alert('Error', 'No user email available');
|
|
return;
|
|
}
|
|
|
|
setIsGeneratingQR(true);
|
|
try {
|
|
const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
|
|
const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
|
|
setQrCode(base64Image);
|
|
Alert.alert('Success', 'QR Code generated successfully!');
|
|
} catch (error) {
|
|
console.error('QR Code generation error:', error);
|
|
Alert.alert('Error', 'Failed to generate QR code');
|
|
} finally {
|
|
setIsGeneratingQR(false);
|
|
}
|
|
};
|
|
|
|
const renderScreen = () => {
|
|
switch (currentScreen) {
|
|
case 'login':
|
|
return (
|
|
<Login
|
|
onNavigateToRegister={navigateToRegister}
|
|
onLoginSuccess={navigateToHome}
|
|
/>
|
|
);
|
|
case 'register':
|
|
return (
|
|
<Register
|
|
onNavigateToLogin={navigateToLogin}
|
|
onRegisterSuccess={navigateToHome}
|
|
/>
|
|
);
|
|
case 'scanner':
|
|
return (
|
|
<ScannerScreen
|
|
presignedUrl="https://your-backend-presigned-url.com"
|
|
onScan={handleScanResult}
|
|
/>
|
|
);
|
|
case 'home':
|
|
return (
|
|
<ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent}>
|
|
<View style={styles.statusBar}>
|
|
<Text style={styles.statusText}>
|
|
{isOnline ? '🟢 Online' : '🔴 Offline'}
|
|
</Text>
|
|
</View>
|
|
|
|
<Text style={styles.welcomeText}>
|
|
Welcome, {currentUser?.fullName || 'User'}!
|
|
</Text>
|
|
|
|
<Text style={styles.emailText}>
|
|
{currentUser?.email}
|
|
</Text>
|
|
|
|
{qrCode && (
|
|
<View style={styles.qrContainer}>
|
|
<Text style={styles.qrLabel}>Your QR Code:</Text>
|
|
<Image
|
|
source={{ uri: qrCode }}
|
|
style={styles.qrImage}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.buttonContainer}>
|
|
<TouchableOpacity
|
|
style={styles.scannerButton}
|
|
onPress={openScanner}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
📱 Scan QR/Barcode
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.qrButton}
|
|
onPress={generateQRCode}
|
|
disabled={isGeneratingQR}
|
|
>
|
|
<Text style={styles.buttonText}>
|
|
{isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.statusButton} onPress={showAppStatus}>
|
|
<Text style={styles.buttonText}>App Status</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
|
|
<Text style={styles.buttonText}>Logout</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{scannedCodes.length > 0 && (
|
|
<View style={styles.scannedContainer}>
|
|
<Text style={styles.scannedTitle}>
|
|
Scanned Codes ({scannedCodes.length})
|
|
</Text>
|
|
{scannedCodes.slice(0, 5).map((item, index) => (
|
|
<View key={index} style={styles.scannedItem}>
|
|
<Text style={styles.scannedCode}>{item.code}</Text>
|
|
<View style={styles.scannedFooter}>
|
|
<Text style={styles.scannedFormat}>{item.format}</Text>
|
|
<Text style={styles.scannedTime}>{item.timestamp}</Text>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)}
|
|
|
|
<Text style={styles.infoText}>
|
|
{isOnline
|
|
? 'Your data is synced with the cloud'
|
|
: 'Working offline - data saved locally'}
|
|
</Text>
|
|
</ScrollView>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// Show loading screen while initializing
|
|
if (!isInitialized) {
|
|
return (
|
|
<SafeAreaProvider>
|
|
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
|
<View style={styles.loadingContainer}>
|
|
<Text style={styles.loadingText}>Initializing...</Text>
|
|
</View>
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SafeAreaProvider>
|
|
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
|
{renderScreen()}
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
loadingContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: '#f0f0f0',
|
|
},
|
|
loadingText: {
|
|
fontSize: 18,
|
|
color: '#3bb6d8',
|
|
fontWeight: '600',
|
|
},
|
|
homeContainer: {
|
|
flex: 1,
|
|
backgroundColor: '#f0f0f0',
|
|
},
|
|
scrollContent: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 50,
|
|
minHeight: '100%',
|
|
},
|
|
statusBar: {
|
|
position: 'absolute',
|
|
top: 60,
|
|
right: 20,
|
|
backgroundColor: 'white',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
zIndex: 10,
|
|
},
|
|
statusText: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
},
|
|
welcomeText: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
color: '#333',
|
|
marginBottom: 8,
|
|
textAlign: 'center',
|
|
marginTop: 40,
|
|
},
|
|
emailText: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
marginBottom: 30,
|
|
},
|
|
qrContainer: {
|
|
alignItems: 'center',
|
|
marginBottom: 30,
|
|
backgroundColor: 'white',
|
|
padding: 20,
|
|
borderRadius: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
qrLabel: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
marginBottom: 12,
|
|
},
|
|
qrImage: {
|
|
width: 300,
|
|
height: 300,
|
|
borderRadius: 8,
|
|
},
|
|
buttonContainer: {
|
|
flexDirection: 'column',
|
|
gap: 12,
|
|
marginBottom: 30,
|
|
width: '100%',
|
|
},
|
|
scannerButton: {
|
|
backgroundColor: '#9333ea',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
},
|
|
qrButton: {
|
|
backgroundColor: '#10b981',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
},
|
|
statusButton: {
|
|
backgroundColor: '#3bb6d8',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
},
|
|
logoutButton: {
|
|
backgroundColor: '#ff6b6b',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14,
|
|
borderRadius: 25,
|
|
alignItems: 'center',
|
|
},
|
|
buttonText: {
|
|
color: 'white',
|
|
fontWeight: '600',
|
|
fontSize: 16,
|
|
},
|
|
scannedContainer: {
|
|
width: '100%',
|
|
marginBottom: 20,
|
|
backgroundColor: 'white',
|
|
borderRadius: 12,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 4,
|
|
elevation: 3,
|
|
},
|
|
scannedTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
marginBottom: 12,
|
|
},
|
|
scannedItem: {
|
|
backgroundColor: '#f5f5f5',
|
|
borderLeftWidth: 4,
|
|
borderLeftColor: '#9333ea',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
marginBottom: 8,
|
|
borderRadius: 4,
|
|
},
|
|
scannedCode: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: '#000',
|
|
marginBottom: 4,
|
|
},
|
|
scannedFooter: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
scannedFormat: {
|
|
fontSize: 11,
|
|
color: '#666',
|
|
fontWeight: '500',
|
|
},
|
|
scannedTime: {
|
|
fontSize: 11,
|
|
color: '#999',
|
|
},
|
|
infoText: {
|
|
fontSize: 14,
|
|
color: '#888',
|
|
textAlign: 'center',
|
|
fontStyle: 'italic',
|
|
},
|
|
});
|
|
|
|
export default App;
|