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

Refactored Navs, renamed files, added About

Browse Source
This commit is contained in:
whysman 2025-03-22 13:46:28 -04:00
parent e4ee0ba827
commit 84a975e89a
8 changed files with 103 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/index.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import {View, Text } from "react-native";
import { useTheme } from "react-native-paper";
import ProfileScreen from "@/components/ProfileScreen";
import StatusPage from "@/components/StatusPage";
import Nav from "@/components/Nav";
import { Helmet } from 'react-helmet-async'
import Profile from "@/components/Profile";
import Status from "@/components/Status";
import TopNav from "@/components/TopNav";
import BottomNav from "@/components/BottomNav"
import { useUser } from "@/context/UserContext";
import styles from "@/assets/styles";
@ -39,10 +40,10 @@ const Index = () => {
return (
<View style={[styles.indexContainer, { backgroundColor: theme.colors.background }]}>
<Nav
<TopNav
toggleProfile={() => setProfileActive(true)}
/>
<StatusPage
<Status
id={userId}
name={userName}
image={userImage}
@ -51,7 +52,7 @@ const Index = () => {
currentTheme={currentTheme}
isProfileActive={isProfileActive}
/>
<ProfileScreen
<Profile
visible={isProfileActive}
id={userId}
name={userName}
@ -63,7 +64,7 @@ const Index = () => {
setChanged={setUserDataChanged}
onClose={() => setProfileActive(false)}
/>
<BottomNav />
<BottomNav toggleLocation={() => setProfileActive(true)}/>
</View>
);
};

4
assets/styles.ts
View File

@ -74,7 +74,9 @@ const styles = StyleSheet.create({
},
//Nav
logoContainer: { flex: 1, alignItems: "center" },
logo: { width: 150, height: 75 },
logo: { width: 140, height: 70 },
topBar: { },
bottomBar: { height: 38 },
//index
indexImageBackground: {
position: "absolute", // Allows child elements to layer on top

47
components/About.tsx Normal file
View File

@ -0,0 +1,47 @@
import * as React from 'react';
import { ScrollView } from 'react-native';
import { Card, Title, Paragraph, Text, Dialog} from 'react-native-paper';
const About = () => {
return (
<Dialog.Content style={{ maxHeight: 300 }}>
<ScrollView style={{ padding: 16 }}>
<Card style={{ marginBottom: 16 }}>
<Card.Content>
<Paragraph style={{ fontSize: 20 }}>
<Text style={{ fontWeight: 'bold' }}>Pogdark</Text> is a dog park communication application that
allows users to inform others when they are on the way or have arrived at a dog park of their choice.
</Paragraph>
</Card.Content>
</Card>
<Card style={{ marginBottom: 16 }}>
<Card.Content>
<Title style={{ fontSize: 20, marginBottom: 8 }}>How It Works</Title>
<Paragraph style={{ fontSize: 16 }}>
1. Users select a simple status:{"\n"}
{" "}• "On My Way"{"\n"}
{" "}• "Arrived"{"\n\n"}
2. The status is instantly sent via a WebSocket broker to other users who are listening.{"\n\n"}
3. Users can click again to cancel their current status, or status messages will automatically expire, ensuring no long-term data retention.
</Paragraph>
</Card.Content>
</Card>
<Card>
<Card.Content>
<Title style={{ fontSize: 20, marginBottom: 8 }}>Key Features</Title>
<Paragraph style={{ fontSize: 16 }}>
• <Text style={{ fontWeight: 'bold' }}>No Tracking, No Storage</Text> – The system doesn’t store user data or track locations. {"\n\n"}
• <Text style={{ fontWeight: 'bold' }}>Instant Updates</Text> – Real-time messaging ensures quick communication. {"\n\n"}
• <Text style={{ fontWeight: 'bold' }}>No Links or Logins</Text> – Users don’t need to generate links or sign up. Profiles are stored locally, and created on initial use.{"\n\n"}
• <Text style={{ fontWeight: 'bold' }}>Ephemeral by Design</Text> – Messages exist only for a 30 (On My Way) or 90 (Arrived) minute lifespan.
</Paragraph>
</Card.Content>
</Card>
</ScrollView>
</Dialog.Content>
);
};
export default About;

12
components/BottomNav.tsx
View File

@ -3,18 +3,18 @@ import {View} from "react-native";
import styles from "@/assets/styles";
import React from "react";
const BottomNav = () => {
const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
const theme = useTheme();
return (
<View style={{ backgroundColor: theme.colors.background }}>
<Appbar.Header style={{ backgroundColor: theme.colors.primaryContainer, height: 38 }}>
<Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
<View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
<Text style={{ color: theme.colors.primary, fontFamily: "Light" }}>Daisy Knight Dog Park</Text>
<Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
<Button
mode="text"
onPress={() => null}
style={{ backgroundColor: theme.colors.primary, height: 38/2, justifyContent: "center"}}
labelStyle={{ color: theme.colors.onPrimary, fontFamily: "Light"}}>
onPress={() => toggleLocation }
style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
Change
</Button>
</View>

27
components/Location.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Button, TextInput, Dialog, Portal, Avatar, useTheme, Text } from "react-native-paper";
import React, {useEffect} from "react";
import themes from '@/assets/themes';
interface LocationProps {
visible: boolean;
}
const Location: React.FC<LocationProps> = ({ visible }) => {
const theme = useTheme();
useEffect(() => {
if (visible) {
}
}, [visible]);
return (
<Portal>
<Dialog visible={visible} >
<Dialog.Title style={{ color: theme.colors.onBackground, textAlign: 'center', fontFamily: "Light"}}>Choose Your Location</Dialog.Title>
</Dialog>
</Portal>
)
}
export default Location;

4
components/ProfileScreen.tsx → components/Profile.tsx
View File

@ -22,7 +22,7 @@ interface ProfileScreenProps {
onClose: () => void;
}
const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, currentTheme, setTheme, onClose }) => {
const Profile: React.FC<ProfileScreenProps> = ({ visible, name, setName, image, setImage, setChanged, currentTheme, setTheme, onClose }) => {
const theme = useTheme();
const isNameEmpty = !name.trim();
const themeColors = ['red', 'blue', 'yellow', 'green', 'orange', 'purple'];
@ -167,4 +167,4 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ visible, name, setName, i
);
};
export default ProfileScreen;
export default Profile;

8
components/StatusPage.tsx → components/Status.tsx
View File

@ -29,7 +29,7 @@ interface StatusProps {
isProfileActive: boolean;
}
const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive }) => {
const Status: React.FC<StatusProps> = ({ id, name, image, currentStatus, setStatus, currentTheme, isProfileActive }) => {
log.debug("WebSocket URL: ", WS_URL);
log.debug("API URL: ", API_URL);
const theme = useTheme();
@ -221,7 +221,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
styles.actionButton,
{ backgroundColor: currentStatus === "On the Way" ? pulseColorOnTheWay : theme.colors.primaryContainer }
]}
labelStyle={{ color: theme.colors.primary, fontFamily: "Heavy",}}>
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
{getButtonLabel("On the Way")}
</Button>
</Animated.View>
@ -233,7 +233,7 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
styles.actionButton,
{ backgroundColor: currentStatus === "Arrived" ? pulseColorArrived : theme.colors.primaryContainer }
]}
labelStyle={{ color: theme.colors.primary, fontFamily: "Heavy", }}>
labelStyle={{ color: theme.colors.primary, fontFamily: "Medium", fontSize: 16 }}>
{getButtonLabel("Arrived")}
</Button>
</Animated.View>
@ -242,4 +242,4 @@ const StatusPage: React.FC<StatusProps> = ({ id, name, image, currentStatus, set
);
};
export default StatusPage;
export default Status;

