ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2026-10-23 09:27:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Syncing rework

Browse Source
This commit is contained in:
Milan Paunovic
2024-11-26 21:13:54 +01:00
parent 5cfdc84055
commit f2af60111b
14 changed files with 960 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/pages/calendar/CalendarHeader.tsx
+47 -6
View File
@@ -1,21 +1,34 @@
import React, {memo} from "react";
import {Button, Picker, PickerModes, SegmentedControl, Text, View,} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from "./constants";
import {months} from "./constants";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {format, isSameDay} from "date-fns";
import * as Device from "expo-device";
import {Mode} from "react-native-big-calendar";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const isTablet = Device.deviceType === Device.DeviceType.TABLET;
const segments = isTablet
? [{label: "D"}, {label: "W"}, {label: "M"}] // Tablet segments
: [{label: "D"}, {label: "3D"}, {label: "M"}]; // Phone segments
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
let selectedMode: Mode;
if (isTablet) {
selectedMode = ["day", "week", "month"][index] as Mode;
} else {
selectedMode = ["day", "3days", "month"][index] as Mode;
}
if (selectedMode) {
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month");
setMode(selectedMode as "day" | "week" | "month" | "3days");
}, 150);
}
};
@@ -31,6 +44,34 @@ export const CalendarHeader = memo(() => {
const isSelectedDateToday = isSameDay(selectedDate, new Date());
const getInitialIndex = () => {
if (isTablet) {
// Tablet index mapping
switch (mode) {
case "day":
return 0;
case "week":
return 1;
case "month":
return 2;
default:
return 1; // Default to week view for tablets
}
} else {
// Phone index mapping
switch (mode) {
case "day":
return 0;
case "3days":
return 1;
case "month":
return 2;
default:
return 1; // Default to 3day view for phones
}
}
};
return (
<View
style={{
@@ -96,7 +137,7 @@ export const CalendarHeader = memo(() => {
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
segments={segments}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
@@ -105,7 +146,7 @@ export const CalendarHeader = memo(() => {
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
initialIndex={getInitialIndex()}
/>
</View>
</View>
@@ -118,4 +159,4 @@ const styles = StyleSheet.create({
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
});
});
components/pages/calendar/EventCalendar.tsx
+12 -17
View File
@@ -33,7 +33,7 @@ const getTotalMinutes = () => {
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({calendarHeight}) => {
const {data: events, isLoading, refetch} = useGetEvents();
const {data: events, isLoading} = useGetEvents();
const {profileData, user} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
@@ -52,9 +52,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
if (mode === "day" || mode === "week" || mode === "3days") {
setEditVisible(true);
// console.log({event});
setEventForEdit(event);
} else {
setMode("day");
@@ -66,7 +65,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
if (mode === "day" || mode === "week" || mode === "3days") {
setSelectedNewEndDate(date);
} else {
setMode("day");
@@ -83,9 +82,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
setSelectedNewEndDate(date);
setEditVisible(true);
}
if (mode === 'week') {
if (mode === 'week' || mode === '3days') {
setSelectedDate(date)
setMode("day")
}
},
@@ -102,7 +100,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => {
let eventColor = event.eventColor;
if (!isFamilyView && (event.attendees?.includes(user?.uid) || event.creatorId === user?.uid)) {
if (!isFamilyView && (event.attendees?.includes(user?.uid!) || event.creatorId! === user?.uid)) {
eventColor = profileData?.eventColor ?? colorMap.teal;
}
@@ -129,7 +127,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, [selectedDate, mode]);
const dateStyle = useMemo(() => {
if (mode === "week") return undefined;
if (mode === "week" || mode === "3days") return undefined;
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
@@ -138,7 +136,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week") {
} else if (mode === "week" || mode === "3days") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
@@ -146,12 +144,11 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
return {};
}
}, [mode]);
const {enrichedEvents, filteredEvents} = useMemo(() => {
const startTime = Date.now(); // Start timer
const startTime = Date.now();
const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
const startOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
const endOffset = mode === "month" ? 40 : (mode === "week" || mode === "3days") ? 10 : 1;
const filteredEvents =
events?.filter(
@@ -177,7 +174,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
overlapCount: 0,
});
acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
acc[dateKey].sort((a: { start: any; }, b: { start: any; }) => compareAsc(a.start, b.start));
return acc;
}, {} as Record<string, CalendarEvent[]>);
@@ -230,7 +227,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle] // dependencies
[todaysDate, currentDateStyle, defaultStyle]
);
return renderDate(date);
@@ -249,8 +246,6 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
);
}
// console.log(enrichedEvents, filteredEvents)
return (
<>
{isSyncing && (
components/pages/calendar/atoms.ts
+8 -2
View File
@@ -1,15 +1,21 @@
import { atom } from "jotai";
import * as Device from "expo-device";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
const getDefaultMode = () => {
const isTablet = Device.deviceType === Device.DeviceType.TABLET;
return isTablet ? "week" : "3days";
};
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");
export const modeAtom = atom<"week" | "month" | "day" | "3days">(getDefaultMode());
export const selectedDateAtom = atom<Date>(new Date());
export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
export const settingsPageIndex = atom<number>(0);
export const userSettingsView = atom<boolean>(true);
export const toDosPageIndex = atom<number>(0);
export const refreshTriggerAtom = atom<boolean>(false);
export const refreshEnabledAtom = atom<boolean>(true);
export const refreshEnabledAtom = atom<boolean>(true);
components/pages/calendar/constants.ts
+3 -2
View File
@@ -1,7 +1,8 @@
export const modeMap = new Map([
[0, "day"],
[1, "week"],
[2, "month"],
[1, "3days"],
[2, "week"],
[3, "month"]
]);
export const months = [
components/pages/calendar/interfaces.ts
+2 -1
View File
@@ -1,8 +1,9 @@
export interface CalendarEvent {
id?: number | string; // Unique identifier for the event
user?: string;
creatorId?: string;
title: string; // Event title or name
description?: string; // Optional description for the event
description?: string; // Optiional description for the event
start: Date; // Start date and time of the event
end: Date; // End date and time of the event
location?: string; // Optional event location