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

fixed some calendar bugs

Browse Source
This commit is contained in:
ivic00
2024-11-04 20:58:18 +01:00
parent f398109d69
commit 6dc81ae653
6 changed files with 1023 additions and 942 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 React, { useCallback, useEffect, useMemo, useState } from "react";
import {Calendar} from "react-native-big-calendar"; import { Calendar } from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native"; import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents"; import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai"; import { useAtom, useSetAtom } from "jotai";
import { import {
editVisibleAtom, editVisibleAtom,
eventForEditAtom, eventForEditAtom,
modeAtom, isAllDayAtom,
selectedDateAtom, modeAtom,
selectedNewEventDateAtom, selectedDateAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms"; } from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext"; import { useAuthContext } from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces"; import { CalendarEvent } from "@/components/pages/calendar/interfaces";
import {Text} from "react-native-ui-lib"; import { Text } from "react-native-ui-lib";
import {addDays, compareAsc, isWithinInterval, subDays} from "date-fns"; import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns";
interface EventCalendarProps { interface EventCalendarProps {
calendarHeight: number; calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number; calendarWidth: number;
} }
const getTotalMinutes = () => { const getTotalMinutes = () => {
const date = new Date(); const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200); return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
}; };
export const EventCalendar: React.FC<EventCalendarProps> = React.memo( export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => { ({ calendarHeight }) => {
const {data: events, isLoading} = useGetEvents(); const { data: events, isLoading } = useGetEvents();
const {profileData} = useAuthContext(); const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom); const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom); const setEditVisible = useSetAtom(editVisibleAtom);
const setEventForEdit = useSetAtom(eventForEditAtom); const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom); 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( const handlePressEvent = useCallback(
(event: CalendarEvent) => { (event: CalendarEvent) => {
if (mode === "day" || mode === "week") { if (mode === "day" || mode === "week") {
setEditVisible(true); setEditVisible(true);
console.log({event}); console.log({ event });
setEventForEdit(event); setEventForEdit(event);
} else { } else {
setMode("day"); setMode("day");
setSelectedDate(event.start); 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>
);
} }
},
[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 ( const handlePressDayHeader = useCallback(
<Calendar (date: Date) => {
bodyContainerStyle={styles.calHeader} setIsAllDay(true);
swipeEnabled console.log(isAllDay);
mode={mode} setSelectedNewEndDate(date);
enableEnrichedEvents={true} setEditVisible(true);
sortedMonthView },
// enrichedEventsByDate={enrichedEvents} [setSelectedNewEndDate]
events={filteredEvents} );
// eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent} const handleSwipeEnd = useCallback(
weekStartsOn={memoizedWeekStartsOn} (date: Date) => {
height={calendarHeight} setSelectedDate(date);
activeDate={todaysDate} },
date={selectedDate} [setSelectedDate]
onPressCell={handlePressCell} );
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd} const memoizedEventCellStyle = useCallback(
scrollOffsetMinutes={offsetMinutes} (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
theme={{ []
palette: { );
nowIndicator: profileData?.eventColor || "#fd1575",
gray: { const memoizedWeekStartsOn = useMemo(
"100": "#e8eaed", () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
"200": "#e8eaed", [profileData]
"500": "#b7b7b7", );
"800": "#919191",
}, console.log({
}, memoizedWeekStartsOn,
typography: { profileData: profileData?.firstDayOfWeek,
fontFamily: "PlusJakartaSans_500Medium", });
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
xl: { const isSameDate = useCallback((date1: Date, date2: Date) => {
fontFamily: "PlusJakartaSans_500Medium", return (
fontSize: 16, date1.getDate() === date2.getDate() &&
}, date1.getMonth() === date2.getMonth() &&
moreLabel: {}, date1.getFullYear() === date2.getFullYear()
xs: {fontSize: 10}, );
}, }, []);
}}
dayHeaderStyle={dateStyle} const dayHeaderColor = useMemo(() => {
dayHeaderHighlightColor={"white"} return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
showAdjacentMonths }, [selectedDate, mode]);
hourStyle={styles.hourStyle}
ampm const dateStyle = useMemo(() => {
// renderCustomDateForMonth={renderCustomDateForMonth} 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({ const styles = StyleSheet.create({
segmentslblStyle: { segmentslblStyle: {
fontSize: 12, fontSize: 12,
fontFamily: "Manrope_600SemiBold", fontFamily: "Manrope_600SemiBold",
}, },
calHeader: { calHeader: {
borderWidth: 0, borderWidth: 0,
}, },
dayModeHeader: { dayModeHeader: {
alignSelf: "flex-start", alignSelf: "flex-start",
justifyContent: "space-between", justifyContent: "space-between",
alignContent: "center", alignContent: "center",
width: 38, width: 38,
right: 42, right: 42,
height: 13, height: 13,
}, },
weekModeHeader: {}, weekModeHeader: {},
monthModeHeader: {}, monthModeHeader: {},
loadingContainer: { loadingContainer: {
flex: 1, flex: 1,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
dayHeader: { dayHeader: {
backgroundColor: "#4184f2", backgroundColor: "#4184f2",
aspectRatio: 1, aspectRatio: 1,
borderRadius: 100, borderRadius: 100,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
otherDayHeader: { otherDayHeader: {
backgroundColor: "transparent", backgroundColor: "transparent",
color: "#919191", color: "#919191",
aspectRatio: 1, aspectRatio: 1,
borderRadius: 100, borderRadius: 100,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
hourStyle: { hourStyle: {
color: "#5f6368", color: "#5f6368",
fontSize: 12, fontSize: 12,
fontFamily: "Manrope_500Medium", 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"; import { CalendarEvent } from "@/components/pages/calendar/interfaces";
export const editVisibleAtom = atom<boolean>(false); export const editVisibleAtom = atom<boolean>(false);
export const isAllDayAtom = atom<boolean>(false);
export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined); export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
export const isFamilyViewAtom = atom<boolean>(false); export const isFamilyViewAtom = atom<boolean>(false);
export const modeAtom = atom<"week" | "month" | "day">("week"); export const modeAtom = atom<"week" | "month" | "day">("week");

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

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

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

@ -217,7 +217,7 @@ const MyProfile = () => {
</View> </View>
<Button <Button
size="large" size="large"
backgroundColor="#FF5449" backgroundColor="#ff1637"
label="Delete Profile" label="Delete Profile"
style={{ marginTop: 10 }} style={{ marginTop: 10 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }} labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}

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

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