aswi2023one-team-to-rule-them-all-gitlab/src/pages/Navigation.tsx @ c0af5101

import {createNativeStackNavigator} from "@react-navigation/native-stack"
import {NavigationContainer} from "@react-navigation/native"
import {HamburgerIcon, HStack, IconButton, Menu, Pressable, Stack, View, VStack} from "native-base"
import {AntDesign} from "@expo/vector-icons"
import {createDrawerNavigator} from "@react-navigation/drawer"
import {useSelector} from "react-redux"
import {RootState} from "../stores/store"
import {nativeBaseTheme} from "../theme/nativeBaseTheme"
import HomePage from "./HomePage"
import LoginPage from "./LoginPage"
import SearchPage from "./SearchPage"
import Logout from "./Logout"
import ItemViewPage from "./ItemViewPage"
import NotesViewPage from "./NotesViewPage"
import MenuComponent from "../components/navigation/MenuComponent"

export type RootStackParamList = {
    Home: undefined,
    Search: { inventoryId: string | null },
    Logout: undefined,
    Item: { itemId: string },
    Login: undefined,
    Notes: undefined,
}

const Navigation = () => {
    const Stack = createNativeStackNavigator<RootStackParamList>()
    const loggedIn = useSelector((state: RootState) => state.user.loggedIn)

    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home"
                             screenOptions={ ({ navigation }) => ( {
                                 headerStyle: {
                                     backgroundColor: nativeBaseTheme.colors.primary[50],
                                 },
                                 headerTitleStyle: {
                                     fontWeight: 'bold',
                                     color: nativeBaseTheme.colors.primary[500],
                                 },
                                 headerTintColor: nativeBaseTheme.colors.primary[500],
                                 headerRight: () => (
                                     <MenuComponent navigation={navigation}/>
                                 ),
                                 contentStyle: {
                                     backgroundColor: nativeBaseTheme.colors.primary[50],
                                 },
                             } ) }
            >
                { loggedIn ? (
                    <>
                        <Stack.Screen
                            name="Home"
                            component={ HomePage }
                            options={ {
                                title: 'My home'
                            } }
                        />
                        <Stack.Screen
                            name="Search"
                            component={ SearchPage }
                            initialParams={ { inventoryId: null } }
                        />
                        <Stack.Screen
                            name={ "Notes" }
                            component={ NotesViewPage }
                        />
                        <Stack.Screen
                            name="Logout"
                            component={ Logout }
                        />
                        <Stack.Screen
                            name={ "Item" }
                            component={ ItemViewPage }
                        />
                    </>
                ) : (
                    <Stack.Screen
                        name="Login"
                        component={ LoginPage }
                        options={ ({ navigation }) => ( {
                            headerRight: () => (
                                <></>
                            )
                        } ) }
                    />
                ) }
            </Stack.Navigator>
        </NavigationContainer>
    )

}

export default Navigation