144 lines
4.0 KiB
TypeScript
144 lines
4.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { StyleSheet, ActivityIndicator } from 'react-native';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
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() {
|
|
const [countdown, setCountdown] = useState({
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0,
|
|
});
|
|
const [targetDate, setTargetDate] = useState<Date | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
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 now = new Date();
|
|
const distance = targetDate.getTime() - now.getTime();
|
|
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
setCountdown({ days, hours, minutes, seconds });
|
|
|
|
if (distance < 0) {
|
|
clearInterval(interval);
|
|
setCountdown({ days: 0, hours: 0, minutes: 0, seconds: 0 });
|
|
}
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [targetDate]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<ActivityIndicator size="large" color="#0000ff" />
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<ThemedText style={styles.title}>Countdown to Next Visit</ThemedText>
|
|
<ThemedView style={styles.countdownContainer}>
|
|
<CountdownItem value={countdown.days} label="Days" />
|
|
<CountdownItem value={countdown.hours} label="Hours" />
|
|
<CountdownItem value={countdown.minutes} label="Minutes" />
|
|
<CountdownItem value={countdown.seconds} label="Seconds" />
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
function CountdownItem({ value, label }: { value: number; label: string }) {
|
|
return (
|
|
<ThemedView style={styles.countdownItem}>
|
|
<ThemedText style={styles.countdownValue}>{value}</ThemedText>
|
|
<ThemedText style={styles.countdownLabel}>{label}</ThemedText>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 56,
|
|
lineHeight: 64,
|
|
fontWeight: 'bold',
|
|
marginBottom: 20,
|
|
textAlign: 'center',
|
|
paddingHorizontal: 20,
|
|
},
|
|
countdownContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
countdownItem: {
|
|
margin: 10,
|
|
lineHeight: 32,
|
|
alignItems: 'center',
|
|
},
|
|
countdownValue: {
|
|
fontSize: 32,
|
|
lineHeight: 32,
|
|
fontWeight: 'bold',
|
|
},
|
|
countdownLabel: {
|
|
fontSize: 24,
|
|
},
|
|
});
|