ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-16 01:56:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into tablet

Browse Source
This commit is contained in:
ivic00
2024-11-10 13:54:23 +01:00
parent e3084a70a7 d6642726e6
commit 62ba53f116
14 changed files with 1227 additions and 1081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
components/pages/calendar/EventCalendar.tsx
View File

@ -1,315 +1,337 @@
import React, {useCallback, useEffect, useMemo, useState} from "react";
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar } from "react-native-big-calendar";
import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useSetAtom } from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom,
editVisibleAtom,
eventForEditAtom,
isAllDayAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import {Text} from "react-native-ui-lib";
import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import { Text } from "react-native-ui-lib";
import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
interface EventCalendarProps {
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
}
const getTotalMinutes = () => {
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
const todaysDate = new Date();
const todaysDate = new Date();
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event});
setEventForEdit(event);
} else {
setMode("day");
setSelectedDate(event.start);
}
},
[setEditVisible, setEventForEdit, mode]
);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
},
[setSelectedDate]
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek})
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear()
);
}, []);
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]);
const dateStyle = useMemo(() => {
if (mode === "week") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
}, [selectedDate, mode]);
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
} else {
return {};
}
}, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => {
const startTime = Date.now(); // Start timer
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const filteredEvents = events?.filter(event =>
event.start && event.end &&
isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset)
}) &&
isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset)
})
) ?? [];
const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split('T')[0];
acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({
...event,
overlapPosition: false,
overlapCount: 0
});
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
return acc;
}, {} as Record<string, CalendarEvent[]>);
const endTime = Date.now();
console.log("memoizedEvents computation time:", endTime - startTime, "ms");
return {enrichedEvents, filteredEvents};
}, [events, selectedDate, mode]);
const renderCustomDateForMonth = (date: Date) => {
const circleStyle = useMemo<ViewStyle>(
() => ({
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}),
[]
);
const defaultStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
}),
[circleStyle]
);
const currentDateStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
backgroundColor: "#4184f2",
}),
[circleStyle]
);
const renderDate = useCallback(
(date: Date) => {
const isCurrentDate = isSameDate(todaysDate, date);
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return (
<View style={{alignItems: "center"}}>
<View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}>
{date.getDate()}
</Text>
</View>
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle] // dependencies
);
return renderDate(date);
};
useEffect(() => {
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
if (isLoading) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({ event });
setEventForEdit(event);
} else {
setMode("day");
setSelectedDate(event.start);
}
},
[setEditVisible, setEventForEdit, mode]
);
// console.log(enrichedEvents, filteredEvents)
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
return (
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
mode={mode}
enableEnrichedEvents={true}
sortedMonthView
// enrichedEventsByDate={enrichedEvents}
events={filteredEvents}
// eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={todaysDate}
date={selectedDate}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
theme={{
palette: {
nowIndicator: profileData?.eventColor || "#fd1575",
gray: {
"100": "#e8eaed",
"200": "#e8eaed",
"500": "#b7b7b7",
"800": "#919191",
},
},
typography: {
fontFamily: "PlusJakartaSans_500Medium",
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
xl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
moreLabel: {},
xs: {fontSize: 10},
},
}}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"}
showAdjacentMonths
hourStyle={styles.hourStyle}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>
);
const handlePressDayHeader = useCallback(
(date: Date) => {
setIsAllDay(true);
console.log(isAllDay);
setSelectedNewEndDate(date);
setEditVisible(true);
},
[setSelectedNewEndDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
},
[setSelectedDate]
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
console.log({
memoizedWeekStartsOn,
profileData: profileData?.firstDayOfWeek,
});
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear()
);
}, []);
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]);
const dateStyle = useMemo(() => {
if (mode === "week") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
}, [selectedDate, mode]);
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
} else {
return {};
}
}, [mode]);
const { enrichedEvents, filteredEvents } = useMemo(() => {
const startTime = Date.now(); // Start timer
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const filteredEvents =
events?.filter(
(event) =>
event.start &&
event.end &&
isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
}) &&
isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset),
})
) ?? [];
const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split("T")[0];
acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({
...event,
overlapPosition: false,
overlapCount: 0,
});
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
return acc;
}, {} as Record<string, CalendarEvent[]>);
const endTime = Date.now();
console.log(
"memoizedEvents computation time:",
endTime - startTime,
"ms"
);
return { enrichedEvents, filteredEvents };
}, [events, selectedDate, mode]);
const renderCustomDateForMonth = (date: Date) => {
const circleStyle = useMemo<ViewStyle>(
() => ({
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}),
[]
);
const defaultStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
}),
[circleStyle]
);
const currentDateStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
backgroundColor: "#4184f2",
}),
[circleStyle]
);
const renderDate = useCallback(
(date: Date) => {
const isCurrentDate = isSameDate(todaysDate, date);
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return (
<View style={{ alignItems: "center" }}>
<View style={appliedStyle}>
<Text style={{ color: isCurrentDate ? "white" : "black" }}>
{date.getDate()}
</Text>
</View>
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle] // dependencies
);
return renderDate(date);
};
useEffect(() => {
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
if (isLoading) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
// console.log(enrichedEvents, filteredEvents)
return (
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
mode={mode}
enableEnrichedEvents={true}
sortedMonthView
// enrichedEventsByDate={enrichedEvents}
events={filteredEvents}
// eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={todaysDate}
date={selectedDate}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
theme={{
palette: {
nowIndicator: profileData?.eventColor || "#fd1575",
gray: {
"100": "#e8eaed",
"200": "#e8eaed",
"500": "#b7b7b7",
"800": "#919191",
},
},
typography: {
fontFamily: "PlusJakartaSans_500Medium",
sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
xl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
moreLabel: {},
xs: { fontSize: 10 },
},
}}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"}
showAdjacentMonths
hourStyle={styles.hourStyle}
onPressDateHeader={handlePressDayHeader}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>
);
}
);
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
height: 13,
},
weekModeHeader: {},
monthModeHeader: {},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
otherDayHeader: {
backgroundColor: "transparent",
color: "#919191",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
hourStyle: {
color: "#5f6368",
fontSize: 12,
fontFamily: "Manrope_500Medium",
},
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
height: 13,
},
weekModeHeader: {},
monthModeHeader: {},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
otherDayHeader: {
backgroundColor: "transparent",
color: "#919191",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
hourStyle: {
color: "#5f6368",
fontSize: 12,
fontFamily: "Manrope_500Medium",
},
});

