NeoScan_Radiologist/app/App.tsx

113 lines
3.9 KiB
TypeScript

/*
* File: App.tsx
* Description: Main application component with navigation setup
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/
import React, { useRef } from 'react';
import { StatusBar } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native';
import { theme } from './theme/theme';
import { RootStackNavigator, setNavigationRef } from './navigation';
import { StoreProvider } from './store/Provider';
import Toast from 'react-native-toast-message';
import { useAppSelector } from './store/hooks';
import { selectIsAuthenticated } from './modules/Auth/redux/authSelectors';
// ============================================================================
// MOCK DATA SECTION - For demonstration and development purposes
// ============================================================================
// Note: Mock data has been removed for production use
// The following mock data structures were previously defined:
// - mockDashboard: ER dashboard statistics and shift information
// - mockPatients: Patient data with medical records and vital signs
// - mockAlerts: Critical notifications requiring immediate attention
//
// These can be restored for development/testing purposes by uncommenting
// the mock data definitions below this comment block.
/**
* AppContent Component (Inner Component)
*
* Purpose: Inner component that uses Redux hooks for authentication state
*
* Features:
* 1. Connect to Redux store for authentication state
* 2. Set up navigation container with global reference
* 3. Configure status bar appearance
* 4. Render the main app navigator based on authentication state
*
* Navigation Flow:
* 1. App starts → Check Redux authentication status
* 2. If not authenticated → Show LoginScreen
* 3. If authenticated → Show MainTabNavigator (dashboard)
*/
function AppContent() {
// ============================================================================
// REDUX STATE
// ============================================================================
// Get authentication state from Redux
const isAuthenticated = useAppSelector(selectIsAuthenticated);
// Navigation reference for programmatic navigation
const navigationRef = useRef<NavigationContainerRef<any> | null>(null);
// ============================================================================
// EFFECTS
// ============================================================================
// Set up navigation reference for global access
React.useEffect(() => {
setNavigationRef(navigationRef);
}, []);
// ============================================================================
// RENDER SECTION
// ============================================================================
return (
<SafeAreaProvider>
<SafeAreaView style={{flex:1}} edges={['top', 'left', 'right']} >
<NavigationContainer ref={navigationRef}>
<StatusBar
barStyle="dark-content" // Dark text on light background
backgroundColor={theme.colors.background} // Status bar background color
/>
<RootStackNavigator isAuthenticated={isAuthenticated} />
<Toast
position='bottom'
bottomOffset={20}
/>
</NavigationContainer>
</SafeAreaView>
</SafeAreaProvider>
);
}
/**
* App Component (Root Component)
*
* Purpose: Root component that wraps the entire application with Redux Provider
*
* Features:
* 1. Provide Redux store context
* 2. Wrap the main app content
* 3. Enable Redux state management throughout the app
*/
export default function App() {
return (
<StoreProvider>
<AppContent />
</StoreProvider>
);
}
/*
* End of File: App.tsx
* Design & Developed by Tech4Biz Solutions
* Copyright (c) Spurrin Innovations. All rights reserved.
*/