ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix calendar overflow, todo repeat

Browse Source
This commit is contained in:
ivic00
2024-10-23 21:32:36 +02:00
parent 55f9d326d5
commit ae01b9daaf
6 changed files with 500 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/svgs/RepeatIcon.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from "react"
import Svg, { SvgProps, Path } from "react-native-svg"
const RepeatIcon = (props: SvgProps) => (
<Svg
width={props.height || 13}
height={props.height || 13}
fill="none"
{...props}
>
<Path
stroke={props.color || "#858585"}
strokeLinecap="round"
strokeLinejoin="round"
d="M1.158 7.197a5.42 5.42 0 0 1 9.58-4.103m0 0V1.099m0 1.995v.037H8.705m3.21 2.71a5.42 5.42 0 0 1-9.444 4.263m0 .001v-.198h2.033m-2.033.198v1.835"
/>
</Svg>
)
export default RepeatIcon

2
components/pages/calendar/InnerCalendar.tsx
View File

@ -21,7 +21,7 @@ export const InnerCalendar = () => {
return ( return (
<> <>
<View <View
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60}} style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
ref={calendarContainerRef} ref={calendarContainerRef}
onLayout={onLayout} onLayout={onLayout}
> >

490
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -1,250 +1,292 @@
import React, {useEffect, useRef, useState} from "react"; import React, { useEffect, useRef, useState } from "react";
import {StyleSheet, TouchableOpacity} from "react-native"; import { StyleSheet, TouchableOpacity } from "react-native";
import {ScrollView} from "react-native-gesture-handler"; import { ScrollView } from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import {Colors, Image, Picker, Text, TextField, View} from "react-native-ui-lib"; import {
Colors,
Image,
Picker,
Text,
TextField,
View,
} from "react-native-ui-lib";
import Ionicons from "@expo/vector-icons/Ionicons"; import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from "tzdata"; import * as tz from "tzdata";
import * as Localization from "expo-localization"; import * as Localization from "expo-localization";
import debounce from "debounce"; import debounce from "debounce";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData"; import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture"; import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
const MyProfile = () => { const MyProfile = () => {
const {user, profileData} = useAuthContext(); const { user, profileData } = useAuthContext();
const [timeZone, setTimeZone] = useState<string>( const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
); );
const [lastName, setLastName] = useState<string>(profileData?.lastName || ""); const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>( const [firstName, setFirstName] = useState<string>(
profileData?.firstName || "" profileData?.firstName || ""
); );
const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null); const [profileImage, setProfileImage] = useState<
string | ImagePicker.ImagePickerAsset | null
>(profileData?.pfp || null);
const {mutateAsync: updateUserData} = useUpdateUserData(); const { mutateAsync: updateUserData } = useUpdateUserData();
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture(); const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
const isFirstRender = useRef(true); const isFirstRender = useRef(true);
const handleUpdateUserData = async () => { const handleUpdateUserData = async () => {
await updateUserData({newUserData: {firstName, lastName, timeZone}}); await updateUserData({ newUserData: { firstName, lastName, timeZone } });
}; };
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500); const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
useEffect(() => { useEffect(() => {
if (isFirstRender.current) { if (isFirstRender.current) {
isFirstRender.current = false; isFirstRender.current = false;
return; return;
} }
debouncedUserDataUpdate(); debouncedUserDataUpdate();
}, [timeZone, lastName, firstName, profileImage]); }, [timeZone, lastName, firstName, profileImage]);
useEffect(() => { useEffect(() => {
if (profileData) { if (profileData) {
setFirstName(profileData.firstName || ""); setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || ""); setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null); // setProfileImage(profileData.pfp || null);
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!); setTimeZone(
} profileData.timeZone || Localization.getCalendars()[0].timeZone!
}, [profileData]); );
}
}, [profileData]);
const pickImage = async () => { const pickImage = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync(); const permissionResult =
if (!permissionResult.granted) { await ImagePicker.requestMediaLibraryPermissionsAsync();
alert("Permission to access camera roll is required!"); if (!permissionResult.granted) {
return; 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);
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 result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
return ( if (!result.canceled) {
<ScrollView style={{paddingBottom: 100, flex: 1}}> setProfileImage(result.assets[0].uri);
<View style={styles.card}> changeProfilePicture(result.assets[0]);
<Text style={styles.subTit}>Your Profile</Text> }
<View row spread paddingH-15 centerV marginV-15> };
<TouchableOpacity onPress={pickImage}>
<Image
key={pfpUri}
style={styles.pfp}
source={pfpUri ? {uri: pfpUri} : null}
/>
</TouchableOpacity>
<TouchableOpacity onPress={pickImage}> const handleClearImage = async () => {
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}> await updateUserData({ newUserData: { pfp: null } });
{profileData?.pfp ? "Change" : "Add"} Photo setProfileImage(null);
</Text> };
</TouchableOpacity>
{profileData?.pfp && ( const pfpUri =
<TouchableOpacity onPress={handleClearImage}> profileImage && typeof profileImage === "object" && "uri" in profileImage
<Text style={styles.photoSet}>Remove Photo</Text> ? profileImage.uri
</TouchableOpacity> : profileImage;
)}
</View>
<View paddingH-15>
<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}> return (
<Text style={styles.subTit}>Settings</Text> <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
<Text style={styles.jakarta12}>Time Zone</Text> <View style={styles.card}>
<View style={styles.viewPicker}> <Text style={styles.subTit}>Your Profile</Text>
<Picker <View row spread paddingH-15 centerV marginV-15>
value={timeZone} <TouchableOpacity onPress={pickImage}>
onChange={(item) => setTimeZone(item as string)} {pfpUri ? (
showSearch <Image
floatingPlaceholder key={pfpUri}
style={styles.inViewPicker} style={styles.pfp}
trailingAccessory={ source={pfpUri ? { uri: pfpUri } : null}
<View />
style={{ ) : (
justifyContent: "center", <View
alignItems: "center", center
height: "100%", style={{
marginTop: -38, aspectRatio: 1,
paddingRight: 15, width: 65.54,
}} backgroundColor: profileData?.eventColor ?? colorMap.pink,
> borderRadius: 20,
<Ionicons }}
name={"chevron-down"} >
style={{alignSelf: "center"}} <Text style={styles.pfpTxt}>
size={20} {user?.email?.at(0)}
color={"#000000"} {user?.email?.at(1)}
/> </Text>
</View> </View>
} )}
> </TouchableOpacity>
{timeZoneItems}
</Picker> <TouchableOpacity onPress={pickImage}>
</View> <Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
</View> {profileData?.pfp ? "Change" : "Add"} Photo
</ScrollView> </Text>
); </TouchableOpacity>
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<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.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>
</ScrollView>
);
}; };
const timeZoneItems = Object.keys(tz.zones) const timeZoneItems = Object.keys(tz.zones)
.sort() .sort()
.map((zone) => ( .map((zone) => (
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/> <Picker.Item
)); key={zone}
label={zone.replace("/", " / ").replace("_", " ")}
value={zone}
/>
));
const styles = StyleSheet.create({ const styles = StyleSheet.create({
card: { card: {
marginVertical: 15, marginVertical: 15,
backgroundColor: "white", backgroundColor: "white",
width: "100%", width: "100%",
borderRadius: 12, borderRadius: 12,
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 21, paddingVertical: 21,
}, },
pfp: { pfpTxt: {
aspectRatio: 1, fontFamily: "Manrope_500Medium",
width: 65.54, fontSize: 30,
backgroundColor: "gray", color: "white",
borderRadius: 20, },
}, pfp: {
txtBox: { aspectRatio: 1,
backgroundColor: "#fafafa", width: 65.54,
borderRadius: 50, backgroundColor: "gray",
borderWidth: 2, borderRadius: 20,
borderColor: "#cecece", },
padding: 15, txtBox: {
height: 45, backgroundColor: "#fafafa",
fontFamily: "PlusJakartaSans_500Medium", borderRadius: 50,
fontSize: 13, borderWidth: 2,
}, borderColor: "#cecece",
subTit: { padding: 15,
fontFamily: "Manrope_500Medium", height: 45,
fontSize: 15, fontFamily: "PlusJakartaSans_500Medium",
}, fontSize: 13,
label: { },
fontFamily: "PlusJakartaSans_500Medium", subTit: {
fontSize: 12, fontFamily: "Manrope_500Medium",
color: "#a1a1a1", fontSize: 15,
}, },
photoSet: { label: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07, fontSize: 12,
}, color: "#a1a1a1",
jakarta12: { },
paddingVertical: 10, photoSet: {
fontFamily: "PlusJakartaSans_500Medium", fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12, fontSize: 13.07,
color: "#a1a1a1", },
}, jakarta12: {
viewPicker: { paddingVertical: 10,
borderRadius: 50, fontFamily: "PlusJakartaSans_500Medium",
backgroundColor: Colors.grey80, fontSize: 12,
marginBottom: 16, color: "#a1a1a1",
borderColor: Colors.grey50, },
borderWidth: 1, viewPicker: {
marginTop: 0, borderRadius: 50,
height: 40, backgroundColor: Colors.grey80,
zIndex: 10, marginBottom: 16,
}, borderColor: Colors.grey50,
inViewPicker: { borderWidth: 1,
borderRadius: 50, marginTop: 0,
paddingVertical: 12, height: 40,
paddingHorizontal: 16, zIndex: 10,
marginBottom: 16, },
marginTop: -20, inViewPicker: {
height: 40, borderRadius: 50,
zIndex: 10, paddingVertical: 12,
}, paddingHorizontal: 16,
marginBottom: 16,
marginTop: -20,
height: 40,
zIndex: 10,
},
}); });
export default MyProfile; export default MyProfile;

