public/pogdark-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

added select park ability

Browse Source
This commit is contained in:
whysman 2025-04-27 14:54:25 -04:00
parent e7d0beb123
commit cc5a8abb49
2 changed files with 134 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/index.tsx
View File

@ -95,7 +95,6 @@ const Index = () => {
/> />
<LocationScreen <LocationScreen
visible={isLocationActive} visible={isLocationActive}
setTheme={setTheme}
currentTheme={currentTheme} currentTheme={currentTheme}
setChanged={setUserDataChanged} setChanged={setUserDataChanged}
onClose={() => setLocationActive(false)} onClose={() => setLocationActive(false)}

72
components/Location.tsx
View File

@ -9,7 +9,6 @@ import log from "@/util/log";
interface LocationScreenProps { interface LocationScreenProps {
visible: boolean; visible: boolean;
setChanged: (dataChanged: boolean) => void; setChanged: (dataChanged: boolean) => void;
setTheme: (theme: string) => void;
currentTheme: string; currentTheme: string;
onClose: () => void; onClose: () => void;
} }
@ -29,7 +28,7 @@ type Park = {
}; };
}; };
const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, currentTheme, setChanged, onClose }) => { const LocationScreen: React.FC<LocationScreenProps> = ({ visible, currentTheme, setChanged, onClose }) => {
const theme = useTheme(); const theme = useTheme();
const [zip, setZip] = useState(""); const [zip, setZip] = useState("");
const [distance, setDistance] = useState(25); const [distance, setDistance] = useState(25);
@ -37,6 +36,7 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
const [locLoading, setLocLoading] = useState(false); const [locLoading, setLocLoading] = useState(false);
const [parks, setParks] = useState<Park[]>([]); const [parks, setParks] = useState<Park[]>([]);
const [hasSearched, setHasSearched] = useState(false); const [hasSearched, setHasSearched] = useState(false);
const [selectedParkId, setSelectedParkId] = useState<string | null>(null);
// Call the parks endpoint with coordinates // Call the parks endpoint with coordinates
const fetchNearbyParks = async (longitude: number, latitude: number) => { const fetchNearbyParks = async (longitude: number, latitude: number) => {
@ -104,21 +104,64 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
}} }}
titleStyle={{ fontWeight: "bold" }} titleStyle={{ fontWeight: "bold" }}
descriptionNumberOfLines={2} descriptionNumberOfLines={2}
onPress={() => setSelectedParkId(item.Id)}
/> />
); );
// Find the selected park, if one is selected
const selectedPark = selectedParkId
? parks.find(p => p.Id === selectedParkId)
: null;
return ( return (
<Portal> <Portal>
<Dialog visible={visible} <Dialog
onDismiss={() => { visible={visible}
onClose(); onDismiss={onClose}
}} style={{ backgroundColor: theme.colors.background }}
style={{ backgroundColor: theme.colors.background }}> >
<Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title> <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
<Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}> <Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
<View style={{ alignItems: "center", width: "100%" }}> <View style={{ alignItems: "center", width: "100%" }}>
<Button mode="outlined" onPress={handleGetLocation} loading={locLoading} disabled={locLoading} {/* If a park is selected, show only that park info and change button */}
style={{ marginBottom: 12, width: BUTTON_WIDTH }}>Use My Location</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={() => setSelectedParkId(null)}
style={{ marginTop: 16, width: "100%" }}
>
Change Park
</Button>
</View>
) : (
// Otherwise show location lookup tools and park list
<>
<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> <Text style={{ marginBottom: 12, color: theme.colors.primary, fontWeight: "bold" }}>OR</Text>
<View style={{ <View style={{
flexDirection: "row", flexDirection: "row",
@ -126,8 +169,7 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
width: BUTTON_WIDTH, width: BUTTON_WIDTH,
justifyContent: "center", justifyContent: "center",
marginBottom: 4, marginBottom: 4,
}} }}>
>
<TextInput <TextInput
label="Enter Zip Code" label="Enter Zip Code"
mode="outlined" mode="outlined"
@ -180,15 +222,15 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
<Text style={{ <Text style={{
fontWeight: "bold", fontWeight: "bold",
fontSize: 18, fontSize: 18,
marginBottom: parks != null ? 8 : 2, marginBottom: parks.length > 0 ? 8 : 2,
color: theme.colors.primary color: theme.colors.primary
}}> }}>
Nearby Dogparks Nearby Dogparks
</Text> </Text>
{parks != null ? ( {parks.length > 0 ? (
<FlatList <FlatList
data={parks} data={parks}
keyExtractor={(_, idx) => String(idx)} keyExtractor={(item) => item.Id}
renderItem={renderItem} renderItem={renderItem}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={{ maxHeight: 170 }} style={{ maxHeight: 170 }}
@ -200,6 +242,8 @@ const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, curr
)} )}
</View> </View>
)} )}
</>
)}
</View> </View>
</Dialog.Content> </Dialog.Content>
</Dialog> </Dialog>