store park variable in user context

store park variable, clear prior search values
added select park ability
2025-04-28 00:05:33 -04:00 · 2025-04-27 14:58:11 -04:00 · 2025-04-27 14:54:25 -04:00 · 2025-04-27 10:32:53 -04:00 · 2025-04-27 10:09:04 -04:00 · 2025-04-26 23:00:56 -04:00
6 changed files with 282 additions and 90 deletions
--- a/app/index.tsx
+++ b/app/index.tsx
@ -2,6 +2,7 @@ import React from 'react';
 import {View, Text } from "react-native";
 import { useTheme } from "react-native-paper";
 import Profile from "@/components/Profile";
+import LocationScreen from "@/components/Location";
 import Status from "@/components/Status";
 import TopNav from "@/components/TopNav";
 import DrawerMenu from "@/components/DrawerMenu";
@ -31,6 +32,8 @@ const Index = () => {
        setUserName,
        userImage,
        setUserImage,
+        park,
+        setPark,
        userStatus,
        setUserStatus,
        setUserDataChanged,
@ -63,11 +66,9 @@ const Index = () => {
                aboutVisible={isAboutActive}
                privacyVisible={isPrivacyActive}
                bugVisible={isBugActive}
-                locationVisible={isLocationActive}
                toggleAbout={() => setAboutActive(!isAboutActive)}
                togglePrivacy={() => setPrivacyActive(!isPrivacyActive)}
                toggleBug={() => setBugActive(!isBugActive)}
-                toggleLocation={() => setLocationActive(!isLocationActive)}
            />
            <TopNav
                toggleMenu={() => setMenuActive(!isMenuActive)}
@ -94,6 +95,14 @@ const Index = () => {
                setChanged={setUserDataChanged}
                onClose={() => setProfileActive(false)}
            />
+            <LocationScreen
+                visible={isLocationActive}
+                currentTheme={currentTheme}
+                park={park}
+                setPark={setPark}
+                setChanged={setUserDataChanged}
+                onClose={() => setLocationActive(false)}
+            />
        </View>
    );
 };
--- a/components/Dialogs.tsx
+++ b/components/Dialogs.tsx
@ -3,20 +3,18 @@ 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;
    privacyVisible: boolean;
    bugVisible: boolean;
-    locationVisible: boolean;
    toggleAbout: () => void;
    togglePrivacy: () => void;
    toggleBug: () => void;
-    toggleLocation: () => void;
 }

