ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +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 (
<>
<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}
>

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

@ -2,7 +2,14 @@ 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";
@ -10,6 +17,7 @@ import debounce from "debounce";
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();
@ -20,7 +28,9 @@ const MyProfile = () => {
const [firstName, setFirstName] = useState<string>(
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: changeProfilePicture } = useChangeProfilePicture();
@ -45,12 +55,15 @@ const MyProfile = () => {
setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null);
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
setTimeZone(
profileData.timeZone || Localization.getCalendars()[0].timeZone!
);
}
}, [profileData]);
const pickImage = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert("Permission to access camera roll is required!");
return;
@ -65,16 +78,19 @@ const MyProfile = () => {
if (!result.canceled) {
setProfileImage(result.assets[0].uri);
changeProfilePicture(result.assets[0])
changeProfilePicture(result.assets[0]);
}
};
const handleClearImage = async () => {
await updateUserData({ newUserData: { pfp: null } });
setProfileImage(null)
}
setProfileImage(null);
};
const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
const pfpUri =
profileImage && typeof profileImage === "object" && "uri" in profileImage
? profileImage.uri
: profileImage;
return (
<ScrollView style={{ paddingBottom: 100, flex: 1 }}>
@ -82,11 +98,28 @@ const MyProfile = () => {
<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}>
@ -179,7 +212,11 @@ const MyProfile = () => {
const timeZoneItems = Object.keys(tz.zones)
.sort()
.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({
@ -191,6 +228,11 @@ const styles = StyleSheet.create({
paddingHorizontal: 20,
paddingVertical: 21,
},
pfpTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 30,
color: "white",
},
pfp: {
aspectRatio: 1,
width: 65.54,

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

@ -5,12 +5,10 @@ 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>
<View row centerV spread marginR-30>
<RepeatOption value={"Monday"} />
<RepeatOption value={"Tuesday"} />
<RepeatOption value={"Wednesday"} />
@ -19,48 +17,6 @@ const RepeatFreq = () => {
<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>
);
};
@ -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)}>
<TouchableOpacity onPress={() => setisSet(!isSet)}>
<View
center
marginT-8
marginB-4
width={28}
height={28}
style={{
backgroundColor: isSet ? "#fd1575" : "white",
borderRadius: 100,
}}
>
<Text
style={{
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
color: isSet ? "#fd1575" : "gray",
color: isSet ? "white" : "gray",
}}
>
{value.at(0)}
</Text>
</View>
</TouchableOpacity>
);
};

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

@ -5,7 +5,7 @@ import {
TouchableOpacity,
Dialog,
Button,
ButtonSize
ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
@ -15,6 +15,7 @@ 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();
@ -37,7 +38,9 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
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,7 +53,13 @@ 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
text70
@ -67,7 +76,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
</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,6 +101,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
/>
</View>
<View centerV centerH marginT-8 row spread>
<View row>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
@ -96,7 +112,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
<Text
color="#46a80a"
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
>
{props.item.points} points
</Text>
</View>
@ -104,11 +123,38 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
) : (
<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>
)}
</View>
<View row style={{ gap: 3 }}>
{selectedMembers?.map((member) => {
return member?.pfp ? (
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
source={{ uri: member.pfp }}
style={{
height: 24.64,
aspectRatio: 1,
@ -117,30 +163,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
}}
/>
) : (
<View style={{
position: 'relative',
<View
style={{
position: "relative",
width: 24.64,
aspectRatio: 1
}}>
<View style={{
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center',
aspectRatio: 1,
}}
>
<View
style={{
backgroundColor: "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape
width: '100%',
height: '100%'
}}>
<Text style={{
color: '#fff',
width: "100%",
height: "100%",
}}
>
<Text
style={{
color: "#fff",
fontSize: 12,
fontWeight: 'bold'
}}>
fontWeight: "bold",
}}
>
{getInitials(member.firstName, member.lastName ?? "")}
</Text>
</View>
</View>
)}
)}
);
})}
</View>
</View>
<Dialog

49
components/shared/HeaderTemplate.tsx
View File

@ -1,6 +1,8 @@
import { Image, Text, View } from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
const HeaderTemplate = (props: {
message: string;
@ -11,26 +13,51 @@ const HeaderTemplate = (props: {
const { user, profileData } = useAuthContext();
const headerHeight: number = 72;
return (
<View row centerV marginV-15>
<Image
source={{uri: profileData?.pfp}}
style={{
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={{
<Text
text70L
style={{
fontSize: 19,
fontFamily: "Manrope_400Regular"
}}>Welcome, {profileData?.firstName}!</Text>
fontFamily: "Manrope_400Regular",
}}
>
Welcome, {profileData?.firstName}!
</Text>
)}
<Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
<Text
text70B
style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}