Files
cally/app/(unauth)/birthday_page.tsx
2025-02-12 00:05:39 +01:00

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",
},
});