mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
118 lines
3.1 KiB
TypeScript
118 lines
3.1 KiB
TypeScript
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { Button, Text, View, DateTimePicker } from "react-native-ui-lib";
|
|
import React, { useState } from "react";
|
|
import { useRouter } from "expo-router";
|
|
import { Platform, StyleSheet } from "react-native";
|
|
import { useAuthContext } from "@/contexts/AuthContext";
|
|
import firestore from "@react-native-firebase/firestore";
|
|
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
|
|
|
|
export default function BirthdayScreen() {
|
|
const router = useRouter();
|
|
const { user } = useAuthContext();
|
|
const [date, setDate] = useState(new Date());
|
|
const { mutateAsync: updateUserData } = useUpdateUserData();
|
|
|
|
const onDateChange = (event: any, selectedDate?: Date) => {
|
|
const currentDate = selectedDate || date;
|
|
setDate(currentDate);
|
|
};
|
|
|
|
const handleContinue = async () => {
|
|
try {
|
|
updateUserData({
|
|
newUserData: {
|
|
birthday: date,
|
|
},
|
|
}).then(() => router.push("/(unauth)/cal_sync"));
|
|
} catch (error) {
|
|
console.error("Error saving birthday:", error);
|
|
}
|
|
};
|
|
|
|
const getMaxDate = () => {
|
|
const date = new Date();
|
|
date.setFullYear(date.getFullYear() - 3); // Minimum age: 3 years
|
|
return date;
|
|
};
|
|
|
|
const getMinDate = () => {
|
|
const date = new Date();
|
|
date.setFullYear(date.getFullYear() - 18); // Maximum age: 18 years
|
|
return date;
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }}>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
padding: 21,
|
|
paddingBottom: 45,
|
|
paddingTop: "20%",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<View gap-13 width={"100%"} marginB-20>
|
|
<Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
|
|
When's your birthday?
|
|
</Text>
|
|
<Text color={"#919191"} style={{ fontSize: 20 }}>
|
|
We'll use this to celebrate your special day!
|
|
</Text>
|
|
</View>
|
|
|
|
<View width={"100%"} flexG>
|
|
<DateTimePicker
|
|
value={date}
|
|
mode="date"
|
|
minimumDate={getMinDate()}
|
|
maximumDate={getMaxDate()}
|
|
onChange={(date) => {
|
|
if (date) {
|
|
const validDate = new Date(date);
|
|
if (!isNaN(validDate.getTime())) {
|
|
setDate(validDate);
|
|
}
|
|
}
|
|
}}
|
|
style={styles.textfield}
|
|
textAlign="center"
|
|
/>
|
|
</View>
|
|
|
|
<View flexG />
|
|
|
|
<View width={"100%"}>
|
|
<Button
|
|
label="Continue"
|
|
onPress={handleContinue}
|
|
style={{
|
|
height: 50,
|
|
}}
|
|
backgroundColor="#fd1775"
|
|
labelStyle={{
|
|
fontFamily: "PlusJakartaSans_600SemiBold",
|
|
fontSize: 16,
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
textfield: {
|
|
backgroundColor: "white",
|
|
marginVertical: 100,
|
|
padding: 30,
|
|
height: 44,
|
|
borderRadius: 50,
|
|
fontFamily: "PlusJakartaSans_300Light",
|
|
fontSize: 15,
|
|
color: "#919191",
|
|
alignContent: "center",
|
|
},
|
|
});
|