// AsyncStorageManager.js import AsyncStorage from '@react-native-async-storage/async-storage'; const AsyncStorageManager = { setItem: async (key, value) => { try { const jsonValue = JSON.stringify(value); await AsyncStorage.setItem(key, jsonValue); console.log(`Stored value for key: ${key}`); } catch (e) { console.error(`Error storing value for key: ${key}`, e); } }, getItem: async (key) => { try { const jsonValue = await AsyncStorage.getItem(key); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch (e) { console.error(`Error getting value for key: ${key}`, e); return null; } }, removeItem: async (key) => { try { await AsyncStorage.removeItem(key); console.log(`Removed item for key: ${key}`); } catch (e) { console.error(`Error removing item for key: ${key}`, e); } }, }; export default AsyncStorageManager; // Refined UserContext with useCallback import React, { createContext, useState, useContext, useMemo, useCallback } from 'react'; const UserContext = createContext(null); export const UserProvider = ({ children }) => { const [userDetails, setUserDetailsState] = useState(null); const setUserDetails = useCallback((details) => { console.log("UserContext: Setting user details", details); setUserDetailsState(details); }, []); const updateUserDetails = useCallback((partialDetails) => { setUserDetailsState(currentDetails => { const updatedDetails = currentDetails ? { ...currentDetails, ...partialDetails } : partialDetails; console.log("UserContext: Updating user details", updatedDetails); return updatedDetails; }); }, []); const clearUserDetails = useCallback(() => { console.log("UserContext: Clearing user details"); setUserDetailsState(null); }, []); const value = useMemo(() => ({ userDetails, setUserDetails, updateUserDetails, // Added updateUserDetails clearUserDetails, }), [userDetails, setUserDetails, updateUserDetails, clearUserDetails]); // Added updateUserDetails return ({children}); }; export const useUser = () => { const context = useContext(UserContext); if (context === undefined || context === null) { throw new Error('useUser must be used within a UserProvider'); } return context; }; import React, {useState, useEffect, useCallback, useRef} from 'react'; import { NavigationContainer, useNavigationContainerRef, } from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import { ActivityIndicator, View, StyleSheet, Alert, Text, Dimensions, } from 'react-native'; import Toast from 'react-native-toast-message'; import {LogBox} from 'react-native'; // Contexts and Utils import AsyncStorageManager from '../utils/AsyncStorageManager'; // Adjust path if needed import {UserProvider, useUser} from '../context/UserContext'; // Adjust path if needed import { MqttProvider, useMqtt, MqttConnectionState, } from '../context/MqttContext'; // Adjust path if needed // Screens and Navigators import LoginScreen from '../screens/LoginScreen'; // Adjust path if needed import MainTabNavigator from './MainTabNavigator'; // Adjust path if needed import CommunityItemDetailScreen from '../screens/CommunityItemDetailScreen'; // <<< Import the detail screen import GalleryScreen from '../screens/GalleryScreen'; import FrontCameraScreen from '../screens/FrontCameraScreen'; import DeviceScreen from '../screens/DeviceScreen'; import ZoneScreen from '../screens/ZoneScreen'; import AlarmsScreen from '../screens/AlarmsScreen'; import DeviceItemScreen from '../screens/DeviceItemScreen'; import GiveAccessScreen from '../screens/GiveAccessScreen'; import ViewAccessScreen from '../screens/ViewAccessScreen'; // Notification Service import NotificationService, { ACTION_ACCEPT, ACTION_DECLINE, ACTION_SILENCE, } from '../services/NotificationService'; // Adjust path if needed import CCTVScreen from '../screens/CCTVScreen'; import ZoneItemScreen from '../screens/ZoneItemScreen'; const Stack = createNativeStackNavigator(); const {height: screenHeight} = Dimensions.get('window'); // --- Notification Handling Logic (Keep as before) --- const handleNotificationOpen = (navigationRef, data, action) => { console.log('Handling Notification Open/Action:', {data, action}); if (!data) { console.warn('No data found in notification to handle.'); return; } const targetScreen = data.screen; const notificationId = data.localNotificationId; // Assuming you pass this in userInfo // Example action handling (customize as needed) if (action) { console.log( `Action '${action}' taken on notification ID: ${notificationId}.`, ); // Handle specific actions like ACCEPT, DECLINE, SILENCE if (action === ACTION_ACCEPT) { console.log(`Handling ACCEPT action.`); // Navigate or perform accept logic if (targetScreen && navigationRef.isReady()) { navigationRef.navigate(targetScreen, { notificationData: data, actionTaken: action, }); } } else if (action === ACTION_DECLINE) { console.log(`Handling DECLINE action.`); // Perform decline logic } else if (action === ACTION_SILENCE) { console.log(`Handling SILENCE action.`); // Perform silence logic } // Optionally cancel the notification after handling the action // notificationService.current?.cancelNotificationById(notificationId); // Need access to service instance } else { // --- Notification Tapped --- console.log(`Handling TAP action for notification ID: ${notificationId}`); if (targetScreen && navigationRef.isReady()) { console.log(`Navigating to screen: ${targetScreen}`); // Ensure navigation happens correctly, potentially checking if already on the screen // or using reset/push depending on desired behavior. // Check if the target screen is the detail screen if (targetScreen === 'CommunityItemDetail') { // Ensure data contains the necessary 'item' for the detail screen if (data.item) { navigationRef.navigate(targetScreen, {item: data.item}); } else { console.warn( 'Notification tapped for CommunityItemDetail but missing item data.', ); // Optionally navigate to a default state or show an error } } else { // Handle navigation for other screens navigationRef.navigate(targetScreen, {notificationData: data}); } } else if (!targetScreen) { console.log('No target screen specified in notification data.'); } else { console.warn('Navigation not ready when notification was opened.'); // Optionally queue the navigation action until ready } } }; // --- Main Content Component --- const AppNavigationContent = () => { const [isLoading, setIsLoading] = useState(true); const [isLoggedIn, setIsLoggedIn] = useState(false); const [fcmToken, setFcmToken] = useState(null); const {setUserDetails, clearUserDetails, updateUserDetails} = useUser(); // Added updateUserDetails const { connect: connectMqtt, disconnect: disconnectMqtt, connectionState: mqttState, } = useMqtt(); const shownConnectedToastRef = useRef(false); const navigationRef = useNavigationContainerRef(); const notificationService = useRef(null); const [notificationInitialized, setNotificationInitialized] = useState(false); // Initialize Notification Service Ref (runs only once) useEffect(() => { LogBox.ignoreAllLogs(true); const onRegisterToken = token => { console.log('AppNavigator received FCM Token:', token); setFcmToken(token); // Store the token // TODO: Send the token to your backend server here if needed // if (token) { sendTokenToServer(token); } }; const onNotificationOpened = (data, action) => { // Ensure navigationRef is available and ready if needed handleNotificationOpen(navigationRef, data, action); }; console.log('AppNavigator: Creating NotificationService instance...'); // Pass the callbacks when creating the instance notificationService.current = new NotificationService( onNotificationOpened, onRegisterToken, ); // Don't initialize immediately here, wait for login status }, []); // Empty dependency array ensures this runs only once // Effect to initialize notifications AFTER login status is confirmed useEffect(() => { // Only initialize if logged in AND not already initialized if (isLoggedIn && notificationService.current && !notificationInitialized) { console.log( 'User logged in, initializing Notification Service (will request permissions)...', ); // Call initialize() which now includes requesting permissions notificationService.current .initialize() .then(() => { console.log('Notification Service initialization attempt complete.'); setNotificationInitialized(true); // Mark as initialized (or attempted) }) .catch(error => { console.error( 'Error during Notification Service initialization:', error, ); setNotificationInitialized(true); // Mark as initialized even on error to prevent retries }); } else if (!isLoggedIn && notificationInitialized) { // Optional: Reset initialization status if user logs out console.log( 'User logged out, resetting notification initialization status.', ); setNotificationInitialized(false); } }, [isLoggedIn, notificationInitialized]); // Depend on login status and initialization status // MQTT Connection Toast (Keep as before) useEffect(() => { if (mqttState === MqttConnectionState.CONNECTED) { if (!shownConnectedToastRef.current) { Toast.show({ type: 'success', text1: 'MQTT Status', text2: 'Successfully connected! 👋', position: 'bottom', visibilityTime: 3000, }); shownConnectedToastRef.current = true; } } else if ( mqttState !== MqttConnectionState.CONNECTING && mqttState !== MqttConnectionState.RECONNECTING ) { if (shownConnectedToastRef.current) { shownConnectedToastRef.current = false; } } }, [mqttState]); // Check Login Status (Keep as before) useEffect(() => { let isMounted = true; const checkLoginStatus = async () => { setIsLoading(true); // Start loading indicator try { const storedUserData = await AsyncStorageManager.getItem('userData'); console.log('isMounted', isMounted); console.log('storedUserData', storedUserData); if (isMounted) { if (storedUserData && storedUserData.token) { console.log('storedUserData after ismount', storedUserData); console.log('User session found.'); setUserDetails(storedUserData); setIsLoggedIn(true); } else { console.log('No user session found.'); setIsLoggedIn(false); clearUserDetails(); } } } catch (error) { console.error('AppNavigator: Failed to load user data:', error); if (isMounted) { Alert.alert('Error', 'Failed to load session data.'); setIsLoggedIn(false); clearUserDetails(); } } finally { console.log('1234'); if (isMounted) setIsLoading(false); // Session check complete } }; checkLoginStatus(); return () => { // Cleanup function isMounted = false; }; }, [setUserDetails, clearUserDetails]); // Removed isLoggedIn from dependency array // Connect/Disconnect MQTT based on Login Status (Keep as before) useEffect(() => { if (isLoggedIn) { if ( mqttState === MqttConnectionState.DISCONNECTED || mqttState === MqttConnectionState.CLOSED || mqttState === MqttConnectionState.ERROR ) { console.log('User logged in, connecting MQTT...'); connectMqtt(); } } else { if ( mqttState === MqttConnectionState.CONNECTED || mqttState === MqttConnectionState.CONNECTING || mqttState === MqttConnectionState.RECONNECTING ) { console.log('User logged out, disconnecting MQTT...'); disconnectMqtt(); } } }, [isLoggedIn, connectMqtt, disconnectMqtt, mqttState]); // Login Handler (Keep as before) const handleLoginSuccess = useCallback( loggedInUserData => { setIsLoading(true); // Show loading briefly while setting state if (loggedInUserData && loggedInUserData.profileDetails) { setUserDetails(loggedInUserData); // Store the entire loggedInUserData setIsLoggedIn(true); // This will trigger the useEffect to initialize notifications // No need to call initialize here directly, the effect handles it } else { Alert.alert('Login Error', 'Failed to process login data.'); setIsLoggedIn(false); clearUserDetails(); } setIsLoading(false); }, [setUserDetails, clearUserDetails], ); // Logout Handler (Keep as before) const handleLogout = useCallback(async () => { try { await AsyncStorageManager.removeItem('userData'); } catch (error) { console.error('Logout Error clearing storage:', error); // Continue logout process even if storage clear fails } finally { clearUserDetails(); setIsLoggedIn(false); // Triggers MQTT disconnect and resets notificationInitialized state // No need to explicitly disconnect notifications here } }, [clearUserDetails]); // Loading State UI if (isLoading) { return ( Loading session... ); } // Navigation Rendering return ( {/* The main stack navigator now includes Login, MainApp (Tabs), and the Detail screen */} {isLoggedIn ? ( <> {/* Pass onLogout to the component containing the logout button */} {props => } {/* Add CommunityItemDetailScreen HERE, outside MainApp but within the logged-in group */} ({ title: route.params?.item?.title || 'Item Details', headerShown: true, // <<< Make sure header is shown for the detail screen headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: route.params?.item?.title || 'Gallery', headerShown: true, // <<< Make sure header is shown for the detail screen headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'FRONT CAMERA', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'DEVICES', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'ZONES', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'ALARMS', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: 'CAMERAS', headerTitleAlign: 'center', // Add this line to center the title headerShown: true, headerBackTitleVisible: false, // Optional: hide back button text on iOS })} /> ({ title: route.params?.device_name || 'DEVICES', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> ({ title: route.params?.zone_name || 'DEVICES', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> ({ title: 'ACCESS', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> ({ title: 'ACCESS', headerTitleAlign: 'center', headerShown: true, headerBackTitleVisible: false, })} /> {/* Add other globally accessible logged-in screens here (e.g., Settings, Profile) */} ) : ( // Logged-out screen(s) {/* Pass fcmToken down to LoginScreen if needed for display/debug */} {props => ( )} )} ); }; // --- Main AppNavigator Component (Wraps Providers) --- const AppNavigator = () => { return ( ); }; const styles = StyleSheet.create({ loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5', }, loadingText: {marginTop: 10, fontSize: 14, color: '#666'}, }); export default AppNavigator; import React, {useState, useEffect} from 'react'; import { View, Text, FlatList, TouchableOpacity, StyleSheet, Image, } from 'react-native'; import {COLORS, FONTS, SIZES, icons, images, theme, border_radius} from '../constants'; import AsyncStorageManager from '../utils/AsyncStorageManager'; import { useUser } from '../context/UserContext'; import { useNavigation } from '@react-navigation/native'; import HOME from '../assets/icons/Home.png'; const ZoneScreenStyle = StyleSheet.create({ container: { flex: 1, backgroundColor: COLORS.white, padding: 20, }, header: { fontSize: 24, fontWeight: 'bold', marginBottom: 20, color: COLORS.primary, }, itemContainer: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', }, itemText: { fontSize: 18, color: COLORS.textBlack, }, itemTypeText: { fontSize: 16, color: COLORS.textBlack, }, }); const ZoneScreen = () => { const [flatArray, setFlatArray] = useState([]); const { updateUserDetails } = useUser(); // use updateUserDetails const navigation = useNavigation(); useEffect(() => { const fetchFlats = async () => { try { const userData = await AsyncStorageManager.getItem('userData'); if (userData && userData.response && userData.response.Data) { const flats = userData.response.Data[0].flats; if (flats && Array.isArray(flats)) { setFlatArray(flats); } else { console.warn('Flats data is not an array or is missing.'); setFlatArray([]); } } else { console.warn('User data or flats array is missing.'); setFlatArray([]); } } catch (error) { console.error('Error fetching flats:', error); setFlatArray([]); } }; fetchFlats(); }, []); return ( Select Your Flat { return ( { try { // 1. Retrieve userData object const userData = await AsyncStorageManager.getItem( 'userData', ); if (!userData) { console.error('No userData found.'); return; } // 2. Update the flat in the existing userData structure const updatedUserData = { ...userData, response: { ...userData.response, Data: userData.response.Data.map(dataItem => ({ // Map over Data array to update the correct item flat: item.flat, // update with selected flat // Optionally update other flat-specific fields if needed ...dataItem, // Keep other properties of Data item })), }, profileDetails: { ...userData.profileDetails, flat: item.flat, }, }; // 3. Store the updated userData await AsyncStorageManager.setItem( 'userData', updatedUserData, ); // 4. Update UserContext with partial user details updateUserDetails({ profileDetails: { flat: item.flat } }); console.log('Updated userData saved and context updated'); navigation.navigate('ZoneItemScreen', { zone_name: 'Zone', flat: item.flat }); // Navigate to ZoneItemScreen // 5. trigger state refresh if needed - Navigation should handle refresh in ZoneItemScreen // navigation.navigate('ZoneItemScreen', { flat: item.flat }); } catch (error) { console.error('Failed to update userData:', error); } }}> {item.flat}, The Ornate ); }} keyExtractor={item => item.id} /> ); }; export default ZoneScreen; import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, ActivityIndicator } from 'react-native'; import { useUser } from '../context/UserContext'; import AsyncStorageManager from '../utils/AsyncStorageManager'; const ZoneItemScreen = ({ route }) => { const { zone_name, flat } = route.params; const { userDetails } = useUser(); const [zoneData, setZoneData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchZoneDetails = async () => { setLoading(true); setError(null); try { // Simulate fetching zone details based on flat from AsyncStorage userData const userData = await AsyncStorageManager.getItem('userData'); if (userData && userData.response && userData.response.Data) { // In a real app, you would likely use an API call here // For now, we'll just display the flat from userData to demonstrate refresh setZoneData(userData.profileDetails); // Or extract relevant zone data } else { setError('Failed to load zone data from storage.'); } } catch (e) { setError('Error fetching zone details.'); console.error('Error fetching zone details:', e); } finally { setLoading(false); } }; fetchZoneDetails(); }, [userDetails?.flat]); // Re-fetch data when userDetails.flat changes if (loading) { return ; } if (error) { return {error}; } return ( {zone_name || 'Zone'} Details {zoneData ? ( Flat: {zoneData.flat} {/* Display other relevant zone details here */} ) : ( No zone data available. )} ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f4f4f4', }, loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, errorContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20, }, errorText: { fontSize: 16, color: 'red', textAlign: 'center', }, title: { fontSize: 22, fontWeight: 'bold', marginBottom: 15, color: '#333', }, detailText: { fontSize: 18, marginBottom: 10, color: '#555', }, }); export default ZoneItemScreen; import React, {useState, useEffect, useCallback, useLayoutEffect} from 'react'; import { View, SafeAreaView, StatusBar, Image, TouchableOpacity, FlatList, Text, Alert, ScrollView, ActivityIndicator, } from 'react-native'; import {useUser} from '../context/UserContext'; import AddItemModal from '../services/AddItemModal'; import * as forge from 'node-forge'; import { DOWNARROW, HOME, PLACEHOLDER, PLAY, UNLOCK, LOCK, QR, GIVE_ACCESS, BLOCK_ALL, VIEW_ACCESS, SHARE_KEY, LOCK_SECURE, CHILD_SAFE, VACATION, DEVICES, ZONES, ALARMS, CCTV, } from '../../assets'; import HomeScreenStyles from '../../styles/HomeScreenStyles'; import {COLORS} from '../../styles/colors'; import {fontSize} from '../../styles/fontstyle'; import moment from 'moment'; import {PUBLIC_KEY} from '../../utils/custom_data'; import BiometricAuth from '../../services/BiometricAuth'; import {useFocusEffect} from '@react-navigation/native'; import ApiManager from '../../services/ApiManager'; import {useMqtt} from '../../context/MqttContext'; import ProgressView from '../../services/ProgressView'; import uiStyle from '../../styles/uiStyle'; import AsyncStorageManager from '../../utils/AsyncStorageManager'; const CAMERA_IMAGE_URI = 'https://picsum.photos/seed/homedoor/400/600'; const mockOptionViewData = [ {name: 'Option 1', image: PLACEHOLDER}, {name: 'Option 2', image: PLACEHOLDER}, {name: 'Option 3', image: PLACEHOLDER}, {name: 'Option 4', image: PLACEHOLDER}, ]; const HomeScreen = ({navigation}) => { // --- MQTT --- const {connectionState, subscribe, unsubscribe, publish} = useMqtt(); const [isLock, setIsLock] = useState(0); const [moreOptionView, setMoreOptionView] = useState(mockOptionViewData); const [eventId, setEventId] = useState(''); const [encodedQR, setEncodedQR] = useState(); const [isFlatModalVisible, setIsFlatModalVisible] = useState(false); const [isQrModalVisible, setIsQrModalVisible] = useState(false); const [onBlock, setBlock] = useState(false); const [onLockSecure, setLockSecure] = useState(false); const [onChildSafe, setChildSafe] = useState(false); const [vacation, setVacation] = useState(false); const [onNormal, setNormal] = useState(false); const [activeModeIds, setActiveModeIds] = useState([]); const {userDetails} = useUser(); const [isCameraLoading, setIsCameraLoading] = useState(false); const [lockPress, setLoackPress] = useState(false); const [title, setTitle] = useState(''); const [flatArray, setFlatArray] = useState([]); const currentDate = new Date(); const [isRefreshing, setIsRefreshing] = useState(false); // State for refreshing indicator console.log('userDetails', userDetails); // --- MQTT Topics --- const MQTT_SUBSCRIBE_TOPIC = 'advaint/cus_' + userDetails.profileDetails.customer_id + '/event/feedback'; const MQTT_PUBLISH_TOPIC = 'advaint/cus_' + userDetails.profileDetails.customer_id + '/allonoff'; const home_access_list = [ {id: 1, name: 'Give Access', image: GIVE_ACCESS}, {id: 2, name: 'Block All', image: BLOCK_ALL}, {id: 3, name: 'View Access', image: VIEW_ACCESS}, {id: 4, name: 'Share key', image: SHARE_KEY}, ]; const home_mode_list = [ {id: 1, name: 'Lock Secure', image: LOCK_SECURE}, {id: 2, name: 'Child Safe', image: CHILD_SAFE}, {id: 3, name: 'Vacation', image: VACATION}, {id: 4, name: 'Normal', image: HOME}, ]; const smart_home_list = [ {id: 1, name: 'Devices', image: DEVICES}, {id: 2, name: 'Zones', image: ZONES}, {id: 3, name: 'Alarms', image: ALARMS}, {id: 4, name: 'Cameras', image: CCTV}, ]; useLayoutEffect(() => { navigation.setOptions({ headerTitleAlign: 'center', headerTitle: () => ( Home ), headerLeft: () => ( { setIsFlatModalVisible(true); }}> Flat: {userDetails?.profileDetails.flat || 'N/A'} {userDetails?.profileDetails.projectName || 'Project'} ), headerRight: () => ( { setIsQrModalVisible(true); }}> ), }); }, [navigation, userDetails]); useEffect(() => { encryptAndEncodeMessage(); getDashboardDetails(); }, []); useEffect(() => { const fetchFlats = async () => { try { const userData = await AsyncStorageManager.getItem('userData'); if (userData && userData.response && userData.response.Data) { setFlatArray(userData.response.Data[0].flats); // Corrected to fetch flats array } else { console.warn('User data or flats array is missing.'); setFlatArray([]); } } catch (error) { console.error('Error fetching flats:', error); setFlatArray([]); } }; fetchFlats(); }, [userDetails]); // --- MQTT Subscribe/Unsubscribe --- useFocusEffect( useCallback(() => { console.log( 'HomeScreen focused, subscribing to MQTT topic:', MQTT_SUBSCRIBE_TOPIC, ); const callback = (data, topic) => { // Handle incoming messages console.log( `Received MQTT message on topic: ${topic}, data: ${data.event_status}`, ); setLoackPress(false); const parsedData = JSON.parse(data); if (parsedData.event_status == 'ON') { setIsLock(1); } else if (parsedData.event_status == 'OFF') { setIsLock(0); } try { const payload = JSON.parse(data); console.log('Parsed MQTT Payload:', payload); // Process payload data here, update UI, etc. } catch (e) { console.warn('MQTT message data is not JSON:', data); } }; subscribe(MQTT_SUBSCRIBE_TOPIC, callback); return () => { console.log( 'HomeScreen blurred, unsubscribing from MQTT topic:', MQTT_SUBSCRIBE_TOPIC, ); unsubscribe(MQTT_SUBSCRIBE_TOPIC, callback); }; }, [subscribe, unsubscribe, userDetails?.profileDetails.flat]), ); // --- Handle Refresh Function --- const handleRefresh = useCallback(async () => { setIsRefreshing(true); // Start refresh indicator console.log('Start Refreshing Data...'); try { await Promise.all([ getDashboardDetails(), // Refresh dashboard details fetchFlatsData(), // Refresh flat list // Add other data fetching functions here if needed ]); } catch (refreshError) { console.error('Error during refresh:', refreshError); Alert.alert('Refresh Error', 'Failed to refresh data.'); } finally { setTimeout(() => { setIsRefreshing(false); // Stop refresh indicator after 2 seconds console.log('Refreshing Data Complete.'); }, 2000); // Simulate refresh time of 2 seconds } }, [getDashboardDetails]); // --- Fetch Flats Data Function (extracted for reuse in refresh) --- const fetchFlatsData = useCallback(async () => { try { const userData = await AsyncStorageManager.getItem('userData'); if (userData && userData.response && userData.response.Data) { setFlatArray(userData.response.Data[0].flats); // Corrected to fetch flats array } } catch (error) { console.error('Error fetching flats:', error); setFlatArray([]); } }, []); // --- Get Dashboard Details Function --- const getDashboardDetails = async (isManualRefresh = false) => { if (!userDetails?.profileDetails.customer_id) { console.log('User details not available yet or missing customer_id.'); return; } console.log(`Fetching list... Manual Refresh: ${isManualRefresh}`); const customer_id = userDetails.profileDetails.customer_id; try { const dashboardResponse = await ApiManager.getDashboardData(customer_id); if (dashboardResponse) { console.log('dashboardResponse:', dashboardResponse.Data.frontLock); setEventId(dashboardResponse.Data.frontLock.event_id); if (dashboardResponse.Data.frontLock.status == 'ON') { setIsLock(1); } else if (dashboardResponse.Data.frontLock.status == 'OFF') { setIsLock(0); } } else { console.error( 'API did not return expected data structure:', dashboardResponse, ); if (isManualRefresh) { Alert.alert( 'Error', 'Failed to fetch items. Invalid data format received.', ); } } } catch (error) { console.error('Fetch List Error in CommunityScreen:', error); if (isManualRefresh) { Alert.alert( 'Fetch Failed', error.message || 'An unexpected error occurred while fetching items.', ); } } finally { } }; const sendMessage = () => { setTitle(isLock == 1 ? 'Locking' : 'Unlocking'); setLoackPress(true); const lockStatus = { event_id: eventId, parameter: isLock == 1 ? 0 : 1, mode: 'MOBILE', contact_id: userDetails.profileDetails.flat_contact_id, }; console.log('Publishing MQTT message:', lockStatus); publish(MQTT_PUBLISH_TOPIC, lockStatus); }; const handleFingerprintScan = async () => { BiometricAuth({ promptMessage: 'Authenticate to lock/unlock', onSuccess: () => { sendMessage(); }, onFailure: () => { Alert.alert('Authentication Failed', 'Unable to authenticate user.'); }, }); }; const handleFlatModalClose = () => { setIsFlatModalVisible(false); }; const handleQrModalClose = () => { setIsQrModalVisible(false); }; const handleBlockClose = () => { setBlock(false); }; const handleLockSecureClose = () => { setLockSecure(false); }; const handleChildSafeClose = () => { setChildSafe(false); }; const handleVacationClose = () => { setVacation(false); }; const handleNormalClose = () => { setNormal(false); }; const message = `{"scan_code": "${ userDetails.profileDetails.qr_code_string }","reader_type":"2","date":"${moment(currentDate, 'DD-MM-YYYY').format( 'DD-MM-YYYY', )}"}`; const encryptAndEncodeMessage = async () => { try { const publicKey = forge.pki.publicKeyFromPem(PUBLIC_KEY); const encryptedMessage = publicKey.encrypt(message, 'RSA-OAEP', { md: forge.md.sha256.create(), mgf1: forge.mgf1.create(), }); const base64EncodedMessage = forge.util.encode64(encryptedMessage); setEncodedQR(base64EncodedMessage); } catch (error) { console.error('Error:', error); } }; const HomeAccessItem = ({item, navigation, setBlock}) => { const [isPressed, setIsPressed] = useState(false); const handlePress = () => { if (item.id == 1) { navigation.navigate('GiveAccessScreen'); } else if (item.id == 2) { setBlock(true); } else if (item.id == 3) { navigation.navigate('ViewAccessScreen'); } }; return ( setIsPressed(true)} onPressOut={() => setIsPressed(false)} onPress={handlePress} // activeOpacity={0.5} style={[ HomeScreenStyles.homeAccessIconBubble, isPressed && {backgroundColor: uiStyle.blue_color}, ]}> {item.name} ); }; return ( Front Door navigation.navigate('FrontCameraScreen')}> setIsCameraLoading(true)} onLoadEnd={() => setIsCameraLoading(false)} onError={e => { console.error( 'Camera Image Load Error:', e.nativeEvent.error, ); setIsCameraLoading(false); }} fadeDuration={0} /> {isCameraLoading && ( )} {!isCameraLoading && ( )} {isLock === 1 ? ( UNLOCKED TAP TO LOCK ) : ( LOCKED TAP TO UNLOCK )} Home Access {/* item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( setIsPressed(true)} onPressOut={() => setIsPressed(false)} onPress={() => { // Alert.alert('Home Access', item.name); if (item.id == 1) { navigation.navigate('GiveAccessScreen'); } else if (item.id == 2) { setBlock(true); } else if (item.id == 3) { navigation.navigate('ViewAccessScreen'); } else if (item.id == 4) { } }} activeOpacity={0.5} style={[ HomeScreenStyles.homeAccessIconBubble, isPressed && {backgroundColor: uiStyle.blue_color}, ]}> {item.name} )} /> */} item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( )} /> Home Mode item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( { if (item.id == 1) { setLockSecure(true); } else if (item.id == 2) { setChildSafe(true); } else if (item.id == 3) { setVacation(true); } else if (item.id == 4) { setNormal(true); } }} activeOpacity={0.5} style={[ HomeScreenStyles.homeAccessIconBubble, activeModeIds.includes(item.id) && { backgroundColor: uiStyle.blue_color, }, ]}> {item.name} )} /> Smart Home item.id.toString()} columnWrapperStyle={HomeScreenStyles.homeAccessColumnWrapper} scrollEnabled={false} renderItem={({item}) => ( { if (item.name == 'Devices') { navigation.navigate('DeviceScreen'); } else if (item.name == 'Zones') { navigation.navigate('ZoneScreen'); } else if (item.name == 'Alarms') { navigation.navigate('AlarmsScreen'); } else if (item.name == 'Cameras') { navigation.navigate('CCTVScreen'); } }} style={HomeScreenStyles.homeAccessIconBubble}> {item.name} )} /> {isFlatModalVisible && ( Current Flat: {userDetails?.profileDetails.flat || 'N/A'} Project: {userDetails?.profileDetails.projectName || 'N/A'} )} {isQrModalVisible && ( )} {onBlock && ( { Alert.alert('Lock', 'Secured'); }}> )} {onLockSecure && ( { setActiveModeIds(prev => prev.includes(1) ? prev.filter(id => id !== 1) : [...prev, 1], ); }}> )} {onChildSafe && ( { setActiveModeIds(prev => prev.includes(2) ? prev.filter(id => id !== 2) : [...prev, 2], ); }}> )} {vacation && ( { setActiveModeIds(prev => prev.includes(3) ? prev.filter(id => id !== 3) : [...prev, 3], ); }}> )} {onNormal && ( { setActiveModeIds(prev => prev.includes(4) ? prev.filter(id => id !== 4) : [...prev, 4], ); }}> )} {lockPress && } {isRefreshing && } ); }; export default HomeScreen; import React, {useState, useEffect, useCallback} from 'react'; import { Modal, View, Text, TouchableOpacity, StyleSheet, TextInput, Image, FlatList, } from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {fontSize} from '../styles/fontstyle'; import {COLORS} from '../styles/colors'; import AsyncStorageManager from '../utils/AsyncStorageManager'; import {useUser} from '../context/UserContext'; import {HOME} from '../assets'; const AddItemModal = ({ isVisible, onClose, modalTitle, fields, type, flat_no, project_name, qrValue, name, children, // Add handleRefresh as a prop onBlockAccess, onLockAccess, onChildAccess, onVacationAccess, onNormalAccess, flat_list, showBack, handleRefresh, // Receive handleRefresh prop }) => { const [isModalVisible, setModalVisible] = useState(isVisible); const [fieldValues, setFieldValues] = useState({}); const navigation = useNavigation(); const {userDetails, setUserDetails, updateUserDetails} = useUser(); useEffect(() => { setModalVisible(isVisible); }, [isVisible]); const handleInputChange = (fieldName, text) => { setFieldValues({...fieldValues, [fieldName]: text}); }; const renderField = ({item}) => ( {item.label} handleInputChange(item.fieldName, text)} /> ); const onSubmit = () => { // Handle form submission based on modal type if (type === 'add_device') { // Logic for adding device onClose(); } else if (type === 'add_zone') { // Logic for adding zone onClose(); } else if (type === 'block_access') { onBlockAccess(); onClose(); } else if (type === 'lock_secure') { onLockAccess(); onClose(); } else if (type === 'child_safe') { onChildAccess(); onClose(); } else if (type === 'vacation') { onVacationAccess(); onClose(); } else if (type === 'normal') { onNormalAccess(); onClose(); } else if (type === 'change_flat') { onClose(); } console.log('Submit button pressed', fieldValues); }; const FlatItem = ({item}) => { return ( { try { // 1. Get the original userData const userData = await AsyncStorageManager.getItem('userData'); if (!userData) { console.error('No userData found.'); return; } // 2. Update the flat in the existing userData structure const updatedUserData = { ...userData, response: { ...userData.response, Data: userData.response.Data.map(dataItem => ({ // Map over Data array to update the correct item flat: item.flat, // update with selected flat // Optionally update other flat-specific fields if needed ...dataItem, // Keep other properties of Data item })), }, profileDetails: { ...userData.profileDetails, flat: item.flat, }, }; // 3. Store the updated userData await AsyncStorageManager.setItem( 'userData', updatedUserData, ); updateUserDetails({profileDetails: {flat: item.flat}}); console.log('Flat updated successfully'); handleRefresh(); // Call handleRefresh after flat update onClose(); // Close the modal after flat change } catch (error) { console.error('Flat update failed:', error); } }}> {item.flat}, {project_name} ); }; return ( {showBack && ( )} {modalTitle} X {type == 'change_flat' && ( {children} } keyExtractor={item => item.id} ItemSeparatorComponent={() => } /> )} {type == 'Qr_code' && ( Flat No: {flat_no} Project Name: {project_name} User Name: {name} Scan QR Code {qrValue && ( )} )} {type !== 'change_flat' && type !== 'Qr_code' && ( item.fieldName} /> Submit )} ); }; const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, modalView: { margin: 20, backgroundColor: COLORS.white_color, borderRadius: 20, padding: 25, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, width: '90%', maxHeight: '90%', }, header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', width: '100%', marginBottom: 20, }, backButton: { padding: 10, marginRight: 10, }, backIcon: { width: 20, height: 20, tintColor: COLORS.textBlack, }, modalTitle: { fontSize: fontSize.modal_title, fontWeight: 'bold', color: COLORS.textBlack, flex: 1, textAlign: 'center', }, closeButton: { padding: 10, marginLeft: 10, }, closeText: { color: COLORS.textBlack, fontSize: fontSize.xxlarge, }, fieldContainer: { width: '100%', marginBottom: 15, }, label: { fontSize: fontSize.modal_field_label, marginBottom: 5, color: COLORS.textBlack, }, input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, padding: 10, fontSize: fontSize.modal_field_input, color: COLORS.textBlack, }, submitButton: { backgroundColor: COLORS.primary_color, borderRadius: 10, paddingVertical: 12, width: '100%', alignItems: 'center', marginTop: 20, }, submitButtonText: { color: COLORS.white_color, fontSize: fontSize.modal_button_text, fontWeight: 'bold', }, bodyContianer: { width: '100%', }, displayContent: { width: '100%', backgroundColor: COLORS.background_color, padding: 10, borderRadius: 10, marginBottom: 20, }, modalDisplayRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8, }, modalDisplayLabel: { fontSize: fontSize.modal_display_label, color: COLORS.textBlack, fontWeight: 'bold', }, modalDisplayText: { fontSize: fontSize.modal_display_text, color: COLORS.textBlack, }, itemTypeText: { fontSize: fontSize.modal_flat_list_text, color: COLORS.textBlack, }, qrBody: { gap: 20, alignItems: 'center', }, qrCodeContainer: { alignItems: 'center', }, qrLabel: { fontSize: fontSize.modal_qr_label, color: COLORS.textBlack, marginBottom: 10, }, qrImage: { width: 200, height: 200, }, }); export default AddItemModal;