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

import {createNativeStackNavigator} from "@react-navigation/native-stack"
import {NavigationContainer} from "@react-navigation/native"
import {HStack, IconButton, Stack, 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"

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[800],
                                 },
                                 headerTintColor: '#fff',
                                 headerTitleStyle: {
                                     fontWeight: 'bold',
                                 },
                                 headerRight: () => (
                                     <HStack space={ 0 } alignItems="end" marginRight={-3}>
                                         <IconButton
                                             onPress={() => navigation.navigate("Notes", {inventoryId: null})}
                                             title="Info"
                                             color="#fff"
                                             _icon={{
                                                 as: AntDesign,
                                                 name: "message1",
                                                 color: "white"
                                             }}
                                         />
                                         <IconButton
                                             onPress={ () => navigation.navigate("Search", { inventoryId: null }) }
                                             title="Info"
                                             color="#fff"
                                             _icon={ {
                                                 as: AntDesign,
                                                 name: "search1",
                                                 color: "white"
                                             } }
                                         />
                                         <IconButton
                                             onPress={() => navigation.navigate("Logout", {inventoryId: null})}
                                             title="Info"
                                             color="#fff"
                                             _icon={{
                                                 as: AntDesign,
                                                 name: "logout",
                                                 color: "white"
                                             }}
                                         />
                                     </HStack>
                                 ),
                             } ) }
            >
                { 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