-const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, locationVisible, toggleAbout, togglePrivacy, toggleBug, toggleLocation }) => {
+const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisible, toggleAbout, togglePrivacy, toggleBug }) => {
    const theme = useTheme();
    return (
        <Portal>
@ -56,18 +54,6 @@ const Dialogs: React.FC<DialogsProps> = ({ aboutVisible, privacyVisible, bugVisi
                    </Button>
                </Dialog.Actions>
            </Dialog>
-            <Dialog visible={locationVisible} onDismiss={() => toggleLocation()}
-                    style={{backgroundColor: theme.colors.primaryContainer}}>
-                <Dialog.Title style={{color: theme.colors.primary, textAlign: 'center'}}>Location</Dialog.Title>
-                <Location />
-                <Dialog.Actions style={{justifyContent: "center"}}>
-                    <Button onPress={() => toggleLocation()} mode="contained"
-                            style={{backgroundColor: theme.colors.inversePrimary}}
-                            labelStyle={{color: theme.colors.primary}}>
-                        Close
-                    </Button>
-                </Dialog.Actions>
-            </Dialog>
        </Portal>
    )
 }
--- a/components/Location.tsx
+++ b/components/Location.tsx
@ -1,34 +1,84 @@
-import React, { useState } from "react";
-import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper";
-import { View } from "react-native";
+import React, {useEffect, useState} from "react";
+import { Dialog, TextInput, useTheme, Button, Text, List, Portal } from "react-native-paper";
+import { View, FlatList } from "react-native";
+import Slider from "@react-native-community/slider";
 import axios from "axios";
 import * as Location from "expo-location";
-import log from "@/util/log"
+import log from "@/util/log";
+
+interface LocationScreenProps {
+    visible: boolean;
+    setChanged: (dataChanged: boolean) => void;
+    currentTheme: string;
+    park: string;
+    setPark: (data: string) => void;
+    onClose: () => void;
+}
+
+interface Park {
+    Id: string;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    zip: string;
+    location: {
+        coordinates: [number, number];
+    };
+}

 export const API_URL = process.env.EXPO_PUBLIC_API_URL;
-
 const BUTTON_WIDTH = 260;

-const LocationComponent = () => {
+const LocationScreen: React.FC<LocationScreenProps> = ({ visible, park, setPark, setChanged, onClose }) => {
    const theme = useTheme();
    const [zip, setZip] = useState("");
+    const [distance, setDistance] = useState(25);
    const [loading, setLoading] = useState(false);
    const [locLoading, setLocLoading] = useState(false);
+    const [parks, setParks] = useState<Park[]>([]);
+    const [hasSearched, setHasSearched] = useState(false);
+    const [selectedPark, setSelectedPark] = useState<Park | null>(null);

+    useEffect(() => {
+        if (visible) {
+            if (park) {
+                setSelectedPark(JSON.parse(park) as Park | null);
+            }
+        }
+    }, [visible]);
+
+    // Call the parks endpoint with coordinates
+    const fetchNearbyParks = async (longitude: number, latitude: number) => {
+        try {
+            const response = await axios.post(API_URL + "/parkLookup", { "Lon": longitude, "Lat": latitude, "Dist": distance });
+            log.debug("Nearby Parks:", response.data);
+            setParks(response.data);
+        } catch (err) {
+            log.error("Nearby Parks Error:", err);
+            setParks([]);
+        } finally {
+            setHasSearched(true);
+        }
+    };
+
+    // Zip code handler
    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];
+            log.debug("Zip Lookup Response:", response.data);
+            const longitude = response.data[0];
+            const latitude = response.data[1];
+            await fetchNearbyParks(longitude, latitude);
        } catch (err) {
            log.error(err);
        }
        setLoading(false);
    };

+    // Geolocation handler
    const handleGetLocation = async () => {
        setLocLoading(true);
        try {
@ -40,16 +90,85 @@ const LocationComponent = () => {
            }
            let location = await Location.getCurrentPositionAsync({});
            const { longitude, latitude } = location.coords;
-            log.error([longitude, latitude]);
+            log.debug([longitude, latitude]);
+            await fetchNearbyParks(longitude, latitude);
        } catch (err) {
            log.error("Location Error:", err);
        }
        setLocLoading(false);
    };

+    // Render each park item
+    const renderItem = ({ item }: { item: Park }) => (
+        <List.Item
+            title={item.name}
+            description={
+                `${item.address}\n${item.city}, ${item.state} ${item.zip}`
+            }
+            left={props => <List.Icon {...props} icon="paw" />}
+            style={{
+                backgroundColor: theme.colors.surface,
+                borderRadius: 8,
+                marginBottom: 8,
+                elevation: 1,
+            }}
+            titleStyle={{ fontWeight: "bold" }}
+            descriptionNumberOfLines={2}
+            onPress={() => {
+                setSelectedPark(item);
+                const parkString = JSON.stringify(item)
+                if ( park !== parkString ) {
+                    setChanged(true);
+                }
+                setPark(parkString);
+                setParks([]);
+                setHasSearched(false);
+            }}
+        />
+    );
+
    return (
-        <Dialog.Content style={{ maxHeight: 360, justifyContent: "center", alignItems: "center" }}>
+        <Portal>
+            <Dialog visible={visible}
+                onDismiss={onClose}
+                style={{ backgroundColor: theme.colors.background }} >
+                <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
+                <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
                    <View style={{ alignItems: "center", width: "100%" }}>
+                        {/* If a park is selected, show only that park info and change button */}
+                        {selectedPark ? (
+                            <View style={{ width: BUTTON_WIDTH, alignItems: "center" }}>
+                                <List.Item
+                                    title={selectedPark.name}
+                                    description={
+                                        `${selectedPark.address}\n${selectedPark.city}, ${selectedPark.state} ${selectedPark.zip}`
+                                    }
+                                    left={props => <List.Icon {...props} icon="paw" />}
+                                    style={{
+                                        backgroundColor: theme.colors.surface,
+                                        borderRadius: 8,
+                                        marginBottom: 8,
+                                        elevation: 1,
+                                        width: "100%"
+                                    }}
+                                    titleStyle={{ fontWeight: "bold" }}
+                                    descriptionNumberOfLines={2}
+                                />
+                                <Button
+                                    mode="outlined"
+                                    onPress={() => {
+                                        setSelectedPark(null);
+                                        setParks([]);
+                                        setHasSearched(false);
+                                    }}
+                                    style={{ marginTop: 16, width: "100%" }}
+                                >
+                                    Change Park
+                                </Button>
+                            </View>
+                        ) : (
+                            // Otherwise show location lookup tools and park list
+                            <>
                                <Button
                                    mode="outlined"
                                    onPress={handleGetLocation}
@ -60,14 +179,13 @@ const LocationComponent = () => {
                                    Use My Location
                                </Button>
                                <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
-                <View
-                    style={{
+                                <View style={{
                                    flexDirection: "row",
                                    alignItems: "center",
                                    width: BUTTON_WIDTH,
                                    justifyContent: "center",
-                    }}
-                >
+                                    marginBottom: 4,
+                                }}>
                                    <TextInput
                                        label="Enter Zip Code"
                                        mode="outlined"
@ -98,9 +216,55 @@ const LocationComponent = () => {
                                        Submit
                                    </Button>
                                </View>
+                                <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
+                                    <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
+                                        Distance: {distance} mile{distance !== 1 ? "s" : ""}
+                                    </Text>
+                                    <Slider
+                                        style={{ width: "100%", height: 36 }}
+                                        minimumValue={1}
+                                        maximumValue={40}
+                                        step={1}
+                                        value={distance}
+                                        onValueChange={setDistance}
+                                        minimumTrackTintColor={theme.colors.primary}
+                                        maximumTrackTintColor={theme.colors.onSurfaceDisabled || "#ccc"}
+                                        thumbTintColor={theme.colors.primary}
+                                    />
+                                </View>
+                                {/* Parks List */}
+                                {hasSearched && (
+                                    <View style={{ width: BUTTON_WIDTH, marginTop: 18, maxHeight: 200 }}>
+                                        <Text style={{
+                                            fontWeight: "bold",
+                                            fontSize: 18,
+                                            marginBottom: parks.length > 0 ? 8 : 2,
+                                            color: theme.colors.primary
+                                        }}>
+                                            Nearby Dogparks
+                                        </Text>
+                                        {parks.length > 0 ? (
+                                            <FlatList
+                                                data={parks}
+                                                keyExtractor={(item) => item.Id}
+                                                renderItem={renderItem}
+                                                showsVerticalScrollIndicator={false}
+                                                style={{ maxHeight: 170 }}
+                                            />
+                                        ) : (
+                                            <Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
+                                                No parks found in range.
+                                            </Text>
+                                        )}
+                                    </View>
+                                )}
+                            </>
+                        )}
                    </View>
                </Dialog.Content>
+            </Dialog>
+        </Portal>
    );
 };

-export default LocationComponent;
+export default LocationScreen;
--- a/context/UserContext.tsx
+++ b/context/UserContext.tsx
@ -26,6 +26,8 @@ interface UserContextType {
    setUserName: (name: string) => void;
    userImage: string;
    setUserImage: (image: string) => void;
+    park: string;
+    setPark: (park: string) => void;
    userStatus: string;
    setUserStatus: (status: string) => void;
    setUserDataChanged: (changed: boolean) => void;
@ -52,6 +54,7 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
    const [userId, setUserId] = useState("");
    const [userName, setUserName] = useState("");
    const [userImage, setUserImage] = useState("");
+    const [park, setPark] = useState("");
    const [userStatus, setUserStatus] = useState("none");
    const [userDataChanged, setUserDataChanged] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
@ -65,7 +68,8 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                const storedUserName = await AsyncStorage.getItem("userName");
                const storedUserImage = await AsyncStorage.getItem("userImage");
                const storedUserTheme = await AsyncStorage.getItem("theme");
-                log.debug("Stored theme: ", storedUserTheme);
+                const storedPark = await AsyncStorage.getItem("park");
+                log.debug("Stored park: ", storedPark);
                if (storedUserId) {
                    setUserId(storedUserId);
                    setUserName(storedUserName || "");
@ -79,6 +83,13 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                    setTheme("blue")
                    setProfileActive(true);
                }
+                if(storedPark) {
+                    setPark(storedPark);
+                    setLocationActive(false);
+                } else {
+                    setPark("");
+                    setLocationActive(true);
+                }
            } catch (error) {
                log.error("Error loading user data:", error);
            } finally {
@ -98,7 +109,8 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                await AsyncStorage.setItem("userName", userName);
                await AsyncStorage.setItem("userImage", userImage);
                await AsyncStorage.setItem("theme", currentTheme);
-                log.debug("Current theme: ", currentTheme);
+                await AsyncStorage.setItem("park", park);
+                log.debug("Current park: ", park);
                setUserDataChanged(false);
            } catch (error) {
                log.error("Error saving user data:", error);
@ -160,6 +172,8 @@ export const UserProvider: React.FC<UserProviderProps> = ({ children }) => {
                setUserName,
                userImage,
                setUserImage,
+                park,
+                setPark,
                userStatus,
                setUserStatus,
                setUserDataChanged,
--- a/package-lock.json
+++ b/package-lock.json
@ -11,6 +11,7 @@
        "@expo/metro-runtime": "~4.0.1",
        "@expo/vector-icons": "^14.0.2",
        "@react-native-async-storage/async-storage": "~2.1.1",
+        "@react-native-community/slider": "^4.5.6",
        "@react-navigation/bottom-tabs": "^7.2.0",
        "@react-navigation/native": "^7.0.14",
        "axios": "~1.8.4",
@ -21,6 +22,7 @@
        "expo-haptics": "~14.0.1",
        "expo-image-picker": "~16.0.6",
        "expo-linking": "~7.0.4",
+        "expo-location": "^18.0.10",
        "expo-router": "~4.0.16",
        "expo-splash-screen": "~0.29.20",
        "expo-status-bar": "~2.0.1",
@ -3597,6 +3599,12 @@
        "react-native": "^0.0.0-0 || >=0.65 <1.0"
      }
    },
+    "node_modules/@react-native-community/slider": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-4.5.6.tgz",
+      "integrity": "sha512-UhLPFeqx0YfPLrEz8ffT3uqAyXWu6iqFjohNsbp4cOU7hnJwg2RXtDnYHoHMr7MOkZDVdlLMdrSrAuzY6KGqrg==",
+      "license": "MIT"
+    },
    "node_modules/@react-native/assets-registry": {
      "version": "0.77.1",
      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.77.1.tgz",
@ -7308,6 +7316,15 @@
        "react-native": "*"
      }
    },