86
components/pages/todos/RepeatFreq.tsx
View File

@ -5,61 +5,17 @@ const RepeatFreq = () => {
const [weeks, setWeeks] = useState<number>(1); const [weeks, setWeeks] = useState<number>(1);
const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1); const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
useEffect(() => { useEffect(() => {}, [weeks]);
}, [weeks]);
return ( return (
<View row centerV> <View row centerV spread marginR-30>
<View row centerV> <RepeatOption value={"Monday"} />
<RepeatOption value={"Monday"} /> <RepeatOption value={"Tuesday"} />
<RepeatOption value={"Tuesday"} /> <RepeatOption value={"Wednesday"} />
<RepeatOption value={"Wednesday"} /> <RepeatOption value={"Thirsday"} />
<RepeatOption value={"Thirsday"} /> <RepeatOption value={"Friday"} />
<RepeatOption value={"Friday"} /> <RepeatOption value={"Saturday"} />
<RepeatOption value={"Saturday"} /> <RepeatOption value={"Sunday"} />
<RepeatOption value={"Sunday"} />
</View>
<View row gap-5 centerV>
<Picker
centered
marginL-10
marginR-0
paddingR-0
textAlign="right"
trailingAccessory={
<Text
style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
>
{weeks == 1 ? "Week" : "Weeks"}
</Text>
}
value={weeks}
onChange={(value) => {
if (typeof value === "number") {
setWeeks(value);
}
}}
placeholder={"Select number of weeks"}
useWheelPicker
color={"#fd1575"}
style={{
maxWidth: 18,
fontFamily: "Manrope_700Bold",
}}
containerStyle={{
borderWidth: 1,
borderRadius: 6,
paddingRight: 5,
paddingLeft: 3,
borderColor: "#fd1575",
backgroundColor: "#ffe8f1",
}}
>
{weekOptions.map((num) => (
<Picker.Item key={num} value={num} label={`${num}`} />
))}
</Picker>
</View>
</View> </View>
); );
}; };
@ -69,15 +25,27 @@ export default RepeatFreq;
const RepeatOption = ({ value }: { value: string }) => { const RepeatOption = ({ value }: { value: string }) => {
const [isSet, setisSet] = useState(false); const [isSet, setisSet] = useState(false);
return ( return (
<TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}> <TouchableOpacity onPress={() => setisSet(!isSet)}>
<Text <View
center
marginT-8
marginB-4
width={28}
height={28}
style={{ style={{
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold", backgroundColor: isSet ? "#fd1575" : "white",
color: isSet ? "#fd1575" : "gray", borderRadius: 100,
}} }}
> >
{value.at(0)} <Text
</Text> style={{
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
color: isSet ? "white" : "gray",
}}
>
{value.at(0)}
</Text>
</View>
</TouchableOpacity> </TouchableOpacity>
); );
}; };

