174 lines
4.1 KiB
TypeScript
174 lines
4.1 KiB
TypeScript
import DateTimePicker, {
|
|
DateTimePickerEvent,
|
|
} from "@react-native-community/datetimepicker";
|
|
import { useBirthdays } from "@/context/birthdays-context";
|
|
import { useRouter } from "expo-router";
|
|
import React, { useState } from "react";
|
|
import {
|
|
Alert,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
export default function SimpleForm() {
|
|
const router = useRouter();
|
|
const { addBirthday } = useBirthdays();
|
|
const [name, setName] = useState("");
|
|
const [date, setDate] = useState(new Date());
|
|
const [showPicker, setShowPicker] = useState(false);
|
|
|
|
const onChangeDate = (
|
|
event: DateTimePickerEvent,
|
|
selectedDate?: Date
|
|
) => {
|
|
setShowPicker(Platform.OS === "ios");
|
|
if (selectedDate) {
|
|
setDate(selectedDate);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!name.trim()) {
|
|
Alert.alert("Missing name", "Enter a name before saving.");
|
|
return;
|
|
}
|
|
|
|
addBirthday({
|
|
name,
|
|
date: formatBirthdayDate(date),
|
|
});
|
|
setName("");
|
|
setDate(new Date());
|
|
router.back();
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safeArea} edges={["top", "bottom"]}>
|
|
<KeyboardAvoidingView
|
|
style={styles.keyboardContainer}
|
|
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>Add Birthday</Text>
|
|
<ScrollView
|
|
contentContainerStyle={styles.scrollContent}
|
|
keyboardShouldPersistTaps="handled"
|
|
>
|
|
<View style={styles.formCard}>
|
|
<Text style={styles.label}>Name:</Text>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Enter name of the person"
|
|
value={name}
|
|
onChangeText={setName}
|
|
/>
|
|
|
|
<Text style={styles.label}>Date:</Text>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setShowPicker(true);
|
|
}}
|
|
style={[{ backgroundColor: "#00adaa" }, styles.button]}
|
|
>
|
|
<Text style={styles.buttonText}>Select Date</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Text style={styles.dateText}>
|
|
{"Selected date: " + date.toDateString()}
|
|
</Text>
|
|
|
|
{showPicker && (
|
|
<DateTimePicker
|
|
value={date}
|
|
mode="date"
|
|
display="default"
|
|
onChange={onChangeDate}
|
|
/>
|
|
)}
|
|
|
|
<TouchableOpacity
|
|
onPress={handleSubmit}
|
|
style={[{ backgroundColor: "#00984c" }, styles.button]}
|
|
>
|
|
<Text style={styles.buttonText}>Save</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeArea: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
justifyContent: "center",
|
|
marginBottom: 0,
|
|
},
|
|
keyboardContainer: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
},
|
|
title: {
|
|
fontSize: 24,
|
|
fontWeight: "bold",
|
|
paddingHorizontal: 5,
|
|
paddingBottom: 10,
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 20,
|
|
},
|
|
formCard: {
|
|
gap: 12,
|
|
},
|
|
label: {
|
|
paddingTop: 20,
|
|
fontSize: 16,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: "#ccc",
|
|
padding: 10,
|
|
borderRadius: 5,
|
|
},
|
|
dateText: {
|
|
fontSize: 16,
|
|
marginBottom: 8,
|
|
},
|
|
button: {
|
|
borderRadius: 10,
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 12,
|
|
elevation: 8
|
|
},
|
|
buttonText: {
|
|
fontSize: 18,
|
|
color: "#fff",
|
|
fontWeight: "bold",
|
|
alignSelf: "center"
|
|
}
|
|
});
|
|
|
|
function formatBirthdayDate(date: Date) {
|
|
const year = date.getFullYear();
|
|
const month = `${date.getMonth() + 1}`.padStart(2, "0");
|
|
const day = `${date.getDate()}`.padStart(2, "0");
|
|
|
|
return `${year}-${month}-${day}`;
|
|
}
|