+    "node_modules/expo-location": {
+      "version": "18.0.10",
+      "resolved": "https://registry.npmjs.org/expo-location/-/expo-location-18.0.10.tgz",
+      "integrity": "sha512-R0Iioz0UZ9Ts8TACPngh8uDFbajJhVa5/igLqWB8Pq/gp8UHuwj7PC8XbZV7avsFoShYjaxrOhf4U7IONeKLgg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
    "node_modules/expo-modules-autolinking": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.5.tgz",
--- a/package.json
+++ b/package.json
@ -15,15 +15,21 @@
    "preset": "jest-expo"
  },
  "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
    "@expo/vector-icons": "^14.0.2",
+    "@react-native-async-storage/async-storage": "~2.1.1",
+    "@react-native-community/slider": "^4.5.6",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
+    "axios": "~1.8.4",
    "expo": "~52.0.25",
    "expo-blur": "~14.0.2",
    "expo-constants": "~17.0.4",
    "expo-font": "~13.0.3",
    "expo-haptics": "~14.0.1",
+    "expo-image-picker": "~16.0.6",
    "expo-linking": "~7.0.4",
+    "expo-location": "^18.0.10",
    "expo-router": "~4.0.16",
    "expo-splash-screen": "~0.29.20",
    "expo-status-bar": "~2.0.1",
