Added the app version and fixed some drawer issues

wildlifeai · Apr 1, 2024 · 2fd3c2c · 2fd3c2c
1 parent afdd494
commit 2fd3c2c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 15 deletions.
diff --git a/src/components/AppDrawer.tsx b/src/components/AppDrawer.tsx
@@ -5,11 +5,14 @@ import {
 	useContext,
 	useState,
 } from "react"
-import { StyleSheet } from "react-native"
+import { StyleSheet, View } from "react-native"
 import { Drawer } from "react-native-drawer-layout"
-import { Button, Surface } from "react-native-paper"
+import { Avatar, Button, Surface } from "react-native-paper"
 import { WWText } from "./ui/WWText"
 import { useExtendedTheme } from "../theme"
+import { useAuth } from "../providers/AuthProvider"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { getReadableVersion } from "react-native-device-info"
 
 type DrawerContextProps = {
 	isOpen: boolean
@@ -21,21 +24,38 @@ export const useAppDrawer = () => useContext(DrawerContext)
 
 export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 	const [isOpen, setIsOpen] = useState(false)
-	const { padding } = useExtendedTheme()
+	const { padding, spacing } = useExtendedTheme()
+	const { setIsLoggedIn, isLoggedIn } = useAuth()
+	const { top } = useSafeAreaInsets()
+
+	const onLogout = () => {
+		setIsLoggedIn(false)
+		setIsOpen(false)
+	}
 
 	return (
 		<Drawer
-			style={styles.view}
+			swipeEnabled={isLoggedIn}
 			open={isOpen}
 			onOpen={() => setIsOpen(true)}
 			onClose={() => setIsOpen(false)}
+			drawerStyle={styles.view}
 			renderDrawerContent={() => {
 				return (
-					<Surface style={[{ padding }, styles.view]}>
+					<Surface
+						style={[{ padding, paddingTop: padding + top }, styles.view]}
+					>
+						<Avatar.Image source={require("../assets/avatar.png")} />
 						<WWText variant="bodyLarge">I'm empty at the moment.</WWText>
-						<Button onPress={() => setIsOpen((prevOpen) => !prevOpen)}>{`${
-							isOpen ? "Close" : "Open"
-						} drawer`}</Button>
+						<Button icon="logout" onPress={onLogout}>
+							Logout
+						</Button>
+						<View style={styles.version}>
+							<WWText>Current version:</WWText>
+							<WWText style={[styles.versionText, { marginStart: spacing }]}>
+								v{getReadableVersion()}
+							</WWText>
+						</View>
 					</Surface>
 				)
 			}}
@@ -50,5 +70,17 @@ export const AppDrawer = ({ children }: PropsWithChildren<unknown>) => {
 const styles = StyleSheet.create({
 	view: {
 		flex: 1,
+		height: "auto",
+	},
+	test: {
+		height: 500,
+	},
+	version: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "flex-end",
+	},
+	versionText: {
+		fontWeight: "bold",
 	},
 })
diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -1,8 +1,9 @@
 import { NativeStackHeaderProps } from "@react-navigation/native-stack"
-import { Appbar } from "react-native-paper"
+import { Appbar, Avatar } from "react-native-paper"
 import { getHeaderTitle } from "@react-navigation/elements"
-import { useAuth } from "../providers/AuthProvider"
 import { useAppDrawer } from "./AppDrawer"
+import { useExtendedTheme } from "../theme"
+import { StyleSheet } from "react-native"
 
 export const NavigationBar = ({
 	navigation,
@@ -11,23 +12,39 @@ export const NavigationBar = ({
 	back,
 }: NativeStackHeaderProps) => {
 	const title = getHeaderTitle(options, route.name)
-	const { setIsLoggedIn } = useAuth()
 	const { isOpen, setIsOpen } = useAppDrawer()
+	const {
+		colors: { onBackground },
+	} = useExtendedTheme()
 
 	return (
 		<Appbar.Header mode="center-aligned">
 			{back ? (
-				<Appbar.BackAction onPress={navigation.goBack} />
+				<Appbar.BackAction
+					iconColor={onBackground}
+					onPress={navigation.goBack}
+				/>
 			) : (
 				<Appbar.Action
+					iconColor={onBackground}
 					icon={isOpen ? "backburger" : "forwardburger"}
-					onPress={() => setIsOpen((prevState) => !prevState)}
+					onPress={() => setIsOpen(isOpen ? false : true)}
 				/>
 			)}
 			{title && <Appbar.Content title={title} />}
-			{setIsLoggedIn && (
-				<Appbar.Action icon="logout" onPress={() => setIsLoggedIn(false)} />
+			{!isOpen && (
+				<Avatar.Image
+					style={styles.avatar}
+					size={40}
+					source={require("../assets/avatar.png")}
+				/>
 			)}
 		</Appbar.Header>
 	)
 }
+
+const styles = StyleSheet.create({
+	avatar: {
+		marginEnd: 6,
+	},
+})