delete family popups and birthday

This commit is contained in:
ivic00
2025-02-06 22:47:18 +01:00
parent e96210986e
commit 6ada9470c3
8 changed files with 165 additions and 41 deletions

View File

@ -4,6 +4,7 @@ import {
ButtonSize,
Checkbox,
Colors,
DateTimePicker,
KeyboardAwareScrollView,
LoaderScreen,
Text,
@ -66,10 +67,25 @@ const SignUpPage = () => {
return "20%"; // non-tablet case, regardless of orientation
};
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;
};
const [birthday, setBirthday] = useState<Date>(getMinDate());
const router = useRouter();
const handleSignUp = async () => {
await signUp({ email, password, firstName, lastName });
await signUp({ email, password, firstName, lastName, birthday });
if (profileData?.userType === ProfileType.FAMILY_DEVICE) {
router.replace("/(auth)/calendar");
@ -110,7 +126,7 @@ const SignUpPage = () => {
<KeyboardAvoidingView style={{ width: "100%" }}>
<TextField
marginT-30
marginT-17
autoFocus
placeholder="First name"
value={firstName}
@ -160,6 +176,16 @@ const SignUpPage = () => {
}}
/>
<DateTimePicker
placeholder="Birthday"
value={birthday}
mode="date"
minimumDate={getMinDate()}
maximumDate={getMaxDate()}
onChange={(value) => setBirthday(value)}
style={styles.textfield}
/>
<View
centerV
style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
@ -241,7 +267,7 @@ const SignUpPage = () => {
{isTablet ? (
<View height={50} />
) : (
<View flexG style={{ minHeight: 50 }} />
<View flexG style={{ minHeight: 65 }} />
)}
<View>

View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Dialog, Button, Text, View } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { Dialog, Button, Text, View, TextField } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";
@ -8,6 +8,8 @@ interface ConfirmationDialogProps {
onDismiss: () => void;
onFirstYes: () => void;
onConfirm: () => void;
isDeleteFamily?: boolean;
householdName: string;
}
const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
@ -15,8 +17,21 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
onDismiss,
onFirstYes,
onConfirm,
isDeleteFamily,
householdName,
}) => {
const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
const [input, setInput] = useState<string>("");
const [isCorrect, setIsCorrect] = useState<boolean>(true);
useEffect(() => {
setInput("");
}, [onDismiss, onConfirm])
useEffect(() => {
setIsCorrect(input === householdName);
}, [input])
return (
<>
@ -31,6 +46,20 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
<Text center style={styles.title}>
Are you sure?
</Text>
{isDeleteFamily ? (
<Text
style={{
fontSize: 18,
fontFamily: "PlusJakartaSans_700Bold",
color: "#979797",
marginBottom: 20,
}}
center
>
This action will permanently delete all your family profiles and
data, you won't be able to recover it!
</Text>
) : (
<Text
style={{
fontSize: 18,
@ -43,6 +72,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
This action will permanently delete all your data, you won't be able
to recover it!
</Text>
)}
<View centerV></View>
<View row right gap-8>
<Button
@ -69,10 +99,30 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
containerStyle={styles.dialog}
>
<View center paddingH-10 paddingT-15 paddingB-5>
{isDeleteFamily ? (
<View>
<Text style={styles.title}>Deleting family</Text>
<Text style={styles.text}>
Deleting the family will remove all profiles and data. This
cannot be undone.
</Text>
<Text style={styles.subText}>
Type the name of your household to confirm.
</Text>
<TextField
value={input}
onChangeText={(value) => {
setInput(value);
}}
style={[styles.txtBox, { marginTop: 5 }]}
/>
</View>
) : (
<Text style={styles.title}>
We're sorry to see you go, are you really sure you want to delete
everything?
</Text>
)}
<View row right gap-8 marginT-15>
<Button
label="Cancel"
@ -85,11 +135,14 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
/>
<Button
label="Yes"
disabled={!isDeleteFamily ? false : !isCorrect}
onPress={() => {
if(input === householdName)
onConfirm();
setConfirmationDialog(false);
}}
style={styles.confirmBtn}
style={!isDeleteFamily ? styles.confirmBtn : (isCorrect ? styles.confirmBtn : styles.confirmDisabled)}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
/>
</View>
@ -106,6 +159,9 @@ const styles = StyleSheet.create({
cancelBtn: {
backgroundColor: "white",
},
confirmDisabled: {
backgroundColor: "#999999"
},
dialog: {
backgroundColor: "white",
paddingHorizontal: 25,
@ -123,6 +179,23 @@ const styles = StyleSheet.create({
fontSize: 16,
marginBottom: 0,
},
subText: {
fontFamily: "PlusJakartaSans_400Regular",
fontSize: 12,
marginBottom: 0,
color: "#999999",
marginTop: 15,
},
txtBox: {
backgroundColor: "#fafafa",
borderRadius: 10,
borderWidth: 2,
borderColor: "#cecece",
padding: 15,
height: 45,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
},
});
export default DeleteProfileDialogs;

View File

@ -549,7 +549,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
returnKeyType="next"
/>
<Text style={styles.jakarta12}>Birthday</Text>
<DateTimePicker
{/*<DateTimePicker
editable={!isLoading}
mode="date"
minimumDate={getMinDate()}
@ -565,7 +565,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
}
}
}}
/>
/>*/}
</>
)}

View File

@ -66,10 +66,13 @@ const MyProfile = () => {
const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
const [isDeleteFamily, setIsDeleteFamily] = useState<boolean>(false);
const handleHideDeleteDialog = () => {
setShowDeleteDialog(false);
};
const handleShowDeleteDialog = () => {
const handleShowDeleteDialog = (isFamily: boolean) => {
setIsDeleteFamily(isFamily);
setShowDeleteDialog(true);
};
@ -102,10 +105,6 @@ const MyProfile = () => {
debouncedUserDataUpdate();
}, [timeZone, lastName, firstName]);
useEffect(() => {
handleUpdateHouseholdName();
}, [householdName]);
useEffect(() => {
if (familyMembers) {
const colors = familyMembers
@ -261,6 +260,7 @@ const MyProfile = () => {
onChangeText={async (value) => {
setHouseholdName(value);
}}
onEndEditing={() => handleUpdateHouseholdName()}
/>
</>
)}
@ -531,7 +531,7 @@ const MyProfile = () => {
</View>
</View>
<TouchableOpacity
onPress={handleShowDeleteDialog}
onPress={() => handleShowDeleteDialog(false)}
style={{ marginTop: 10, alignSelf: "center" }}
>
<Text
@ -544,13 +544,39 @@ const MyProfile = () => {
Delete Profile
</Text>
</TouchableOpacity>
{profileData?.userType === ProfileType.PARENT && (
<TouchableOpacity
onPress={() => handleShowDeleteDialog(true)}
style={{ marginTop: 20, alignSelf: "center" }}
>
<Text
style={{
color: "#ff1637",
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
>
Delete Family
</Text>
</TouchableOpacity>
)}
<DeleteProfileDialogs
onFirstYes={() => {
setShowDeleteDialog(false);
}}
visible={showDeleteDialog}
onDismiss={handleHideDeleteDialog}
onConfirm={() => deleteAsync({})}
onConfirm={() => {
if(isDeleteFamily)
console.log('put delete family func here');
else
{
//deletes profile
deleteAsync({});
}
}}
isDeleteFamily={isDeleteFamily}
householdName={householdName}
/>
</ScrollView>
);

View File

@ -60,7 +60,6 @@ const styles = StyleSheet.create({
overflow: 'hidden',
},
initialsCircle: {
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100, // Circular shape

View File

@ -16,11 +16,13 @@ export const useSignUp = () => {
password,
firstName,
lastName,
birthday
}: {
email: string;
password: string;
firstName: string;
lastName: string;
birthday: Date;
}) => {
setRedirectOverride(true)
@ -35,6 +37,7 @@ export const useSignUp = () => {
lastName: lastName,
familyId: uuidv4(),
timeZone: Localization.getCalendars()[0].timeZone,
birthday: birthday
},
customUser: res.user,
});

View File

@ -13,7 +13,6 @@ export const useUpdateHouseholdName = () => {
familyId: string;
name: string;
}) => {
console.log("Mutation function called with data:", { familyId, name });
try {
// Reference to the Households collection
@ -25,11 +24,9 @@ export const useUpdateHouseholdName = () => {
if (!snapshot.empty) {
// If a household with the familyId exists, update the name
const docId = snapshot.docs[0].id;
console.log(`Household found with ID ${docId}, updating name...`);
await householdRef.doc(docId).update({ name });
console.log("Household name updated successfully.");
} else {
// If no household exists, create a new one with familyId and name
console.log("No household found, creating a new one...");