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

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

@ -1,19 +1,20 @@
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,
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;
@ -27,13 +28,14 @@ const getTotalMinutes = () => {
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@ -45,7 +47,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event});
console.log({ event });
setEventForEdit(event);
} else {
setMode("day");
@ -67,6 +69,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handlePressDayHeader = useCallback(
(date: Date) => {
setIsAllDay(true);
console.log(isAllDay);
setSelectedNewEndDate(date);
setEditVisible(true);
},
[setSelectedNewEndDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
@ -75,7 +87,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[]
);
@ -84,7 +96,10 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[profileData]
);
console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek})
console.log({
memoizedWeekStartsOn,
profileData: profileData?.firstDayOfWeek,
});
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
@ -117,32 +132,34 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}
}, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => {
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 &&
const filteredEvents =
events?.filter(
(event) =>
event.start &&
event.end &&
isWithinInterval(event.start, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset)
end: addDays(selectedDate, endOffset),
}) &&
isWithinInterval(event.end, {
start: subDays(selectedDate, startOffset),
end: addDays(selectedDate, endOffset)
end: addDays(selectedDate, endOffset),
})
) ?? [];
const enrichedEvents = filteredEvents.reduce((acc, event) => {
const dateKey = event.start.toISOString().split('T')[0];
const dateKey = event.start.toISOString().split("T")[0];
acc[dateKey] = acc[dateKey] || [];
acc[dateKey].push({
...event,
overlapPosition: false,
overlapCount: 0
overlapCount: 0,
});
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
@ -151,9 +168,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, {} as Record<string, CalendarEvent[]>);
const endTime = Date.now();
console.log("memoizedEvents computation time:", endTime - startTime, "ms");
console.log(
"memoizedEvents computation time:",
endTime - startTime,
"ms"
);
return {enrichedEvents, filteredEvents};
return { enrichedEvents, filteredEvents };
}, [events, selectedDate, mode]);
const renderCustomDateForMonth = (date: Date) => {
@ -189,9 +210,9 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return (
<View style={{alignItems: "center"}}>
<View style={{ alignItems: "center" }}>
<View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}>
<Text style={{ color: isCurrentDate ? "white" : "black" }}>
{date.getDate()}
</Text>
</View>
@ -211,7 +232,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
if (isLoading) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
@ -249,19 +270,20 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
},
typography: {
fontFamily: "PlusJakartaSans_500Medium",
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
xl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
},
moreLabel: {},
xs: {fontSize: 10},
xs: { fontSize: 10 },
},
}}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"}
showAdjacentMonths
hourStyle={styles.hourStyle}
onPressDateHeader={handlePressDayHeader}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>

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

