Made some good progress.

This commit is contained in:
Gabriel Brown 2024-09-10 00:59:55 -05:00
parent f65633c069
commit 5dfbc98035
7 changed files with 320 additions and 125 deletions

View File

@ -1,8 +1,33 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { StyleSheet } from 'react-native'; import { StyleSheet, ActivityIndicator } from 'react-native';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import axios from 'axios';
//const API_KEY = 'I_Love_Madeline';
const BASE_URL = 'http://192.168.0.39:3000/api';
//const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
// Separate API call function
const fetchCountdownDate = async () => {
try {
//const response = await axios.get(`${BASE_URL}/getCountdown`, {
//params: { apiKey: API_KEY }
//});
const response = await axios.get(`${BASE_URL}/getCountdown?apiKey=I_Love_Madeline`);
console.log('API response:', response.data);
if (response.data && response.data[0] && response.data[0].countdown) {
console.log('Countdown date:', response.data[0].countdown);
return new Date(response.data[0].countdown);
} else {
console.error('Unexpected API response format:', response.data);
return null;
}
} catch (error) {
console.error('API call error:', error);
return null;
}
};
export default function TabTwoScreen() { export default function TabTwoScreen() {
const [countdown, setCountdown] = useState({ const [countdown, setCountdown] = useState({
@ -11,13 +36,31 @@ export default function TabTwoScreen() {
minutes: 0, minutes: 0,
seconds: 0, seconds: 0,
}); });
const [targetDate, setTargetDate] = useState<Date | null>(null);
const targetDate = new Date('2024-09-20T10:10:00').getTime(); const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
const loadCountdownDate = async () => {
setIsLoading(true);
const date = await fetchCountdownDate();
if (date) {
setTargetDate(date);
} else {
// Fallback to a default date if API call fails
setTargetDate(new Date());
}
setIsLoading(false);
};
loadCountdownDate();
}, []);
useEffect(() => {
if (targetDate === null) return;
const interval = setInterval(() => { const interval = setInterval(() => {
const now = new Date().getTime(); const now = new Date();
const distance = targetDate - now; const distance = targetDate.getTime() - now.getTime();
const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
@ -35,6 +78,14 @@ export default function TabTwoScreen() {
return () => clearInterval(interval); return () => clearInterval(interval);
}, [targetDate]); }, [targetDate]);
if (isLoading) {
return (
<ThemedView style={styles.container}>
<ActivityIndicator size="large" color="#0000ff" />
</ThemedView>
);
}
return ( return (
<ThemedView style={styles.container}> <ThemedView style={styles.container}>
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText> <ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
@ -48,7 +99,7 @@ export default function TabTwoScreen() {
); );
} }
function CountdownItem({ value, label }) { function CountdownItem({ value, label }: { value: number; label: string }) {
return ( return (
<ThemedView style={styles.countdownItem}> <ThemedView style={styles.countdownItem}>
<ThemedText style={styles.countdownValue}>{value}</ThemedText> <ThemedText style={styles.countdownValue}>{value}</ThemedText>

View File

@ -2,19 +2,47 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native
import { useFonts } from 'expo-font'; import { useFonts } from 'expo-font';
import { Stack } from 'expo-router'; import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen'; import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import 'react-native-reanimated'; import 'react-native-reanimated';
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from '@/hooks/useColorScheme';
import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import UserSelection from '@/components/UserSelection';
import { TouchableOpacity, Text } from 'react-native';
type User = {
id: number;
name: string;
message: string;
};
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
export default function RootLayout() { export default function RootLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const [loaded] = useFonts({ const [loaded, error] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
}); });
const [user, setUser] = useState<User | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
async function prepare() {
try {
// Load the user
const storedUser = await AsyncStorage.getItem('@user');
if (storedUser) {
setUser(JSON.parse(storedUser));
}
} catch (e) {
console.error('Failed to load user', e);
} finally {
setIsLoading(false);
}
}
prepare();
}, []);
useEffect(() => { useEffect(() => {
if (loaded) { if (loaded) {
@ -22,14 +50,49 @@ export default function RootLayout() {
} }
}, [loaded]); }, [loaded]);
if (!loaded) { const handleUserSelected = async (selectedUser: User) => {
return null; setUser(selectedUser);
try {
await AsyncStorage.setItem('@user', JSON.stringify(selectedUser));
} catch (e) {
console.error('Failed to save user', e);
}
};
const handleSwitchUser = async () => {
try {
await AsyncStorage.removeItem('@user');
setUser(null);
} catch (e) {
console.error('Failed to remove user', e);
}
};
if (!loaded || isLoading) {
return null; // or a loading indicator
}
if (!user) {
return <UserSelection onUserSelected={handleUserSelected} />;
} }
return ( return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack> <Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen
name="(tabs)"
options={{
headerShown: true,
title: user.name,
headerRight: () => (
<TouchableOpacity onPress={handleSwitchUser} style={{ marginRight: 15 }}>
<Text style={{ color: colorScheme === 'dark' ? 'white' : 'black' }}>
Switch User
</Text>
</TouchableOpacity>
),
}}
/>
<Stack.Screen name="+not-found" /> <Stack.Screen name="+not-found" />
</Stack> </Stack>
</ThemeProvider> </ThemeProvider>

View File

@ -1,37 +0,0 @@
import { StyleSheet } from 'react-native';
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
withRepeat,
withSequence,
} from 'react-native-reanimated';
import { ThemedText } from '@/components/ThemedText';
export function HelloWave() {
const rotationAnimation = useSharedValue(0);
rotationAnimation.value = withRepeat(
withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
4 // Run the animation 4 times
);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ rotate: `${rotationAnimation.value}deg` }],
}));
return (
<Animated.View style={animatedStyle}>
<ThemedText style={styles.text}>👋</ThemedText>
</Animated.View>
);
}
const styles = StyleSheet.create({
text: {
fontSize: 28,
lineHeight: 32,
marginTop: -6,
},
});

