diff --git a/components/Location.tsx b/components/Location.tsx index 2b92419..f7c2e33 100644 --- a/components/Location.tsx +++ b/components/Location.tsx @@ -1,28 +1,45 @@ import React, { useState } from "react"; -import { Dialog, TextInput, useTheme, Button, Text } from "react-native-paper"; -import { View } from "react-native"; +import { Dialog, TextInput, useTheme, Button, Text, List } 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"; export const API_URL = process.env.EXPO_PUBLIC_API_URL; const BUTTON_WIDTH = 260; +type Park = { + name: string; + address: string; + city: string; + state: string; + zip: string; + location: { + coordinates: [number, number]; + }; +}; + const LocationComponent = () => { const theme = useTheme(); const [zip, setZip] = useState(""); - const [distance, setDistance] = useState(25); // <-- slider value + const [distance, setDistance] = useState(25); const [loading, setLoading] = useState(false); const [locLoading, setLocLoading] = useState(false); + const [parks, setParks] = useState([]); + const [hasSearched, setHasSearched] = useState(false); // 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.error("Nearby Parks:", response.data); // handle parks as you need + log.error("Nearby Parks:", response.data); + setParks(response.data); } catch (err) { log.error("Nearby Parks Error:", err); + setParks([]); + } finally { + setHasSearched(true); } }; @@ -62,8 +79,27 @@ const LocationComponent = () => { setLocLoading(false); }; + // Render each park item + const renderItem = ({ item }: { item: Park }) => ( + } + style={{ + backgroundColor: theme.colors.surface, + borderRadius: 8, + marginBottom: 8, + elevation: 1, + }} + titleStyle={{ fontWeight: "bold" }} + descriptionNumberOfLines={2} + /> + ); + return ( - + - {/* Distance Slider */} Distance: {distance} mile{distance !== 1 ? "s" : ""} @@ -131,6 +166,32 @@ const LocationComponent = () => { thumbTintColor={theme.colors.primary} /> + {/* Parks List */} + {hasSearched && ( + + + Nearby Dogparks + + {parks != null ? ( + String(idx)} + renderItem={renderItem} + showsVerticalScrollIndicator={false} + style={{ maxHeight: 170 }} + /> + ) : ( + + No parks found in range. + + )} + + )} );