added park list

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<Park[]>([]);
+    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 }) => (
+        <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}
+        />
+    );
+
     return (
-        <Dialog.Content style={{ maxHeight: 400, justifyContent: "center", alignItems: "center" }}>
+        <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
             <View style={{ alignItems: "center", width: "100%" }}>
                 <Button
                     mode="outlined"
@@ -114,7 +150,6 @@ const LocationComponent = () => {
                         Submit
                     </Button>
                 </View>
-                {/* Distance Slider */}
                 <View style={{ width: BUTTON_WIDTH, marginTop: 10, alignItems: "center" }}>
                     <Text style={{ color: theme.colors.primary, marginBottom: 2 }}>
                         Distance: {distance} mile{distance !== 1 ? "s" : ""}
@@ -131,6 +166,32 @@ const LocationComponent = () => {
                         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 != null ? 8 : 2,
+                            color: theme.colors.primary
+                        }}>
+                            Nearby Dogparks
+                        </Text>
+                        {parks != null ? (
+                            <FlatList
+                                data={parks}
+                                keyExtractor={(_, idx) => String(idx)}
+                                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>
     );