View File

@ -1,76 +0,0 @@
import type { PropsWithChildren, ReactElement } from 'react';
import { StyleSheet, useColorScheme } from 'react-native';
import Animated, {
interpolate,
useAnimatedRef,
useAnimatedStyle,
useScrollViewOffset,
} from 'react-native-reanimated';
import { ThemedView } from '@/components/ThemedView';
const HEADER_HEIGHT = 250;
type Props = PropsWithChildren<{
headerImage: ReactElement;
headerBackgroundColor: { dark: string; light: string };
}>;
export default function ParallaxScrollView({
children,
headerImage,
headerBackgroundColor,
}: Props) {
const colorScheme = useColorScheme() ?? 'light';
const scrollRef = useAnimatedRef<Animated.ScrollView>();
const scrollOffset = useScrollViewOffset(scrollRef);
const headerAnimatedStyle = useAnimatedStyle(() => {
return {
transform: [
{
translateY: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
),
},
{
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
},
],
};
});
return (
<ThemedView style={styles.container}>
<Animated.ScrollView ref={scrollRef} scrollEventThrottle={16}>
<Animated.View
style={[
styles.header,
{ backgroundColor: headerBackgroundColor[colorScheme] },
headerAnimatedStyle,
]}>
{headerImage}
</Animated.View>
<ThemedView style={styles.content}>{children}</ThemedView>
</Animated.ScrollView>
</ThemedView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
header: {
height: 250,
overflow: 'hidden',
},
content: {
flex: 1,
padding: 32,
gap: 16,
overflow: 'hidden',
},
});

View File

@ -0,0 +1,116 @@
import React, { useState, useEffect } from 'react';
import { TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
import { ThemedView } from '@/components/ThemedView';
import { ThemedText } from '@/components/ThemedText';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';
interface User {
id: number;
name: string;
message: string;
}
interface UserSelectionProps {
onUserSelected: (user: User) => void;
}
const API_KEY = 'I_Love_Madeline';
//const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
const BASE_URL = 'http://192.168.0.39:3000/api';
const UserSelection: React.FC<UserSelectionProps> = ({ onUserSelected }) => {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
checkStoredUser();
}, []);
const checkStoredUser = async () => {
try {
const storedUser = await AsyncStorage.getItem('@user');
if (storedUser) {
onUserSelected(JSON.parse(storedUser));
} else {
fetchUsers();
}
} catch (e) {
console.error('Failed to load user', e);
fetchUsers();
}
};
const fetchUsers = async () => {
try {
const response = await axios.get(`${BASE_URL}/getUsers`, {
params: { apiKey: API_KEY }
});
setUsers(response.data);
} catch (e) {
console.error('Failed to fetch users', e);
} finally {
setLoading(false);
}
};
const selectUser = async (user: User) => {
try {
await AsyncStorage.setItem('@user', JSON.stringify(user));
onUserSelected(user);
} catch (e) {
console.error('Failed to save user', e);
}
};
if (loading) {
return (
<ThemedView style={styles.container}>
<ActivityIndicator size="large" color="#0000ff" />
</ThemedView>
);
}
return (
<ThemedView style={styles.container}>
<ThemedText style={styles.title}>Who are you?</ThemedText>
{users.map((user) => (
<TouchableOpacity
key={user.id}
style={styles.button}
onPress={() => selectUser(user)}
>
<ThemedText style={styles.buttonText}>{user.name}</ThemedText>
</TouchableOpacity>
))}
</ThemedView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
button: {
backgroundColor: '#007AFF',
padding: 15,
borderRadius: 5,
marginVertical: 10,
width: 200,
alignItems: 'center',
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
});
export default UserSelection;

76
package-lock.json generated
View File

@ -10,7 +10,9 @@
"dependencies": { "dependencies": {
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "^2.0.0", "@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"axios": "^1.7.7",
"expo": "~51.0.28", "expo": "~51.0.28",
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",
@ -6329,6 +6331,29 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/@react-native-community/datetimepicker": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.2.0.tgz",
"integrity": "sha512-qrUPhiBvKGuG9Y+vOqsc56RPFcHa1SU2qbAMT0hfGkoFIj3FodE0VuPVrEa8fgy7kcD5NQmkZIKgHOBLV0+hWg==",
"license": "MIT",
"dependencies": {
"invariant": "^2.2.4"
},
"peerDependencies": {
"expo": ">=50.0.0",
"react": "*",
"react-native": "*",
"react-native-windows": "*"
},
"peerDependenciesMeta": {
"expo": {
"optional": true
},
"react-native-windows": {
"optional": true
}
}
},
"node_modules/@react-native/assets-registry": { "node_modules/@react-native/assets-registry": {
"version": "0.74.87", "version": "0.74.87",
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.87.tgz", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.87.tgz",
@ -7737,6 +7762,31 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/axios": {
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axios/node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"license": "MIT",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/babel-core": { "node_modules/babel-core": {
"version": "7.0.0-bridge.0", "version": "7.0.0-bridge.0",
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@ -10583,6 +10633,26 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/fontfaceobserver": { "node_modules/fontfaceobserver": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz", "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@ -16563,6 +16633,12 @@
"react-is": "^16.13.1" "react-is": "^16.13.1"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/psl": { "node_modules/psl": {
"version": "1.9.0", "version": "1.9.0",
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",

View File

@ -17,7 +17,9 @@
"dependencies": { "dependencies": {
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-native-async-storage/async-storage": "^2.0.0", "@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"axios": "^1.7.7",
"expo": "~51.0.28", "expo": "~51.0.28",
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",