Merge pull request 'location-menu' (#5) from location-menu into master

Reviewed-on: https://www.kaiser-labs.com/public/pogdark-app/pulls/5

app/index.tsx

@@ -63,7 +63,9 @@ const Index = () => {
                 setChanged={setUserDataChanged}
                 onClose={() => setProfileActive(false)}
             />
-            <BottomNav toggleLocation={() => setProfileActive(true)}/>
+            <BottomNav
+                isProfileActive={isProfileActive}
+            />
         </View>
     );
 };

components/BottomNav.tsx

@@ -1,24 +1,46 @@
-import {Appbar, Button, Text, useTheme} from "react-native-paper";
-import {View} from "react-native";
+import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-paper";
+import { View } from "react-native";
 import styles from "@/assets/styles";
-import React from "react";
+import React, {useState} from "react";
+import Location from "@/components/Location";
+import Broken from "@/components/Broken";
 
-const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
+
+interface BNProps {
+    isProfileActive: boolean;
+}
+const BottomNav: React.FC<BNProps> = ({ isProfileActive })  => {
     const theme = useTheme();
+    const [menuVisible, setMenuVisible] = useState(false);
+
+
     return (
+        <View style={ isProfileActive && { display: 'none' }}>
             <View style={{ backgroundColor: theme.colors.background }}>
                 <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                     <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
                         <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
                         <Button
                             mode="text"
-                        onPress={() => toggleLocation }
+                            onPress={() => setMenuVisible(true) }
                             style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
                             labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
                             Change
                         </Button>
                     </View>
                 </Appbar.Header>
+                <Portal>
+                    <Dialog visible={menuVisible} onDismiss={() => setMenuVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer, maxHeight: 400 }}>
+                        <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
+                        <Broken />
+                        <Dialog.Actions style={{ justifyContent: "center" }}>
+                            <Button onPress={() => setMenuVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
+                                Close
+                            </Button>
+                        </Dialog.Actions>
+                    </Dialog>
+                </Portal>
+            </View>
         </View>
     )
 }

components/Broken.tsx

@@ -1,19 +1,20 @@
-import {Dialog, useTheme} from "react-native-paper";
-import { Image } from "react-native";
+import {Title, useTheme} from "react-native-paper";
+import { Image, View } from "react-native";
 import React from "react";
 
-const theme = useTheme();
+
 
 const Broken = () => {
+    const theme = useTheme();
     return (
-        <Dialog.Content>
-            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Dialog.Title>
+        <View>
+            <Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Title>
             <Image
                 source={require("../assets/images/broken.png")}
-                style={{ alignSelf: 'center', width: "90%" }}
+                style={{ alignSelf: 'center', resizeMode: "contain", height: 400/3 }}
             />
-            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>And these aren't connected. {"\n"} (We're still working on this part.)</Dialog.Title>
-        </Dialog.Content>
+            <Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>And these aren't connected. {"\n"} (We're still working on this part.)</Title>
+        </View>
     );
 };
 

components/Location.tsx

@@ -1,22 +1,9 @@
-import { Dialog, Portal  } from "react-native-paper";
-import React, {useEffect} from "react";
+import React from "react";
 import Broken from "@/components/Broken";
 
-interface LocationProps {
-    visible: boolean;
-}
-const Location: React.FC<LocationProps> = ({ visible }) => {
-    useEffect(() => {
-        if (visible) {
-
-        }
-    }, [visible]);
+const Location = () => {
     return (
-        <Portal>
-            <Dialog visible={visible} >
         <Broken />
-            </Dialog>
-        </Portal>
     )
 }
 

components/TopNav.tsx

@@ -59,7 +59,7 @@ const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
                     </Dialog.Actions>
                 </Dialog>
                 <Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
-                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Privacy Policy</Dialog.Title>
+                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Report A Bug</Dialog.Title>
                     <Broken />
                     <Dialog.Actions style={{ justifyContent: "center" }}>
                         <Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>