@ -35,19 +41,15 @@
    "react-native": "0.77.1",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-logs": "~5.3.0",
+    "react-native-paper": "~5.13.1",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
+    "react-native-vector-icons": "~10.2.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "react-use-websocket": "~4.13.0",
-    "@react-native-async-storage/async-storage": "~2.1.1",
-    "expo-image-picker": "~16.0.6",
-    "axios": "~1.8.4",
-    "uuid": "~11.0.5",
-    "react-native-paper": "~5.13.1",
-    "react-native-vector-icons": "~10.2.0",
-    "@expo/metro-runtime": "~4.0.1"
+    "uuid": "~11.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
Author	SHA1	Message	Date
whysman	f711c9d610	store park variable in user context	2025-04-28 00:05:33 -04:00
whysman	c1f7bfb805	store park variable, clear prior search values	2025-04-27 14:58:11 -04:00
whysman	cc5a8abb49	added select park ability	2025-04-27 14:54:25 -04:00
whysman	e7d0beb123	added location id	2025-04-27 10:32:53 -04:00
whysman	7c7f9de208	Move location out of dialogs	2025-04-27 10:09:04 -04:00
whysman	f2df245878	added park list	2025-04-26 23:00:56 -04:00
whysman	a0ed714f2d	Added distance slider	2025-04-26 13:28:33 -04:00
whysman	f714617e35	Added parkLookup endpoint	2025-04-26 13:20:02 -04:00