pogdark-app/components/Location.tsx

import React, { useState } from "react";
import { Dialog, TextInput, useTheme, Button } from "react-native-paper";
import { View } from "react-native";
import axios from "axios";
import log from "@/util/log"

export const API_URL = process.env.EXPO_PUBLIC_API_URL;

const Location = () => {
    const theme = useTheme();
    const [zip, setZip] = useState("");
    const [loading, setLoading] = 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) {
            // Optionally handle error
            log.error(err);
        }
        setLoading(false);
    };

    return (
        <Dialog.Content style={{ maxHeight: 300 }}>
            <View style={{ flexDirection: "row", alignItems: "center", padding: 16 }}>
                <TextInput
                    label="Enter Zip Code"
                    mode="outlined"
                    value={zip}
                    onChangeText={setZip}
                    style={{ flex: 1, marginRight: 10, fontFamily: "SpaceReg" }}
                    placeholderTextColor={theme.colors.primary}
                    textColor={theme.colors.primary}
                    theme={{ colors: { text: theme.colors.primary } }}
                />
                <Button
                    mode="contained"
                    onPress={handleSubmit}
                    loading={loading}
                    disabled={!zip || loading}
                >
                    Submit
                </Button>
            </View>
        </Dialog.Content>
    );
};

export default Location;