1348
components/pages/calendar/ManuallyAddEventModal.tsx
View File

File diff suppressed because it is too large Load Diff

1
components/pages/calendar/atoms.ts
View File

@ -2,6 +2,7 @@ import { atom } from "jotai";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
export const editVisibleAtom = atom<boolean>(false);
export const isAllDayAtom = atom<boolean>(false);
export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
export const isFamilyViewAtom = atom<boolean>(false);
export const modeAtom = atom<"week" | "month" | "day">("week");

78
components/pages/settings/CalendarSettingsPage.tsx
View File

@ -1,4 +1,4 @@
import {AntDesign, Ionicons} from "@expo/vector-icons";
import {Ionicons} from "@expo/vector-icons";
import React, {useCallback, useState} from "react";
import {Button, Checkbox, Text, View} from "react-native-ui-lib";
import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
@ -10,7 +10,6 @@ import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
import {colorMap} from "@/constants/colorMap";
import {useSetAtom} from "jotai";
import {settingsPageIndex} from "../calendar/atoms";
import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
@ -53,13 +52,6 @@ const CalendarSettingsPage = () => {
setModalVisible(false);
};
const [selectedColor, setSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
profileData?.eventColor ?? colorMap.pink
);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: clearToken} = useClearTokens();
@ -78,22 +70,6 @@ const CalendarSettingsPage = () => {
fetchAndSaveAppleEvents
} = useCalSync()
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),
[]
);
const debouncedUpdateFirstDayOfWeek = useCallback(
debounce(async (firstDayOfWeek: string) => {
try {
@ -114,12 +90,6 @@ const CalendarSettingsPage = () => {
debouncedUpdateFirstDayOfWeek(firstDayOfWeek);
};
const handleChangeColor = (color: string) => {
setPreviousSelectedColor(selectedColor);
setSelectedColor(color);
debouncedUpdateUserData(color);
};
return (
<ScrollView>
<TouchableOpacity onPress={() => setPageIndex(0)}>
@ -140,52 +110,6 @@ const CalendarSettingsPage = () => {
</TouchableOpacity>
<View marginH-30 marginB-30>
<Text style={styles.subTitle}>Calendar settings</Text>
<View style={styles.card}>
<Text style={styles.cardTitle} marginB-14>
Event Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.orange)}
>
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.card}>
<Text style={styles.cardTitle}>Weekly Start Date</Text>
<View row marginV-5 marginT-20>

4
components/pages/settings/user_components/DeleteProfileDialogs.tsx
View File

@ -25,7 +25,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
containerStyle={styles.dialog}
>
<View centerH>
<Feather name="alert-triangle" size={70} color="#FF5449" />
<Feather name="alert-triangle" size={70} color="#ff1637" />
</View>
<Text center style={styles.title}>
Are you sure?
@ -101,7 +101,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
// Empty stylesheet for future styles
const styles = StyleSheet.create({
confirmBtn: {
backgroundColor: "#FF5449",
backgroundColor: "#ff1637",
},
cancelBtn: {
backgroundColor: "white",

6
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -178,7 +178,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
user={member}
/>
</View>
</Card>
@ -220,7 +220,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
user={member}
/>
</Card>
))}
@ -259,7 +259,7 @@ const MyGroup: React.FC<MyGroupProps> = ({onNewUserClick, setOnNewUserClick}) =>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
user={member}
/>
</Card>
))}

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

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from "react";
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";
@ -20,6 +20,7 @@ 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";
const MyProfile = () => {
const { user, profileData } = useAuthContext();
@ -34,6 +35,13 @@ const MyProfile = () => {
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 = () => {
@ -102,6 +110,28 @@ const MyProfile = () => {
? 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}>
@ -125,8 +155,8 @@ const MyProfile = () => {
}}
>
<Text style={styles.pfpTxt}>
{user?.email?.at(0)}
{user?.email?.at(1)}
{profileData?.firstName?.at(0)}
{profileData?.lastName?.at(0)}
</Text>
</View>
)}
@ -215,9 +245,55 @@ const MyProfile = () => {
</Picker>
</View>
</View>
<View style={styles.card}>
<Text style={styles.cardTitle} marginB-14>
Color Preference
</Text>
<View row spread>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
{selectedColor == colorMap.pink && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.orange)}
>
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
{selectedColor == colorMap.orange && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
<View style={styles.colorBox} backgroundColor={colorMap.green}>
{selectedColor == colorMap.green && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
{selectedColor == colorMap.teal && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => handleChangeColor(colorMap.purple)}
>
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
{selectedColor == colorMap.purple && (
<AntDesign name="check" size={30} color="white"/>
)}
</View>
</TouchableOpacity>
</View>
</View>
<Button
size="large"
backgroundColor="#FF5449"
backgroundColor="#ff1637"
label="Delete Profile"
style={{ marginTop: 10 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
@ -229,7 +305,9 @@ const MyProfile = () => {
}}
visible={showDeleteDialog}
onDismiss={handleHideDeleteDialog}
onConfirm={() => {console.log('delete account here')}}
onConfirm={() => {
console.log("delete account here");
}}
/>
</ScrollView>
);
@ -246,6 +324,17 @@ const timeZoneItems = Object.keys(tz.zones)
));
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",

