import React, { useState, useEffect } from 'react'; import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import { LinearGradient } from 'expo-linear-gradient'; import axios from 'axios'; import ChangeDateDrawer from '@/components/ChangeDateDrawer'; const API_KEY = process.env.EXPO_PUBLIC_API_KEY; const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; // Separate API call function const fetchCountdownDate = async () => { try { const response = await axios.get(`${BASE_URL}/getCountdown`, { params: { apiKey: API_KEY } }); 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(null); const [isLoading, setIsLoading] = useState(true); const [isDateDrawerVisible, setIsDateDrawerVisible] = useState(false); useEffect(() => { const loadCountdownDate = async () => { setIsLoading(true); const date = await fetchCountdownDate(); if (date) { setTargetDate(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]); const handleDateChange = (newDate: Date) => { setTargetDate(newDate); }; if (isLoading) { return ( ); } let days = countdown.days === 1 ? 'Day' : 'Days'; let hours = countdown.hours === 1 ? 'Hour' : 'Hours'; let minutes = countdown.minutes === 1 ? 'Minute' : 'Minutes'; let seconds = countdown.seconds === 1 ? 'Second' : 'Seconds'; return ( Countdown to Next Visit setIsDateDrawerVisible(true)} > Change Date {targetDate && ( setIsDateDrawerVisible(false)} onDateChange={handleDateChange} currentDate={targetDate} /> )} ); } function CountdownItem({ value, label }: { value: number; label: string }) { return ( {value} {label} ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: 'transparent', }, title: { fontSize: 64, lineHeight: 64, fontWeight: 'bold', marginTop: 100, marginBottom: 60, textAlign: 'center', paddingHorizontal: 20, }, countdownContainer: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', marginBottom: 180, }, countdownItem: { margin: 10, lineHeight: 42, alignItems: 'center', backgroundColor: 'transparent', }, countdownValue: { fontSize: 36, lineHeight: 42, fontWeight: 'bold', }, countdownLabel: { fontSize: 32, lineHeight: 42, }, changeButton: { backgroundColor: '#730FF8', padding: 15, borderRadius: 10, marginTop: 40, }, changeButtonText: { color: 'white', fontSize: 22, fontWeight: 'bold', }, });