changing layout again

components/Dialogs.tsx

@@ -3,6 +3,7 @@ import { Portal, Button, Dialog, useTheme } from "react-native-paper";
 import About from "@/components/About";
 import Privacy from "@/components/Privacy";
 import Broken from "@/components/Broken";
+import Location from "@/components/Location";
 
 interface DialogsProps {
     aboutVisible: boolean;
@@ -58,7 +59,7 @@ const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisi
             <Dialog visible={locationVisible} onDismiss={() => toggleLocation()}
                     style={{backgroundColor: theme.colors.primaryContainer}}>
                 <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
-                <Broken/>
+                <Location />
                 <Dialog.Actions style={{justifyContent: "center"}}>
                     <Button onPress={() => toggleLocation()} mode="contained"
                             style={{backgroundColor: theme.colors.inversePrimary}}

components/Location.tsx

@@ -1,10 +1,106 @@
-import React from "react";
-import Broken from "@/components/Broken";
+import React, { useState } from "react";
+import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
+import { View } from "react-native";
+import axios from "axios";
+import * as Location from "expo-location";
+import log from "@/util/log"
 
-const Location = () => {
-    return (
-        <Broken />
-    )
+export const API_URL = process.env.EXPO_PUBLIC_API_URL;
+
+const BUTTON_WIDTH = 260;
+
+const LocationComponent = () => {
+    const theme = useTheme();
+    const [zip, setZip] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [locLoading, setLocLoading] = useState(false);
+
+    const handleSubmit = async () => {
+        if (!zip) return;
+        setLoading(true);
+        try {
+            const response = await axios.post(API_URL + "/zipLookup", { zip });
+            log.error(response.data);
+            const long = response.data[0];
+            const lat = response.data[1];
+        } catch (err) {
+            log.error(err);
         }
+        setLoading(false);
+    };
 
-export default Location;
+    const handleGetLocation = async () => {
+        setLocLoading(true);
+        try {
+            let { status } = await Location.requestForegroundPermissionsAsync();
+            if (status !== 'granted') {
+                log.error("Permission to access location was denied");
+                setLocLoading(false);
+                return;
+            }
+            let location = await Location.getCurrentPositionAsync({});
+            const { longitude, latitude } = location.coords;
+            log.error([longitude, latitude]);
+        } catch (err) {
+            log.error("Location Error:", err);
+        }
+        setLocLoading(false);
+    };
+
+    return (
+        <Dialog.Content style={{ maxHeight: 360, justifyContent: "center", alignItems: "center" }}>
+            <View style={{ alignItems: "center", width: "100%" }}>
+                <Button
+                    mode="outlined"
+                    onPress={handleGetLocation}
+                    loading={locLoading}
+                    disabled={locLoading}
+                    style={{ marginBottom: 12, width: BUTTON_WIDTH }}
+                >
+                    Use My Location
+                </Button>
+                <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
+                <View
+                    style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                        width: BUTTON_WIDTH,
+                        justifyContent: "center",
+                    }}
+                >
+                    <TextInput
+                        label="Enter Zip Code"
+                        mode="outlined"
+                        value={zip}
+                        onChangeText={setZip}
+                        style={{
+                            flex: 3,
+                            marginRight: 6,
+                            fontFamily: "SpaceReg",
+                            minWidth: 0,
+                        }}
+                        placeholderTextColor={theme.colors.primary}
+                        textColor={theme.colors.primary}
+                        theme={{ colors: { text: theme.colors.primary } }}
+                    />
+                    <Button
+                        mode="contained"
+                        onPress={handleSubmit}
+                        loading={loading}
+                        disabled={!zip || loading}
+                        style={{
+                            flex: 2,
+                            minWidth: 0,
+                            height: 50,
+                        }}
+                        contentStyle={{ height: 50 }}
+                    >
+                        Submit
+                    </Button>
+                </View>
+            </View>
+        </Dialog.Content>
+    );
+};
+
+export default LocationComponent;