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

Move location out of dialogs

Browse Source
This commit is contained in:
whysman 2025-04-27 10:09:04 -04:00
parent f2df245878
commit 7c7f9de208
3 changed files with 112 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/index.tsx
View File

@ -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";
@ -63,11 +64,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 +93,13 @@ const Index = () => {
setChanged={setUserDataChanged}
onClose={() => setProfileActive(false)}
/>
<LocationScreen
visible={isLocationActive}
setTheme={setTheme}
currentTheme={currentTheme}
setChanged={setUserDataChanged}
onClose={() => setLocationActive(false)}
/>
</View>
);
};

18
components/Dialogs.tsx
View File

@ -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>
)
}

195
components/Location.tsx
View File

@ -1,11 +1,19 @@
import React, { useState } from "react";
import { Dialog, TextInput, useTheme, Button, Text, List } from "react-native-paper";
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";
interface LocationScreenProps {
visible: boolean;
setChanged: (dataChanged: boolean) => void;
setTheme: (theme: string) => void;
currentTheme: string;
onClose: () => void;
}
export const API_URL = process.env.EXPO_PUBLIC_API_URL;
const BUTTON_WIDTH = 260;
@ -20,7 +28,7 @@ type Park = {
};
};
const LocationComponent = () => {
const LocationScreen: React.FC<LocationScreenProps> = ({ visible, setTheme, currentTheme, setChanged, onClose }) => {
const theme = useTheme();
const [zip, setZip] = useState("");
const [distance, setDistance] = useState(25);
@ -99,102 +107,103 @@ const LocationComponent = () => {
);
return (
<Dialog.Content style={{ maxHeight: 500, justifyContent: "center", alignItems: "center" }}>
<View style={{ alignItems: "center", width: "100%" }}>
<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>
<View
style={{
flexDirection: "row",
alignItems: "center",
width: BUTTON_WIDTH,
justifyContent: "center",
marginBottom: 4,
<Portal>
<Dialog visible={visible}
onDismiss={() => {
onClose();
}}
>
<TextInput
label="Enter Zip Code"
mode="outlined"
value={zip}
onChangeText={setZip}
style={{
flex: 3,
marginRight: 6,
fontFamily: "SpaceReg",
minWidth: 0,
}}
placeholderTextColor={theme.colors.primary}
textColor={theme.colors.primary}
theme={{ colors: { text: theme.colors.primary } }}
/>
<Button
mode="contained"
onPress={handleSubmit}
loading={loading}
disabled={!zip || loading}
style={{
flex: 2,
minWidth: 0,
height: 50,
}}
contentStyle={{ height: 50 }}
>
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 != 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 }}
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%" }}>
<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>
<View style={{
flexDirection: "row",
alignItems: "center",
width: BUTTON_WIDTH,
justifyContent: "center",
marginBottom: 4,
}}
>
<TextInput
label="Enter Zip Code"
mode="outlined"
value={zip}
onChangeText={setZip}
style={{
flex: 3,
marginRight: 6,
fontFamily: "SpaceReg",
minWidth: 0,
}}
placeholderTextColor={theme.colors.primary}
textColor={theme.colors.primary}
theme={{ colors: { text: theme.colors.primary } }}
/>
) : (
<Text style={{ color: theme.colors.onSurface, textAlign: "center", marginTop: 12 }}>
No parks found in range.
<Button
mode="contained"
onPress={handleSubmit}
loading={loading}
disabled={!zip || loading}
style={{
flex: 2,
minWidth: 0,
height: 50,
}}
contentStyle={{ height: 50 }}
>
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 != 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>
)}
</View>
</Dialog.Content>
</Dialog.Content>
</Dialog>
</Portal>
);
};
export default LocationComponent;
export default LocationScreen;