fuse_expo/components/ChangeDateDrawer.tsx

176 lines
4.7 KiB
TypeScript

import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, Modal, Platform, View } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import DateTimePicker from '@react-native-community/datetimepicker';
import { LinearGradient } from 'expo-linear-gradient';
import axios from 'axios';
const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
interface ChangeDateDrawerProps {
isVisible: boolean;
onClose: () => void;
onDateChange: (date: Date) => void;
currentDate: Date;
}
export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) {
const [date, setDate] = useState(currentDate);
const handleDateChange = (event: any, selectedDate?: Date) => {
const currentDate = selectedDate || date;
setDate(currentDate);
};
const handleTimeChange = (event: any, selectedTime?: Date) => {
const currentTime = selectedTime || date;
setDate(currentTime);
};
const handleSave = async () => {
try {
await axios.post(`${BASE_URL}/setCountdown`, null, {
params: { apiKey: API_KEY, countdown: date.toISOString() }
});
onDateChange(date);
onClose();
} catch (error) {
console.error('Failed to update countdown date:', error);
// You might want to show an error message to the user here
}
};
return (
<Modal
animationType="slide"
transparent={true}
visible={isVisible}
onRequestClose={onClose}
>
<ThemedView style={styles.centeredView}>
<ThemedView style={styles.modalView}>
<LinearGradient
colors={['#F67C0A', '#F60AD3']}
style={styles.modalView}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<ThemedText style={styles.modalText}>Set New Countdown Date & Time</ThemedText>
<ThemedView style={styles.buttonContainer}>
<ThemedView style={styles.dateContainer}>
<DateTimePicker
testID="datePicker"
value={date}
mode="date"
is24Hour={true}
display="default"
onChange={handleDateChange}
/>
</ThemedView>
<ThemedView style={styles.timeContainer}>
<DateTimePicker
testID="timePicker"
value={date}
mode="time"
is24Hour={true}
display="default"
onChange={handleTimeChange}
/>
</ThemedView>
</ThemedView>
<ThemedView style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={handleSave}>
<ThemedText style={styles.buttonText}>Save</ThemedText>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
<ThemedText style={styles.buttonText}>Cancel</ThemedText>
</TouchableOpacity>
</ThemedView>
</LinearGradient>
</ThemedView>
</ThemedView>
</Modal>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0)',
},
modalView: {
margin: 10,
backgroundColor: 'transparent',
padding: 35,
borderRadius: 40,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
margin: 'auto',
marginBottom: 20,
backgroundColor: 'transparent',
},
dateContainer: {
width: '50%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
marginRight: 10,
minWidth: 120,
},
timeContainer: {
width: '50%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
minWidth: 120,
},
button: {
backgroundColor: '#730FF8',
borderRadius: 12,
padding: 12,
elevation: 2,
marginVertical: 10,
minWidth: 120,
marginHorizontal: 10,
},
cancelButton: {
backgroundColor: '#FF3B30',
},
buttonText: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
textAlign: 'center',
},
modalText: {
marginBottom: 20,
textAlign: 'center',
fontWeight: 'bold',
fontSize: 24,
lineHeight: 32,
},
dateText: {
marginVertical: 10,
fontSize: 16,
},
});