111
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -1,51 +1,78 @@
import React from 'react';
import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib';
import QRCode from 'react-native-qrcode-svg';
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";
import React from "react";
import {
Button,
Card,
Dialog,
Text,
TouchableOpacity,
} from "react-native-ui-lib";
import QRCode from "react-native-qrcode-svg";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { StyleSheet } from "react-native";
import { ProfileType } from "@/contexts/AuthContext";
const UserMenu = ({
userId,
showQRCodeDialog,
setShowQRCodeDialog
}: {
userId: string,
showQRCodeDialog: boolean,
setShowQRCodeDialog: (value: string | boolean) => void
user,
showQRCodeDialog,
setShowQRCodeDialog,
}: {
user: UserProfile;
showQRCodeDialog: boolean;
setShowQRCodeDialog: (value: string | boolean) => void;
}) => {
const handleShowQRCode = () => {
setShowQRCodeDialog(userId);
};
const handleShowQRCode = () => {
setShowQRCodeDialog(user.uid!);
};
return (
<>
<TouchableOpacity onPress={handleShowQRCode}>
<Ionicons name="qr-code-outline" size={24} color="black" />
</TouchableOpacity>
return (
<>
<TouchableOpacity
onPress={handleShowQRCode}
>
<Ionicons name="qr-code-outline" size={24} color="black"/>
</TouchableOpacity>
<Dialog
visible={showQRCodeDialog}
onDismiss={() => setShowQRCodeDialog(false)}
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text center marginB-10 style={{fontSize: 16, maxWidth: "80%"}}>Ask your family to download the app
and then scan the
QR Code to join the family group:
</Text>
<QRCode value={userId} size={150}/>
<Button
marginT-20
label="Close"
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
</Dialog>
</>
);
<Dialog
visible={showQRCodeDialog}
onDismiss={() => setShowQRCodeDialog(false)}
panDirection={PanningDirectionsEnum.DOWN}
>
<Card padding-20 center>
<Text
center
marginT-15
marginH-15
marginB-25
style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
>
{user.userType !== ProfileType.FAMILY_DEVICE
? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
: "Open Cally on the family device and scan the code to link it to your family group"}
</Text>
<QRCode value={user.uid!} size={150} />
<Button
marginT-20
style={styles.button}
label="Close"
labelStyle={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 15,
}}
onPress={() => setShowQRCodeDialog(false)}
/>
</Card>
</Dialog>
</>
);
};
const styles = StyleSheet.create({
button: {
backgroundColor: "#d9d9d9",
width: 117,
height: 47,
},
});
export default UserMenu;