@ -14,36 +14,40 @@ import {
TouchableOpacity,
View,
} from "react-native-ui-lib";
import {ScrollView} from "react-native-gesture-handler";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {useEffect, useRef, useState} from "react";
import {AntDesign, Feather, Ionicons} from "@expo/vector-icons";
import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types";
import {useCreateEvent} from "@/hooks/firebase/useCreateEvent";
import {EventData} from "@/hooks/firebase/types/eventData";
import {addHours} from "date-fns";
import { ScrollView } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useRef, useState } from "react";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types";
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
import { EventData } from "@/hooks/firebase/types/eventData";
import { addHours } from "date-fns";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {StyleSheet} from "react-native";
import { StyleSheet } from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useAtom} from "jotai";
import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import { useAtom, useAtomValue } from "jotai";
import {
eventForEditAtom,
selectedNewEventDateAtom,
isAllDayAtom,
} from "@/components/pages/calendar/atoms";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog";
import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
const daysOfWeek = [
{label: "Monday", value: "monday"},
{label: "Tuesday", value: "tuesday"},
{label: "Wednesday", value: "wednesday"},
{label: "Thursday", value: "thursday"},
{label: "Friday", value: "friday"},
{label: "Saturday", value: "saturday"},
{label: "Sunday", value: "sunday"},
{ label: "Monday", value: "monday" },
{ label: "Tuesday", value: "tuesday" },
{ label: "Wednesday", value: "wednesday" },
{ label: "Thursday", value: "thursday" },
{ label: "Friday", value: "friday" },
{ label: "Saturday", value: "saturday" },
{ label: "Sunday", value: "sunday" },
];
export const ManuallyAddEventModal = () => {
@ -53,10 +57,11 @@ export const ManuallyAddEventModal = () => {
selectedNewEventDateAtom
);
const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
const [allDayAtom, setAllDayAtom] = useAtom(isAllDayAtom);
const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent()
const { mutateAsync: deleteEvent, isLoading: isDeleting } = useDeleteEvent();
const {show, close, initialDate} = {
const { show, close, initialDate } = {
show: !!selectedNewEventDate || !!editEvent,
close: () => {
setDeleteModalVisible(false);
@ -74,22 +79,51 @@ export const ManuallyAddEventModal = () => {
const [isPrivate, setIsPrivate] = useState<boolean>(
editEvent?.private || false
);
useEffect(() => {
console.log(allDayAtom);
return () => {
setAllDayAtom(false);
};
}, []);
const [startTime, setStartTime] = useState(() => {
const date = initialDate ?? new Date();
date.setSeconds(0, 0);
if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
return date;
});
const [endTime, setEndTime] = useState(() => {
if (editEvent?.end) {
const date = new Date(editEvent.end);
date.setSeconds(0, 0);
return date;
}
const date =
editEvent?.end ?? initialDate
? addHours(editEvent?.end ?? initialDate!, 1)
: addHours(new Date(), 1);
date.setSeconds(0, 0);
const baseDate = editEvent?.end ?? initialDate ?? new Date();
const date = new Date(baseDate);
if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date;
});
const [startDate, setStartDate] = useState(initialDate ?? new Date());
@ -101,35 +135,57 @@ export const ManuallyAddEventModal = () => {
);
const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent();
const {data: members} = useGetFamilyMembers(true);
const titleRef = useRef<TextFieldRef>(null)
const {
mutateAsync: createEvent,
isLoading: isAdding,
isError,
} = useCreateEvent();
const { data: members } = useGetFamilyMembers(true);
const titleRef = useRef<TextFieldRef>(null);
const isLoading = isDeleting || isAdding
const isLoading = isDeleting || isAdding;
useEffect(() => {
setTitle(editEvent?.title || "");
setDetails(editEvent?.notes || "");
setIsAllDay(editEvent?.allDay || false);
setIsPrivate(editEvent?.private || false);
setStartTime(() => {
const date = initialDate ?? new Date();
date.setSeconds(0, 0);
const date = new Date(initialDate ?? new Date());
const minutes = date.getMinutes();
date.setMinutes(0, 0, 0);
if (minutes >= 30) {
date.setHours(date.getHours() + 1);
}
return date;
});
setEndTime(() => {
if (editEvent?.end) {
const date = new Date(editEvent.end);
date.setSeconds(0, 0);
return date;
}
const date =
editEvent?.end ?? initialDate
? addHours(editEvent?.end ?? initialDate!, 1)
: addHours(new Date(), 1);
date.setSeconds(0, 0);
const baseDate = editEvent?.end ?? initialDate ?? new Date();
const date = new Date(baseDate);
if (
date.getMinutes() > 0 ||
date.getSeconds() > 0 ||
date.getMilliseconds() > 0
) {
date.setHours(date.getHours() + 1);
}
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
date.setHours(date.getHours() + 1);
return date;
});
setStartDate(initialDate ?? new Date());
setEndDate(editEvent?.end ?? initialDate ?? new Date());
setSelectedAttendees(editEvent?.participants ?? []);
@ -137,9 +193,9 @@ export const ManuallyAddEventModal = () => {
}, [editEvent, selectedNewEventDate]);
useEffect(() => {
if(show && !editEvent) {
if (show && !editEvent) {
setTimeout(() => {
titleRef?.current?.focus()
titleRef?.current?.focus();
}, 500);
}
}, [selectedNewEventDate]);
@ -160,8 +216,8 @@ export const ManuallyAddEventModal = () => {
};
const handleDeleteEvent = async () => {
await deleteEvent({eventId: `${editEvent?.id}`})
close()
await deleteEvent({ eventId: `${editEvent?.id}` });
close();
};
const hideDeleteEventModal = () => {
@ -246,7 +302,10 @@ export const ManuallyAddEventModal = () => {
onRequestClose={close}
transparent={false}
>
<LoaderScreen message={isDeleting ? "Deleting event..." : "Saving event..."} color={Colors.grey40}/>
<LoaderScreen
message={isDeleting ? "Deleting event..." : "Saving event..."}
color={Colors.grey40}
/>
</Modal>
);
}
@ -321,7 +380,7 @@ export const ManuallyAddEventModal = () => {
</Text>
</TouchableOpacity>
<View row center>
<DropModalIcon onPress={close}/>
<DropModalIcon onPress={close} />
</View>
<View flexS row gap-10>
<TouchableOpacity onPress={handleSave}>
@ -340,15 +399,14 @@ export const ManuallyAddEventModal = () => {
<Button
style={styles.topBtn}
marginL-5
iconSource={() => <BinIcon/>}
iconSource={() => <BinIcon />}
onPress={showDeleteEventModal}
/>
)}
</View>
</View>
{/*)}*/}
<ScrollView style={{minHeight: "85%"}}>
<ScrollView style={{ minHeight: "85%" }}>
<TextField
placeholder="Add event title"
ref={titleRef}
@ -357,16 +415,16 @@ export const ManuallyAddEventModal = () => {
setTitle(text);
}}
placeholderTextColor="#2d2d30"
style={{fontFamily: "Manrope_500Medium", fontSize: 22}}
style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
paddingT-15
paddingL-30
returnKeyType="next"
/>
<View style={styles.divider} marginT-8/>
<View style={styles.divider} marginT-8 />
<View marginL-30 centerV>
<View row spread marginB-10 centerV>
<View row>
<AntDesign name="clockcircleo" size={24} color="#919191"/>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
@ -389,7 +447,7 @@ export const ManuallyAddEventModal = () => {
</View>
<View row marginB-10 spread>
<View row centerV>
<Feather name="calendar" size={25} color="#919191"/>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={startDate}
onChange={(date) => {
@ -429,7 +487,7 @@ export const ManuallyAddEventModal = () => {
{!isAllDay && (
<View row marginB-10 spread>
<View row centerV>
<Feather name="calendar" size={25} color="#919191"/>
<Feather name="calendar" size={25} color="#919191" />
<DateTimePicker
value={endDate}
minimumDate={startDate}
@ -470,30 +528,30 @@ export const ManuallyAddEventModal = () => {
)}
</View>
<View style={styles.divider}/>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191"/>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text
style={{fontFamily: "Manrope_600SemiBold", fontSize: 18}}
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
marginL-10
>
Attendees
</Text>
<View flex-1/>
<View flex-1 />
<Picker
value={selectedAttendees}
onChange={(value) =>
setSelectedAttendees((value as string[]) ?? [])
}
style={{marginLeft: "auto"}}
style={{ marginLeft: "auto" }}
mode={PickerModes.MULTI}
renderInput={() => (
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/>
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
@ -528,10 +586,10 @@ export const ManuallyAddEventModal = () => {
/>
</View>
<View style={styles.divider}/>
<View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV>
<View row centerV>
<ClockIcon/>
<ClockIcon />
<Text
style={{
fontFamily: "Manrope_600SemiBold",
@ -547,7 +605,7 @@ export const ManuallyAddEventModal = () => {
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/>
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
@ -556,16 +614,16 @@ export const ManuallyAddEventModal = () => {
borderColor: "#ea156c",
borderWidth: 1,
}}
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
color="#ea156c"
label="Set Reminder"
/>
</View>
</View>
<View style={styles.divider}/>
<View style={styles.divider} />
<View marginH-30 marginB-0 row spread centerV>
<View row center>
<LockIcon/>
<LockIcon />
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
@ -587,11 +645,11 @@ export const ManuallyAddEventModal = () => {
/>
</View>
</View>
<View style={styles.divider}/>
<View style={styles.divider} />
<View marginH-30 marginB-0 spread centerV flex-1>
<TouchableOpacity onPress={() => detailsRef?.current?.focus()}>
<View row centerV>
<MenuIcon/>
<MenuIcon />
<Text
style={{
fontFamily: "PlusJakartaSans_500Medium",
@ -612,7 +670,7 @@ export const ManuallyAddEventModal = () => {
multiline
numberOfLines={10}
marginT-10
style={{flex: 1, minHeight: 180}}
style={{ flex: 1, minHeight: 180 }}
/>
</View>
</ScrollView>
@ -622,12 +680,12 @@ export const ManuallyAddEventModal = () => {
marginB-30
label="Create event from image"
text70
style={{height: 47}}
labelStyle={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 15}}
style={{ height: 47 }}
labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
backgroundColor="#05a8b6"
iconSource={() => (
<View marginR-5>
<CameraIcon color="white"/>
<CameraIcon color="white" />
</View>
)}
/>
@ -645,7 +703,7 @@ export const ManuallyAddEventModal = () => {
};
const styles = StyleSheet.create({
divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
gradient: {
height: "25%",
position: "absolute",

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");

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",

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

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

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
/>