mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 01:56:16 +00:00
513 lines
17 KiB
TypeScript
513 lines
17 KiB
TypeScript
import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
import { StyleSheet, TouchableOpacity } from "react-native";
|
|
import { ScrollView } from "react-native-gesture-handler";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
import {
|
|
Button,
|
|
Colors,
|
|
Image,
|
|
Picker,
|
|
Text,
|
|
TextField,
|
|
View,
|
|
} from "react-native-ui-lib";
|
|
import Ionicons from "@expo/vector-icons/Ionicons";
|
|
import * as tz from "tzdata";
|
|
import * as Localization from "expo-localization";
|
|
import debounce from "debounce";
|
|
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
|
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
|
|
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
|
|
import { colorMap } from "@/constants/colorMap";
|
|
import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
|
|
import { AntDesign } from "@expo/vector-icons";
|
|
import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
|
|
import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
|
|
import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
|
|
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
|
|
|
const MyProfile = () => {
|
|
const { user, profileData } = useAuthContext();
|
|
const { data: familyMembers } = useGetFamilyMembers();
|
|
const [takenColors, setTakenColors] = useState<string[]>([]);
|
|
|
|
const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
|
|
profileData.familyId
|
|
);
|
|
const [householdName, setHouseholdName] = useState<string>("");
|
|
const [timeZone, setTimeZone] = useState<string>(
|
|
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
|
|
);
|
|
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
|
|
const [firstName, setFirstName] = useState<string>(
|
|
profileData?.firstName || ""
|
|
);
|
|
const [profileImage, setProfileImage] = useState<
|
|
string | ImagePicker.ImagePickerAsset | null
|
|
>(profileData?.pfp || null);
|
|
|
|
const [selectedColor, setSelectedColor] = useState<string>(
|
|
profileData?.eventColor ?? colorMap.pink
|
|
);
|
|
const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
|
|
profileData?.eventColor ?? colorMap.pink
|
|
);
|
|
|
|
const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
|
|
|
|
const handleHideDeleteDialog = () => {
|
|
setShowDeleteDialog(false);
|
|
};
|
|
const handleShowDeleteDialog = () => {
|
|
setShowDeleteDialog(true);
|
|
};
|
|
|
|
const { mutateAsync: updateHouseholdName } = useUpdateHouseholdName();
|
|
const { mutateAsync: updateUserData } = useUpdateUserData();
|
|
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
|
|
const { mutateAsync: deleteAsync } = useDeleteUser();
|
|
const isFirstRender = useRef(true);
|
|
|
|
const handleUpdateUserData = async () => {
|
|
await updateUserData({ newUserData: { firstName, lastName, timeZone } });
|
|
};
|
|
|
|
const handleUpdateHouseholdName = async () => {
|
|
if (profileData?.familyId) {
|
|
await updateHouseholdName({
|
|
familyId: profileData.familyId,
|
|
name: householdName,
|
|
});
|
|
}
|
|
};
|
|
|
|
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
|
|
|
|
useEffect(() => {
|
|
if (isFirstRender.current) {
|
|
isFirstRender.current = false;
|
|
return;
|
|
}
|
|
debouncedUserDataUpdate();
|
|
}, [timeZone, lastName, firstName]);
|
|
|
|
useEffect(() => {
|
|
handleUpdateHouseholdName();
|
|
}, [householdName]);
|
|
|
|
useEffect(() => {
|
|
if (familyMembers) {
|
|
const colors = familyMembers
|
|
.filter(member => member?.eventColor && member.uid !== user?.uid)
|
|
.map(member => member.eventColor!);
|
|
setTakenColors(colors);
|
|
}
|
|
}, [familyMembers]);
|
|
|
|
useEffect(() => {
|
|
if (profileData) {
|
|
setFirstName(profileData.firstName || "");
|
|
setLastName(profileData.lastName || "");
|
|
setTimeZone(
|
|
profileData.timeZone || Localization.getCalendars()[0].timeZone!
|
|
);
|
|
}
|
|
}, [profileData]);
|
|
|
|
useEffect(() => {
|
|
if (profileData?.familyId) {
|
|
refetchHHName();
|
|
}
|
|
}, [profileData?.familyId]);
|
|
|
|
useEffect(() => {
|
|
setHouseholdName(hhName);
|
|
}, [hhName]);
|
|
|
|
const pickImage = async () => {
|
|
const permissionResult =
|
|
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (!permissionResult.granted) {
|
|
alert("Permission to access camera roll is required!");
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 1,
|
|
});
|
|
|
|
if (!result.canceled) {
|
|
setProfileImage(result.assets[0].uri);
|
|
await changeProfilePicture(result.assets[0]);
|
|
}
|
|
};
|
|
|
|
const handleClearImage = async () => {
|
|
await updateUserData({ newUserData: { pfp: null } });
|
|
setProfileImage(null);
|
|
};
|
|
|
|
const pfpUri =
|
|
profileImage && typeof profileImage === "object" && "uri" in profileImage
|
|
? profileImage.uri
|
|
: profileImage;
|
|
|
|
const handleChangeColor = (color: string) => {
|
|
setPreviousSelectedColor(selectedColor);
|
|
setSelectedColor(color);
|
|
debouncedUpdateUserData(color);
|
|
};
|
|
|
|
const debouncedUpdateUserData = useCallback(
|
|
debounce(async (color: string) => {
|
|
try {
|
|
await updateUserData({
|
|
newUserData: {
|
|
eventColor: color,
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("Failed to update color:", error);
|
|
setSelectedColor(previousSelectedColor);
|
|
}
|
|
}, 500),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<ScrollView style={{ paddingBottom: 20, flex: 1 }}>
|
|
<View style={styles.card}>
|
|
<Text style={styles.subTit}>Your Profile</Text>
|
|
<View row spread paddingH-15 centerV marginV-15>
|
|
<TouchableOpacity onPress={pickImage}>
|
|
{pfpUri ? (
|
|
<Image
|
|
key={pfpUri}
|
|
style={[
|
|
styles.pfp,
|
|
(profileData?.eventColor && {
|
|
borderWidth: 2,
|
|
borderColor: profileData.eventColor,
|
|
}) ||
|
|
undefined,
|
|
]}
|
|
source={pfpUri ? { uri: pfpUri } : null}
|
|
/>
|
|
) : (
|
|
<View
|
|
center
|
|
style={{
|
|
aspectRatio: 1,
|
|
width: 65.54,
|
|
backgroundColor: profileData?.eventColor ?? colorMap.pink,
|
|
borderRadius: 20,
|
|
}}
|
|
>
|
|
<Text style={styles.pfpTxt}>
|
|
{profileData?.firstName?.at(0)}
|
|
{profileData?.lastName?.at(0)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity onPress={pickImage}>
|
|
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
|
|
{profileData?.pfp ? "Change" : "Add"} Photo
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
{profileData?.pfp && (
|
|
<TouchableOpacity onPress={handleClearImage}>
|
|
<Text style={styles.photoSet}>Remove Photo</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
<View paddingH-15>
|
|
{profileData?.userType == ProfileType.PARENT && (
|
|
<>
|
|
<Text text80 marginT-10 marginB-7 style={styles.label}>
|
|
Household
|
|
</Text>
|
|
<TextField
|
|
text70
|
|
placeholder="Household name"
|
|
style={styles.txtBox}
|
|
value={householdName}
|
|
onChangeText={async (value) => {
|
|
setHouseholdName(value);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
<Text text80 marginT-10 marginB-7 style={styles.label}>
|
|
First name
|
|
</Text>
|
|
<TextField
|
|
text70
|
|
placeholder="First name"
|
|
style={styles.txtBox}
|
|
value={firstName}
|
|
onChangeText={async (value) => {
|
|
setFirstName(value);
|
|
}}
|
|
/>
|
|
<Text text80 marginT-10 marginB-7 style={styles.label}>
|
|
Last name
|
|
</Text>
|
|
<TextField
|
|
text70
|
|
placeholder="Last name"
|
|
style={styles.txtBox}
|
|
value={lastName}
|
|
onChangeText={async (value) => {
|
|
setLastName(value);
|
|
}}
|
|
/>
|
|
<Text text80 marginT-10 marginB-7 style={styles.label}>
|
|
Email address
|
|
</Text>
|
|
<TextField
|
|
editable={false}
|
|
text70
|
|
placeholder="Email address"
|
|
value={user?.email?.toString()}
|
|
style={styles.txtBox}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View style={styles.card}>
|
|
<Text style={styles.cardTitle} marginB-14>
|
|
Color Preference
|
|
</Text>
|
|
<View row spread>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
|
|
{selectedColor == colorMap.pink && (
|
|
<AntDesign name="check" size={30} color="white" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPink)} disabled={takenColors.includes(colorMap.lightPink)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPink) ? 0.1 : 1}]} backgroundColor={colorMap.lightPink}>
|
|
{selectedColor == colorMap.lightPink && (
|
|
<AntDesign name="check" size={30} color="black" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
|
|
{selectedColor == colorMap.orange && (
|
|
<AntDesign name="check" size={30} color="white" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.lightOrange)} disabled={takenColors.includes(colorMap.lightOrange)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightOrange) ? 0.1 : 1}]} backgroundColor={colorMap.lightOrange}>
|
|
{selectedColor == colorMap.lightOrange && (
|
|
<AntDesign name="check" size={30} color="black" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}disabled={takenColors.includes(colorMap.green)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
|
|
{selectedColor == colorMap.green && (
|
|
<AntDesign name="check" size={30} color="white" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View row spread marginT-10>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.lightGreen)} disabled={takenColors.includes(colorMap.lightGreen)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightGreen) ? 0.1 : 1}]} backgroundColor={colorMap.lightGreen}>
|
|
{selectedColor == colorMap.lightGreen && (
|
|
<AntDesign name="check" size={30} color="black" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
|
|
{selectedColor == colorMap.teal && (
|
|
<AntDesign name="check" size={30} color="white" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.lightTeal)} disabled={takenColors.includes(colorMap.lightTeal)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightTeal) ? 0.1 : 1}]} backgroundColor={colorMap.lightTeal}>
|
|
{selectedColor == colorMap.lightTeal && (
|
|
<AntDesign name="check" size={30} color="black" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)} disabled={takenColors.includes(colorMap.purple)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
|
|
{selectedColor == colorMap.purple && (
|
|
<AntDesign name="check" size={30} color="white" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => handleChangeColor(colorMap.lightPurple)} disabled={takenColors.includes(colorMap.lightPurple)}>
|
|
<View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.lightPurple) ? 0.1 : 1}]} backgroundColor={colorMap.lightPurple}>
|
|
{selectedColor == colorMap.lightPurple && (
|
|
<AntDesign name="check" size={30} color="black" />
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.card}>
|
|
<Text style={styles.subTit}>Settings</Text>
|
|
<Text style={styles.jakarta12}>Time Zone</Text>
|
|
<View style={styles.viewPicker}>
|
|
<Picker
|
|
value={timeZone}
|
|
onChange={(item) => setTimeZone(item as string)}
|
|
showSearch
|
|
floatingPlaceholder
|
|
style={styles.inViewPicker}
|
|
trailingAccessory={
|
|
<View
|
|
style={{
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
marginTop: -38,
|
|
paddingRight: 15,
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={"chevron-down"}
|
|
style={{ alignSelf: "center" }}
|
|
size={20}
|
|
color={"#000000"}
|
|
/>
|
|
</View>
|
|
}
|
|
>
|
|
{timeZoneItems}
|
|
</Picker>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={handleShowDeleteDialog}
|
|
style={{ marginTop: 10, alignSelf: "center" }}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: "#ff1637",
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 15,
|
|
}}
|
|
>
|
|
Delete Profile
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<DeleteProfileDialogs
|
|
onFirstYes={() => {
|
|
setShowDeleteDialog(false);
|
|
}}
|
|
visible={showDeleteDialog}
|
|
onDismiss={handleHideDeleteDialog}
|
|
onConfirm={() => deleteAsync({})}
|
|
/>
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const timeZoneItems = Object.keys(tz.zones)
|
|
.sort()
|
|
.map((zone) => (
|
|
<Picker.Item
|
|
key={zone}
|
|
label={zone.replace("/", " / ").replace("_", " ")}
|
|
value={zone}
|
|
/>
|
|
));
|
|
|
|
const styles = StyleSheet.create({
|
|
cardTitle: {
|
|
fontFamily: "Manrope_500Medium",
|
|
fontSize: 15,
|
|
},
|
|
colorBox: {
|
|
aspectRatio: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: 51,
|
|
borderRadius: 12,
|
|
},
|
|
card: {
|
|
marginVertical: 15,
|
|
backgroundColor: "white",
|
|
width: "100%",
|
|
borderRadius: 12,
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 21,
|
|
},
|
|
pfpTxt: {
|
|
fontFamily: "Manrope_500Medium",
|
|
fontSize: 30,
|
|
color: "white",
|
|
},
|
|
pfp: {
|
|
aspectRatio: 1,
|
|
width: 65.54,
|
|
backgroundColor: "gray",
|
|
borderRadius: 20,
|
|
},
|
|
txtBox: {
|
|
backgroundColor: "#fafafa",
|
|
borderRadius: 50,
|
|
borderWidth: 2,
|
|
borderColor: "#cecece",
|
|
padding: 15,
|
|
height: 45,
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 13,
|
|
},
|
|
subTit: {
|
|
fontFamily: "Manrope_500Medium",
|
|
fontSize: 15,
|
|
},
|
|
label: {
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 12,
|
|
color: "#a1a1a1",
|
|
},
|
|
photoSet: {
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 13.07,
|
|
},
|
|
jakarta12: {
|
|
paddingVertical: 10,
|
|
fontFamily: "PlusJakartaSans_500Medium",
|
|
fontSize: 12,
|
|
color: "#a1a1a1",
|
|
},
|
|
viewPicker: {
|
|
borderRadius: 50,
|
|
backgroundColor: Colors.grey80,
|
|
marginBottom: 16,
|
|
borderColor: Colors.grey50,
|
|
borderWidth: 1,
|
|
marginTop: 0,
|
|
height: 40,
|
|
zIndex: 10,
|
|
},
|
|
inViewPicker: {
|
|
borderRadius: 50,
|
|
paddingVertical: 12,
|
|
paddingHorizontal: 16,
|
|
marginBottom: 16,
|
|
marginTop: -20,
|
|
height: 40,
|
|
zIndex: 10,
|
|
},
|
|
});
|
|
|
|
export default MyProfile;
|