From 2553596a67b4292e3a2fff9d924b854124a91ac2 Mon Sep 17 00:00:00 2001
From: whysman <whysman@whystech.com>
Date: Wed, 19 Feb 2025 15:48:02 -0500
Subject: [PATCH] Moved the Nav bar into a separate file.

---
 app/Nav.tsx        | 54 +++++++++++++++++++++++++++++++++++++++++++++
 app/StatusPage.tsx | 55 +++-------------------------------------------
 app/index.tsx      |  8 ++++---
 3 files changed, 62 insertions(+), 55 deletions(-)
 create mode 100644 app/Nav.tsx

diff --git a/app/Nav.tsx b/app/Nav.tsx
new file mode 100644
index 0000000..3877efc
--- /dev/null
+++ b/app/Nav.tsx
@@ -0,0 +1,54 @@
+import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
+import {Image, StyleSheet, View} from "react-native";
+import React, {useState} from "react";
+
+const styles = StyleSheet.create({
+    logoContainer: { flex: 1, alignItems: "center" },
+    logo: { width: 150, height: 75, resizeMode: "contain" },
+});
+
+const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
+    const theme = useTheme();
+    const [aboutVisible, setAboutVisible] = useState(false);
+    const [menuVisible, setMenuVisible] = useState(false);
+    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
+
+    return (
+        <View style={{ backgroundColor: theme.colors.background }}>
+            <Appbar.Header style={{ backgroundColor: theme.colors.primary }}>
+                <View>
+                    <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor}>
+                        <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us"/>
+                    </Menu>
+                    <Appbar.Action icon="menu"
+                        onPressIn={(event) => {
+                            setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
+                            setMenuVisible(true);
+                        }}
+                        iconColor={theme.colors.inversePrimary} />
+                </View>
+                <View style={styles.logoContainer}>
+                    <Image source={require("../assets/images/pogdark_logo.png")} style={styles.logo} />
+                </View>
+                <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.inversePrimary } />
+            </Appbar.Header>
+            <Portal>
+                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.background }}>
+                    <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center' }}>About Us</Dialog.Title>
+                    <Dialog.Content>
+                        <Text style={{ color: theme.colors.onSurface, textAlign: 'justify' }}>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec laoreet luctus, felis sapien facilisis augue, at tristique enim turpis nec turpis. Donec convallis justo vel mi consectetur, at pulvinar justo dictum. Mauris vulputate dapibus neque, sed sagittis libero dapibus eu. Integer nec mi at quam cursus suscipit sed et tortor.
+                        </Text>
+                    </Dialog.Content>
+                    <Dialog.Actions style={{ justifyContent: "center" }}>
+                        <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.secondary }} labelStyle={{ color: theme.colors.onPrimary }}>
+                            Close
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        </View>
+    );
+};
+
+export default Nav;
diff --git a/app/StatusPage.tsx b/app/StatusPage.tsx
index d27e9d3..d8fd215 100644
--- a/app/StatusPage.tsx
+++ b/app/StatusPage.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import axios from "axios";
-import { Image, StyleSheet, View } from "react-native";
-import { Appbar, Avatar, Button, List, useTheme, Dialog, Portal, Text, Menu } from "react-native-paper";
+import { StyleSheet, View } from "react-native";
+import { Avatar, List, Button, useTheme,  } from "react-native-paper";
 
 interface Message {
     Id: string;
@@ -14,8 +14,6 @@ interface Message {
 
 const styles = StyleSheet.create({
     container: { flex: 1, alignItems: "stretch" },
-    logoContainer: { flex: 1, alignItems: "center" },
-    logo: { width: 150, height: 75, resizeMode: "contain" },
     listContainer: { flex: 1, width: "100%" },
     listSubheader: {
         fontSize: 18, // Larger text
@@ -53,16 +51,13 @@ const styles = StyleSheet.create({
     },
 });
 
-const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggleProfile: () => void; id: string; name: string; image: string; isProfileActive: boolean }) => {
+const StatusPage = ({ id, name, image, isProfileActive }: { id: string; name: string; image: string; isProfileActive: boolean }) => {
     const theme = useTheme();
 
     const [messages, setMessages] = useState<Message[]>([]);
     const { lastMessage } = useWebSocket("ws://localhost:8080/ws", {
         shouldReconnect: () => true,
     });
-    const [aboutVisible, setAboutVisible] = useState(false);
-    const [menuVisible, setMenuVisible] = useState(false);
-    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);
 
     useEffect(() => {
         if (lastMessage?.data) {
@@ -91,35 +86,6 @@ const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggl
 
     return (
         <View style={[styles.container, { backgroundColor: theme.colors.background }, isProfileActive && { display: 'none' }]}>
-            <Appbar.Header style={{ backgroundColor: theme.colors.primary }}>
-            <View>
-                <Menu
-                    visible={menuVisible}
-                    onDismiss={() => setMenuVisible(false)}
-                    anchor={menuAnchor}
-                >
-                    <Menu.Item
-                        onPress={() => {
-                            setMenuVisible(false);
-                            setAboutVisible(true);
-                        }}
-                        title="About Us"
-                    />
-                </Menu>
-                <Appbar.Action
-                    icon="menu"
-                    onPressIn={(event) => {
-                        setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
-                        setMenuVisible(true);
-                    }}
-                    iconColor={theme.colors.inversePrimary}
-                />
-            </View>
-            <View style={styles.logoContainer}>
-                <Image source={require("../assets/images/pogdark_logo.png")} style={styles.logo} />
-            </View>
-            <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.inversePrimary } />
-            </Appbar.Header>
             <View style={[styles.listContainer, { backgroundColor: theme.colors.surface }]}>
                 <View style={styles.listRow}>
                     <View style={styles.listColumn}>
@@ -170,21 +136,6 @@ const StatusPage = ({ toggleProfile, id, name, image, isProfileActive }: { toggl
                         style={[styles.actionButton, { backgroundColor: theme.colors.primary }]}
                         labelStyle={{ color: theme.colors.onPrimary }} >Arrived</Button>
             </View>
-            <Portal>
-                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.background }}>
-                    <Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center' }}>About Us</Dialog.Title>
-                    <Dialog.Content>
-                        <Text style={{ color: theme.colors.onSurface, textAlign: 'justify' }}>
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec laoreet luctus, felis sapien facilisis augue, at tristique enim turpis nec turpis. Donec convallis justo vel mi consectetur, at pulvinar justo dictum. Mauris vulputate dapibus neque, sed sagittis libero dapibus eu. Integer nec mi at quam cursus suscipit sed et tortor.
-                        </Text>
-                    </Dialog.Content>
-                    <Dialog.Actions style={{ justifyContent: "center" }}>
-                        <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.secondary }} labelStyle={{ color: theme.colors.onPrimary }}>
-                            Close
-                        </Button>
-                    </Dialog.Actions>
-                </Dialog>
-            </Portal>
         </View>
 
 
diff --git a/app/index.tsx b/app/index.tsx
index 28d93e8..27bbed9 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -5,8 +5,7 @@ import { v4 as uuidv4 } from "uuid";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import ProfileScreen from "@/app/ProfileScreen";
 import StatusPage from "@/app/StatusPage";
-
-
+import Nav from "@/app/Nav";
 
 const Index = () => {
     const { colors } = useTheme();
@@ -55,8 +54,11 @@ const Index = () => {
 
     return (
         <View style={[styles.container,{ backgroundColor: colors.background }]}>
-            <StatusPage
+            <Nav
                 toggleProfile={() => setProfileActive(true)}
+                isProfileActive={isProfileActive}
+            />
+            <StatusPage
                 id={userId}
                 name={userName}
                 image={userImage}