15
components/Nav.tsx → components/TopNav.tsx
View File

@ -1,9 +1,10 @@
import {Appbar, Portal, Button, Dialog, Menu, Text, useTheme} from "react-native-paper";
import {Image, useColorScheme, View} from "react-native";
import {Animated, Image, useColorScheme, View} from "react-native";
import React, {useState} from "react";
import styles from "@/assets/styles";
import About from "@/components/About";
const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
const theme = useTheme();
const colorScheme = useColorScheme();
const [aboutVisible, setAboutVisible] = useState(false);
@ -12,7 +13,7 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
return (
<View style={{ backgroundColor: theme.colors.background }}>
<Appbar.Header style={{ backgroundColor: theme.colors.primaryContainer }}>
<Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
<View>
<Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}>
<Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/>
@ -35,11 +36,7 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
<Portal>
<Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
<Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>About Us</Dialog.Title>
<Dialog.Content>
<Text style={{ color: theme.colors.primary, textAlign: 'justify' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec laoreet luctus, felis sapien facilisis augue, at tristique enim turpis nec turpis. Donec convallis justo vel mi consectetur, at pulvinar justo dictum. Mauris vulputate dapibus neque, sed sagittis libero dapibus eu. Integer nec mi at quam cursus suscipit sed et tortor.
</Text>
</Dialog.Content>
<About />
<Dialog.Actions style={{ justifyContent: "center" }}>
<Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
Close
@ -51,4 +48,4 @@ const Nav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
);
};
export default Nav;
export default TopNav;