202
components/pages/todos/ToDoItem.tsx
View File

@ -1,11 +1,11 @@
import { import {
View, View,
Text, Text,
Checkbox, Checkbox,
TouchableOpacity, TouchableOpacity,
Dialog, Dialog,
Button, Button,
ButtonSize ButtonSize,
} from "react-native-ui-lib"; } from "react-native-ui-lib";
import React, { useState } from "react"; import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext"; import { useToDosContext } from "@/contexts/ToDosContext";
@ -15,10 +15,11 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native"; import { ImageBackground } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog"; import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => { const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext(); const { updateToDo } = useToDosContext();
const {data: members} = useGetFamilyMembers(); const { data: members } = useGetFamilyMembers();
const [visible, setVisible] = useState<boolean>(false); const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points); const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false); const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@ -33,11 +34,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
} }
}; };
const getInitials = (firstName: string, lastName: string) => { const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`; return `${firstName.charAt(0)}${lastName.charAt(0)}`;
}; };
const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!)); const selectedMembers = members?.filter((x) =>
props?.item?.assignees?.includes(x?.uid!)
);
return ( return (
<View <View
centerV centerV
@ -50,24 +53,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
opacity: props.item.done ? 0.3 : 1, opacity: props.item.done ? 0.3 : 1,
}} }}
> >
{visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>} {visible && (
<AddChoreDialog
isVisible={visible}
setIsVisible={setVisible}
selectedTodo={props.item}
/>
)}
<View paddingB-8 row spread> <View paddingB-8 row spread>
<Text <Text
text70 text70
style={{ style={{
textDecorationLine: props.item.done ? "line-through" : "none", textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 15, fontSize: 15,
}} }}
onPress={() => { onPress={() => {
setVisible(true); setVisible(true);
}} }}
> >
{props.item.title} {props.item.title}
</Text> </Text>
<Checkbox <Checkbox
value={props.item.done} value={props.item.done}
containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}} containerStyle={{
borderWidth: 0.7,
borderRadius: 50,
borderColor: "gray",
height: 24.64,
width: 24.64,
}}
color="#fd1575" color="#fd1575"
onValueChange={(value) => { onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done }); updateToDo({ id: props.item.id, done: !props.item.done });
@ -86,62 +101,99 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
/> />
</View> </View>
<View centerV centerH marginT-8 row spread> <View centerV centerH marginT-8 row spread>
{props.item.points && props.item.points > 0 ? ( <View row>
<TouchableOpacity {props.item.points && props.item.points > 0 ? (
onPress={() => { <TouchableOpacity
if (props.isSettings) { onPress={() => {
setPointsModalVisible(true); if (props.isSettings) {
} setPointsModalVisible(true);
}} }
> }}
<View centerV row gap-3> >
<Ionicons name="gift-outline" size={20} color="#46a80a" /> <View centerV row gap-3>
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}> <Ionicons name="gift-outline" size={20} color="#46a80a" />
{props.item.points} points <Text
color="#46a80a"
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
>
{props.item.points} points
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
{!(props.item.repeatType == "None") && (
<View row centerV marginL-8>
<RepeatIcon style={{ marginRight: 4 }} />
<Text
style={{
fontSize: 12,
fontFamily: "Manrope_500Medium",
color: "#858585",
}}
>
{(() => {
switch (props.item.repeatType) {
case "Once a month":
return "Monthly";
case "Every week":
return "Weekly";
case "Once a year":
return "Yearly";
default:
return props.item.repeatType;
}
})()}
</Text> </Text>
</View> </View>
</TouchableOpacity> )}
) : ( </View>
<View /> <View row style={{ gap: 3 }}>
)} {selectedMembers?.map((member) => {
<View row style={{ gap: 3 }}> return member?.pfp ? (
{selectedMembers?.map((member) => { <ImageBackground
return member?.pfp ? ( source={{ uri: member.pfp }}
<ImageBackground style={{
source={require("../../../assets/images/child-picture.png")} height: 24.64,
style={{ aspectRatio: 1,
height: 24.64, borderRadius: 22,
aspectRatio: 1, overflow: "hidden",
borderRadius: 22, }}
overflow: "hidden", />
}} ) : (
/> <View
) : ( style={{
<View style={{ position: "relative",
position: 'relative', width: 24.64,
width: 24.64, aspectRatio: 1,
aspectRatio: 1 }}
}}> >
<View style={{ <View
backgroundColor: '#ccc', style={{
justifyContent: 'center', backgroundColor: "#ccc",
alignItems: 'center', justifyContent: "center",
borderRadius: 100, // Circular shape alignItems: "center",
width: '100%', borderRadius: 100, // Circular shape
height: '100%' width: "100%",
}}> height: "100%",
<Text style={{ }}
color: '#fff', >
fontSize: 12, <Text
fontWeight: 'bold' style={{
}}> color: "#fff",
{getInitials(member.firstName, member.lastName ?? "")} fontSize: 12,
</Text> fontWeight: "bold",
</View> }}
</View> >
)} {getInitials(member.firstName, member.lastName ?? "")}
)} </Text>
</View> </View>
</View>
);
})}
</View>
</View> </View>
<Dialog <Dialog
visible={pointsModalVisible} visible={pointsModalVisible}

95
components/shared/HeaderTemplate.tsx
View File

@ -1,43 +1,70 @@
import {Image, Text, View} from "react-native-ui-lib"; import { Image, Text, View } from "react-native-ui-lib";
import React from "react"; import React from "react";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
const HeaderTemplate = (props: { const HeaderTemplate = (props: {
message: string; message: string;
isWelcome: boolean; isWelcome: boolean;
children?: React.ReactNode; children?: React.ReactNode;
link?: React.ReactNode; link?: React.ReactNode;
}) => { }) => {
const {user, profileData} = useAuthContext(); const { user, profileData } = useAuthContext();
const headerHeight: number = 72; const headerHeight: number = 72;
return (
<View row centerV marginV-15> const styles = StyleSheet.create({
<Image pfp: {
source={{uri: profileData?.pfp}} height: headerHeight,
style={{ aspectRatio: 1,
height: headerHeight, borderRadius: 22,
aspectRatio: 1, overflow: "hidden",
borderRadius: 22, marginRight: 20,
overflow: "hidden", backgroundColor: profileData?.eventColor ?? colorMap.pink,
marginRight: 20, },
}} pfpTxt: {
/> fontFamily: "Manrope_500Medium",
<View gap-3> fontSize: 30,
{props.isWelcome && ( color: 'white',
<Text text70L style={{ },
fontSize: 19, });
fontFamily: "Manrope_400Regular"
}}>Welcome, {profileData?.firstName}!</Text> return (
)} <View row centerV marginV-15>
<Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}> {profileData?.pfp ? (
{props.message} <Image source={{ uri: profileData.pfp }} style={styles.pfp} />
</Text> ) : (
{props.children && <View>{props.children}</View>} <View style={styles.pfp} center>
{props.link && <View marginT-8>{props.link}</View>} <Text style={styles.pfpTxt}>
</View> {user?.email?.at(0)}
{user?.email?.at(1)}
</Text>
</View> </View>
); )}
<View gap-3>
{props.isWelcome && (
<Text
text70L
style={{
fontSize: 19,
fontFamily: "Manrope_400Regular",
}}
>
Welcome, {profileData?.firstName}!
</Text>
)}
<Text
text70B
style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
</View>
);
}; };
export default HeaderTemplate; export default HeaderTemplate;