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

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

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

@ -6,6 +6,7 @@ import {useAtom, useSetAtom} from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
isAllDayAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom,
@ -34,6 +35,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const [mode, setMode] = useAtom(modeAtom);
const setEditVisible = useSetAtom(editVisibleAtom);
const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
@ -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);
@ -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 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,7 +168,11 @@ 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 };
}, [events, selectedDate, mode]);
@ -262,6 +283,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
dayHeaderHighlightColor={"white"}
showAdjacentMonths
hourStyle={styles.hourStyle}
onPressDateHeader={handlePressDayHeader}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>

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

@ -29,8 +29,12 @@ 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 { 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";
@ -53,8 +57,9 @@ 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 } = {
show: !!selectedNewEventDate || !!editEvent,
@ -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 {
mutateAsync: createEvent,
isLoading: isAdding,
isError,
} = useCreateEvent();
const { data: members } = useGetFamilyMembers(true);
const titleRef = useRef<TextFieldRef>(null)
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 ?? []);
@ -139,7 +195,7 @@ export const ManuallyAddEventModal = () => {
useEffect(() => {
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>
);
}
@ -345,7 +404,6 @@ export const ManuallyAddEventModal = () => {
/>
)}
</View>
</View>
{/*)}*/}
<ScrollView style={{ minHeight: "85%" }}>

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