mirror of
https://github.com/urosran/cally.git
synced 2025-07-16 10:06:15 +00:00
fix calendar overflow, todo repeat
This commit is contained in:
ivic00
18
assets/svgs/RepeatIcon.tsx
Normal file
18
assets/svgs/RepeatIcon.tsx
Normal 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
|
||||
@ -21,7 +21,7 @@ export const InnerCalendar = () => {
|
||||
return (
|
||||
<>
|
||||
<View
|
||||
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60}}
|
||||
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
|
||||
ref={calendarContainerRef}
|
||||
onLayout={onLayout}
|
||||
>
|
||||
|
||||
@ -1,250 +1,292 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {StyleSheet, TouchableOpacity} from "react-native";
|
||||
import {ScrollView} from "react-native-gesture-handler";
|
||||
import React, { 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 {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 * as tz from "tzdata";
|
||||
import * as Localization from "expo-localization";
|
||||
import debounce from "debounce";
|
||||
import {useAuthContext} from "@/contexts/AuthContext";
|
||||
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
|
||||
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
|
||||
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
|
||||
const MyProfile = () => {
|
||||
const {user, profileData} = useAuthContext();
|
||||
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 { user, profileData } = useAuthContext();
|
||||
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 {mutateAsync: updateUserData} = useUpdateUserData();
|
||||
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture();
|
||||
const isFirstRender = useRef(true);
|
||||
const { mutateAsync: updateUserData } = useUpdateUserData();
|
||||
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
|
||||
const isFirstRender = useRef(true);
|
||||
|
||||
const handleUpdateUserData = async () => {
|
||||
await updateUserData({newUserData: {firstName, lastName, timeZone}});
|
||||
};
|
||||
const handleUpdateUserData = async () => {
|
||||
await updateUserData({ newUserData: { firstName, lastName, timeZone } });
|
||||
};
|
||||
|
||||
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
|
||||
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
|
||||
|
||||
useEffect(() => {
|
||||
if (isFirstRender.current) {
|
||||
isFirstRender.current = false;
|
||||
return;
|
||||
}
|
||||
debouncedUserDataUpdate();
|
||||
}, [timeZone, lastName, firstName, profileImage]);
|
||||
useEffect(() => {
|
||||
if (isFirstRender.current) {
|
||||
isFirstRender.current = false;
|
||||
return;
|
||||
}
|
||||
debouncedUserDataUpdate();
|
||||
}, [timeZone, lastName, firstName, profileImage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (profileData) {
|
||||
setFirstName(profileData.firstName || "");
|
||||
setLastName(profileData.lastName || "");
|
||||
// setProfileImage(profileData.pfp || null);
|
||||
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
|
||||
}
|
||||
}, [profileData]);
|
||||
useEffect(() => {
|
||||
if (profileData) {
|
||||
setFirstName(profileData.firstName || "");
|
||||
setLastName(profileData.lastName || "");
|
||||
// setProfileImage(profileData.pfp || null);
|
||||
setTimeZone(
|
||||
profileData.timeZone || Localization.getCalendars()[0].timeZone!
|
||||
);
|
||||
}
|
||||
}, [profileData]);
|
||||
|
||||
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);
|
||||
changeProfilePicture(result.assets[0])
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearImage = async () => {
|
||||
await updateUserData({newUserData: {pfp: null}});
|
||||
setProfileImage(null)
|
||||
const pickImage = async () => {
|
||||
const permissionResult =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!permissionResult.granted) {
|
||||
alert("Permission to access camera roll is required!");
|
||||
return;
|
||||
}
|
||||
|
||||
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 (
|
||||
<ScrollView style={{paddingBottom: 100, flex: 1}}>
|
||||
<View style={styles.card}>
|
||||
<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>
|
||||
if (!result.canceled) {
|
||||
setProfileImage(result.assets[0].uri);
|
||||
changeProfilePicture(result.assets[0]);
|
||||
}
|
||||
};
|
||||
|
||||
<TouchableOpacity onPress={pickImage}>
|
||||
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
|
||||
{profileData?.pfp ? "Change" : "Add"} Photo
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
const handleClearImage = async () => {
|
||||
await updateUserData({ newUserData: { pfp: null } });
|
||||
setProfileImage(null);
|
||||
};
|
||||
|
||||
{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>
|
||||
const pfpUri =
|
||||
profileImage && typeof profileImage === "object" && "uri" in profileImage
|
||||
? profileImage.uri
|
||||
: profileImage;
|
||||
|
||||
<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>
|
||||
);
|
||||
return (
|
||||
<ScrollView style={{ paddingBottom: 100, 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}
|
||||
source={pfpUri ? { uri: pfpUri } : null}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
center
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 65.54,
|
||||
backgroundColor: profileData?.eventColor ?? colorMap.pink,
|
||||
borderRadius: 20,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.pfpTxt}>
|
||||
{user?.email?.at(0)}
|
||||
{user?.email?.at(1)}
|
||||
</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>
|
||||
<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)
|
||||
.sort()
|
||||
.map((zone) => (
|
||||
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
|
||||
));
|
||||
.sort()
|
||||
.map((zone) => (
|
||||
<Picker.Item
|
||||
key={zone}
|
||||
label={zone.replace("/", " / ").replace("_", " ")}
|
||||
value={zone}
|
||||
/>
|
||||
));
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 21,
|
||||
},
|
||||
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,
|
||||
},
|
||||
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;
|
||||
export default MyProfile;
|
||||
|
||||
@ -5,61 +5,17 @@ const RepeatFreq = () => {
|
||||
const [weeks, setWeeks] = useState<number>(1);
|
||||
const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
|
||||
|
||||
useEffect(() => {
|
||||
}, [weeks]);
|
||||
useEffect(() => {}, [weeks]);
|
||||
|
||||
return (
|
||||
<View row centerV>
|
||||
<View row centerV>
|
||||
<RepeatOption value={"Monday"} />
|
||||
<RepeatOption value={"Tuesday"} />
|
||||
<RepeatOption value={"Wednesday"} />
|
||||
<RepeatOption value={"Thirsday"} />
|
||||
<RepeatOption value={"Friday"} />
|
||||
<RepeatOption value={"Saturday"} />
|
||||
<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 row centerV spread marginR-30>
|
||||
<RepeatOption value={"Monday"} />
|
||||
<RepeatOption value={"Tuesday"} />
|
||||
<RepeatOption value={"Wednesday"} />
|
||||
<RepeatOption value={"Thirsday"} />
|
||||
<RepeatOption value={"Friday"} />
|
||||
<RepeatOption value={"Saturday"} />
|
||||
<RepeatOption value={"Sunday"} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@ -69,15 +25,27 @@ export default RepeatFreq;
|
||||
const RepeatOption = ({ value }: { value: string }) => {
|
||||
const [isSet, setisSet] = useState(false);
|
||||
return (
|
||||
<TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
|
||||
<Text
|
||||
<TouchableOpacity onPress={() => setisSet(!isSet)}>
|
||||
<View
|
||||
center
|
||||
marginT-8
|
||||
marginB-4
|
||||
width={28}
|
||||
height={28}
|
||||
style={{
|
||||
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
|
||||
color: isSet ? "#fd1575" : "gray",
|
||||
backgroundColor: isSet ? "#fd1575" : "white",
|
||||
borderRadius: 100,
|
||||
}}
|
||||
>
|
||||
{value.at(0)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
|
||||
color: isSet ? "white" : "gray",
|
||||
}}
|
||||
>
|
||||
{value.at(0)}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Checkbox,
|
||||
TouchableOpacity,
|
||||
Dialog,
|
||||
Button,
|
||||
ButtonSize
|
||||
View,
|
||||
Text,
|
||||
Checkbox,
|
||||
TouchableOpacity,
|
||||
Dialog,
|
||||
Button,
|
||||
ButtonSize,
|
||||
} from "react-native-ui-lib";
|
||||
import React, { useState } from "react";
|
||||
import { useToDosContext } from "@/contexts/ToDosContext";
|
||||
@ -15,10 +15,11 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
|
||||
import { ImageBackground } from "react-native";
|
||||
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import RepeatIcon from "@/assets/svgs/RepeatIcon";
|
||||
|
||||
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
const { updateToDo } = useToDosContext();
|
||||
const {data: members} = useGetFamilyMembers();
|
||||
const { data: members } = useGetFamilyMembers();
|
||||
const [visible, setVisible] = useState<boolean>(false);
|
||||
const [points, setPoints] = useState(props.item.points);
|
||||
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
|
||||
@ -33,11 +34,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
|
||||
};
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
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 (
|
||||
<View
|
||||
centerV
|
||||
@ -50,24 +53,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
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>
|
||||
<Text
|
||||
<Text
|
||||
text70
|
||||
style={{
|
||||
textDecorationLine: props.item.done ? "line-through" : "none",
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
textDecorationLine: props.item.done ? "line-through" : "none",
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 15,
|
||||
}}
|
||||
onPress={() => {
|
||||
setVisible(true);
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
>
|
||||
{props.item.title}
|
||||
</Text>
|
||||
</Text>
|
||||
<Checkbox
|
||||
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"
|
||||
onValueChange={(value) => {
|
||||
updateToDo({ id: props.item.id, done: !props.item.done });
|
||||
@ -86,62 +101,99 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
/>
|
||||
</View>
|
||||
<View centerV centerH marginT-8 row spread>
|
||||
{props.item.points && props.item.points > 0 ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
if (props.isSettings) {
|
||||
setPointsModalVisible(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View centerV row gap-3>
|
||||
<Ionicons name="gift-outline" size={20} color="#46a80a" />
|
||||
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
|
||||
{props.item.points} points
|
||||
<View row>
|
||||
{props.item.points && props.item.points > 0 ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
if (props.isSettings) {
|
||||
setPointsModalVisible(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<View centerV row gap-3>
|
||||
<Ionicons name="gift-outline" size={20} color="#46a80a" />
|
||||
<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>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View />
|
||||
)}
|
||||
<View row style={{ gap: 3 }}>
|
||||
{selectedMembers?.map((member) => {
|
||||
return member?.pfp ? (
|
||||
<ImageBackground
|
||||
source={require("../../../assets/images/child-picture.png")}
|
||||
style={{
|
||||
height: 24.64,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View style={{
|
||||
position: 'relative',
|
||||
width: 24.64,
|
||||
aspectRatio: 1
|
||||
}}>
|
||||
<View style={{
|
||||
backgroundColor: '#ccc',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 100, // Circular shape
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{getInitials(member.firstName, member.lastName ?? "")}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<View row style={{ gap: 3 }}>
|
||||
{selectedMembers?.map((member) => {
|
||||
return member?.pfp ? (
|
||||
<ImageBackground
|
||||
source={{ uri: member.pfp }}
|
||||
style={{
|
||||
height: 24.64,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
position: "relative",
|
||||
width: 24.64,
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#ccc",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 100, // Circular shape
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{getInitials(member.firstName, member.lastName ?? "")}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
<Dialog
|
||||
visible={pointsModalVisible}
|
||||
|
||||
@ -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 {useAuthContext} from "@/contexts/AuthContext";
|
||||
import { useAuthContext } from "@/contexts/AuthContext";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/constants/colorMap";
|
||||
|
||||
const HeaderTemplate = (props: {
|
||||
message: string;
|
||||
isWelcome: boolean;
|
||||
children?: React.ReactNode;
|
||||
link?: React.ReactNode;
|
||||
message: string;
|
||||
isWelcome: boolean;
|
||||
children?: React.ReactNode;
|
||||
link?: React.ReactNode;
|
||||
}) => {
|
||||
const {user, profileData} = useAuthContext();
|
||||
const { user, profileData } = useAuthContext();
|
||||
|
||||
const headerHeight: number = 72;
|
||||
return (
|
||||
<View row centerV marginV-15>
|
||||
<Image
|
||||
source={{uri: profileData?.pfp}}
|
||||
style={{
|
||||
height: headerHeight,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
marginRight: 20,
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
const headerHeight: number = 72;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
pfp: {
|
||||
height: headerHeight,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
marginRight: 20,
|
||||
backgroundColor: profileData?.eventColor ?? colorMap.pink,
|
||||
},
|
||||
pfpTxt: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 30,
|
||||
color: 'white',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<View row centerV marginV-15>
|
||||
{profileData?.pfp ? (
|
||||
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
|
||||
) : (
|
||||
<View style={styles.pfp} center>
|
||||
<Text style={styles.pfpTxt}>
|
||||
{user?.email?.at(0)}
|
||||
{user?.email?.at(1)}
|
||||
</Text>
|
||||
</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;
|
||||
|
||||
Reference in New Issue
Block a user