9
components/pages/todos/AddChoreDialog.tsx
View File

@ -25,6 +25,7 @@ import CalendarIcon from "@/assets/svgs/CalendarIcon";
import ClockOIcon from "@/assets/svgs/ClockOIcon";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import RepeatFreq from "./RepeatFreq";
import {useAuthContext} from "@/contexts/AuthContext";
interface IAddChoreDialog {
isVisible: boolean;
@ -44,6 +45,7 @@ const defaultTodo = {
};
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const {user} = useAuthContext()
const {addToDo, updateToDo} = useToDosContext();
const [todo, setTodo] = useState<IToDo>(
addChoreDialogProps.selectedTodo ?? defaultTodo
@ -57,6 +59,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const titleRef = useRef<TextFieldRef>(null)
const {data: members} = useGetFamilyMembers();
let sortedMembers = members?.sort((a, b) => {
if (a.uid === user?.uid) return -1;
if (b.uid === user?.uid) return 1;
return 0;
})
const handleClose = () => {
setTodo(defaultTodo);
@ -272,7 +279,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
/>
)}
>
{members?.map((member) => (
{sortedMembers?.map((member) => (
<Picker.Item
key={member.uid}
label={member?.firstName + " " + member?.lastName}

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

@ -111,7 +111,7 @@ const ToDoItem = (props: {
height={0.7}
width={"100%"}
style={{
backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
backgroundColor: "#e7e7e7",
}}
centerH
/>

33
components/shared/HeaderTemplate.tsx
View File

@ -9,7 +9,7 @@ import { useGetChildrenByParentId } from "@/hooks/firebase/useGetChildrenByParen
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import { child } from "@react-native-firebase/storage";
import CachedImage from 'expo-cached-image'
import CachedImage from "expo-cached-image";
const HeaderTemplate = (props: {
message: string;
@ -71,7 +71,10 @@ const HeaderTemplate = (props: {
useEffect(() => {
if (members) {
const childrenMembers = members.filter(
(member) => member.userType === ProfileType.CHILD
(member) =>
member.userType === ProfileType.CHILD ||
member.userType === ProfileType.CAREGIVER ||
member.userType === ProfileType.PARENT
);
setChildren(childrenMembers);
}
@ -81,10 +84,15 @@ const HeaderTemplate = (props: {
<View row centerV marginV-15 style={styles.bottomMarg}>
{profileData?.pfp ? (
<View>
<CachedImage source={{ uri: profileData.pfp, }} style={styles.pfp} cacheKey={profileData.pfp}/>
<CachedImage
source={{ uri: profileData.pfp }}
style={styles.pfp}
cacheKey={profileData.pfp}
/>
{isFamilyView && props.isCalendar && (
<View style={styles.childrenPfpArr} row>
{children?.slice(0, 3).map((child, index) => {
const bgColor: string = child.eventColor || colorMap.pink;
return child.pfp ? (
<Image
source={{ uri: child.pfp }}
@ -92,7 +100,10 @@ const HeaderTemplate = (props: {
/>
) : (
<View
style={[styles.childrenPfp, { left: index * 19 }]}
style={[
styles.childrenPfp,
{ left: index * 19, backgroundColor: bgColor },
]}
center
>
<Text style={{ color: "white" }}>
@ -104,7 +115,15 @@ const HeaderTemplate = (props: {
})}
{children?.length > 3 && (
<View style={[styles.childrenPfp, { left: 3 * 19 }]} center>
<Text style={{ color: "white", fontFamily: "Manrope_600SemiBold", fontSize: 12 }}>+{children.length - 3}</Text>
<Text
style={{
color: "white",
fontFamily: "Manrope_600SemiBold",
fontSize: 12,
}}
>
+{children.length - 3}
</Text>
</View>
)}
</View>
@ -113,8 +132,8 @@ const HeaderTemplate = (props: {
) : (
<View style={styles.pfp} center>
<Text style={styles.pfpTxt}>
{user?.email?.at(0)}
{user?.email?.at(1)}
{profileData?.firstName?.at(0)}
{profileData?.lastName?.at(0)}
</Text>
</View>
)}

4
components/shared/PointsSlider.tsx
View File

@ -13,7 +13,7 @@ const PointsSlider = (props: {
value={props.points}
onValueChange={(value) => props.setPoints(value)}
minimumValue={0}
step={10}
step={5}
thumbTintColor="white"
minimumTrackTintColor="#91d5ff"
thumbStyle={{borderWidth: 3, borderColor: '#91d5ff'}}
@ -21,7 +21,7 @@ const PointsSlider = (props: {
/>
<View row spread>
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
<Text style={{fontSize: 13, color: '#858585'}}>50</Text>
<Text style={{fontSize: 13, color: '#858585', marginLeft: 15}}>50</Text>
<Text style={{fontSize: 13, color: '#858585'}}>100</Text>
</View>
</View>

3
hooks/firebase/useCreateTodo.ts
View File

@ -61,9 +61,8 @@ export const useCreateTodo = () => {
dates.push(newDate);
});
// TODO: for the next 52 weeks
let index = 1;
for (let i = 0; i < 4; i++) {
for (let i = 0; i < 52; i++) {
dates?.forEach((dateToAdd) => {
index ++;
let newTodoDate = addWeeks(dateToAdd, i);

2
hooks/firebase/useUpdateTodo.ts
View File

@ -73,7 +73,7 @@ export const useUpdateTodo = () => {
dates.push(newDate);
});
let todosToAddCycles = 4;
let todosToAddCycles = 52;
if (firstTodo?.repeatType === REPEAT_TYPE.EVERY_WEEK) {
todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
}