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

Fixes

Browse Source
This commit is contained in:
Milan Paunovic
2025-01-24 01:12:18 +01:00
parent 580104d052
commit 14be80c6f0
2 changed files with 444 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/pages/calendar/MonthCalendar.tsx
View File

@ -1,4 +1,4 @@
import React, {useCallback, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useMemo, useRef, useState, useTransition} from 'react';
import {
Dimensions,
StyleSheet,
@ -24,6 +24,7 @@ import {modeAtom, selectedDateAtom, selectedNewEventDateAtom} from "@/components
import {useAuthContext} from "@/contexts/AuthContext";
import {FlashList} from "@shopify/flash-list";
import * as Device from "expo-device";
import debounce from "debounce";
interface CalendarEvent {
id: string;
@ -38,7 +39,7 @@ interface CustomMonthCalendarProps {
}
const DAYS_OF_WEEK = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const MAX_VISIBLE_EVENTS = 3 ;
const MAX_VISIBLE_EVENTS = 3;
const CENTER_MONTH_INDEX = 24;
@ -131,8 +132,14 @@ const Day = React.memo(({
const visibleSingleDayEvents = singleDayEvents.slice(0, remainingSlots);
const totalHiddenEvents = singleDayEvents.length - remainingSlots;
// Calculate space needed for multi-day events
const maxMultiDayPosition = multiDayEvents.length > 0
? Math.max(...multiDayEvents.map(e => e.weekPosition || 0)) + 1
: 0;
const multiDayEventsHeight = maxMultiDayPosition * 16; // Height for multi-day events
return (
<View style={[styles.day, { width: dayWidth }]}>
<View style={[styles.day, {width: dayWidth}]}>
<TouchableOpacity
style={styles.dayContent}
onPress={() => onPress(date)}
@ -150,8 +157,8 @@ const Day = React.memo(({
</Text>
</View>
<View style={styles.eventsContainer}>
{/* Multi-day events first */}
{/* Multi-day events container */}
<View style={[styles.multiDayContainer, {height: multiDayEventsHeight}]}>
{multiDayEvents.map(event => (
<MultiDayEvent
key={event.id}
@ -162,8 +169,10 @@ const Day = React.memo(({
onPress={() => onPress(event.start)}
/>
))}
</View>
{/* Single-day events */}
{/* Single-day events container */}
<View style={[styles.singleDayContainer, {marginTop: multiDayEventsHeight}]}>
{visibleSingleDayEvents.map(event => (
<Event
key={event.id}
@ -171,8 +180,6 @@ const Day = React.memo(({
onPress={() => onPress(event.start)}
/>
))}
{/* Show total number of hidden events */}
{totalHiddenEvents > 0 && (
<Text style={styles.moreEvents}>
{totalHiddenEvents} More
@ -205,31 +212,11 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
const screenHeight = isTablet ? Dimensions.get('window').height * 0.89 : Dimensions.get('window').height;
const dayWidth = (screenWidth - 32) / 7;
const centerMonth = useRef(selectedDate);
const isScrolling = useRef(false);
const lastScrollUpdate = useRef<Date>(new Date());
const weekStartsOn = profileData?.firstDayOfWeek === "Sundays" ? 0 : 1;
const events = useMemo(() => {
if (!rawEvents?.length) return new Map();
if (!selectedDate) return new Map();
const eventMap = new Map();
rawEvents.forEach((event) => {
if (!event?.start || !event?.end) return;
const startDate = event.start instanceof Date ? event.start : new Date(event.start);
const endDate = event.end instanceof Date ? event.end : new Date(event.end);
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) return;
const dateStr = format(startDate, 'yyyy-MM-dd');
const existing = eventMap.get(dateStr) || [];
eventMap.set(dateStr, [...existing, event]);
});
return eventMap;
}, [rawEvents, selectedDate]);
const onDayPress = useCallback(
(date: Date) => {
date && setSelectedDate(date);
@ -305,7 +292,7 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
} else {
const dateStr = format(startDate, 'yyyy-MM-dd');
const existing = eventMap.get(dateStr) || [];
eventMap.set(dateStr, [...existing, { ...event, start: startDate, end: endDate }]);
eventMap.set(dateStr, [...existing, {...event, start: startDate, end: endDate}]);
}
});
@ -316,8 +303,8 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
return durationB - durationA;
});
return { eventMap, multiDayEvents };
}, [rawEvents, selectedDate]);
return {eventMap, multiDayEvents};
}, [rawEvents]);
const getMultiDayEventsForDay = useCallback((date: Date) => {
return processedEvents.multiDayEvents.filter(event => {
@ -352,7 +339,14 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
/>
), [getEventsForDay, getMultiDayEventsForDay, dayWidth, onDayPress, screenWidth, weekStartsOn]);
const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
const debouncedSetSelectedDate = useMemo(
() => debounce(setSelectedDate, 500),
[setSelectedDate]
);
const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
if (isScrolling.current) return;
const currentMonthIndex = Math.round(event.nativeEvent.contentOffset.x / screenWidth);
const currentMonth = monthsToRender[currentMonthIndex];
@ -362,6 +356,12 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
}
}, [screenWidth, setSelectedDate, monthsToRender]);
useEffect(() => {
return () => {
debouncedSetSelectedDate.clear();
};
}, [debouncedSetSelectedDate]);
return (
<View style={styles.container}>
<View style={styles.header}>
@ -378,7 +378,7 @@ export const MonthCalendar: React.FC<CustomMonthCalendarProps> = () => {
pagingEnabled
showsHorizontalScrollIndicator={false}
initialScrollIndex={CENTER_MONTH_INDEX}
onMomentumScrollEnd={onMomentumScrollEnd}
onScroll={onScroll}
removeClippedSubviews={true}
estimatedItemSize={screenWidth}
estimatedListSize={{width: screenWidth, height: screenHeight * 0.9}}
@ -501,7 +501,7 @@ const HEADER_HEIGHT = 40;
const styles = StyleSheet.create({
multiDayContainer: {
position: 'absolute',
top: 0,
top: 24,
left: 0,
right: 0,
zIndex: 1,

408
firebase/functions/index.js
View File

@ -1771,3 +1771,411 @@ exports.updateHouseholdTimestampOnEventUpdate = functions.firestore
throw error;
}
});
async function syncEventToGoogle(event, accessToken, refreshToken, creatorId) {
try {
console.log('[GOOGLE_SYNC] Starting to sync event to Google Calendar', {
eventId: event.id,
creatorId
});
let token = accessToken;
// Construct the Google Calendar event
const googleEvent = {
summary: event.title,
start: {
dateTime: event.allDay ? undefined : event.startDate.toISOString(),
date: event.allDay ? event.startDate.toISOString().split('T')[0] : undefined
},
end: {
dateTime: event.allDay ? undefined : event.endDate.toISOString(),
date: event.allDay ? new Date(event.endDate.getTime() + 24*60*60*1000).toISOString().split('T')[0] : undefined
},
visibility: event.private ? 'private' : 'default',
id: event.id
};
const url = `https://www.googleapis.com/calendar/v3/calendars/primary/events/${event.id}`;
let response = await fetch(url, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(googleEvent)
});
// Handle token refresh if needed
if (response.status === 401 && refreshToken) {
console.log('[GOOGLE_SYNC] Token expired, refreshing...');
const { refreshedGoogleToken } = await refreshGoogleToken(refreshToken);
token = refreshedGoogleToken;
// Update the token in Firestore
await db.collection("Profiles").doc(creatorId).update({
[`googleAccounts.${event.email}.accessToken`]: refreshedGoogleToken
});
// Retry with new token
response = await fetch(url, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${refreshedGoogleToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(googleEvent)
});
}
if (!response.ok) {
const errorData = await response.json();
throw new Error(`Failed to sync event: ${errorData.error?.message || response.statusText}`);
}
console.log('[GOOGLE_SYNC] Successfully synced event to Google Calendar', {
eventId: event.id,
creatorId
});
return true;
} catch (error) {
console.error('[GOOGLE_SYNC] Error syncing event to Google Calendar:', error);
throw error;
}
}
async function deleteEventFromGoogle(eventId, accessToken, refreshToken, creatorId, email) {
try {
console.log('[GOOGLE_DELETE] Starting to delete event from Google Calendar', {
eventId,
creatorId
});
let token = accessToken;
const url = `https://www.googleapis.com/calendar/v3/calendars/primary/events/${eventId}`;
let response = await fetch(url, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`
}
});
// Handle token refresh if needed
if (response.status === 401 && refreshToken) {
console.log('[GOOGLE_DELETE] Token expired, refreshing...');
const { refreshedGoogleToken } = await refreshGoogleToken(refreshToken);
token = refreshedGoogleToken;
// Update the token in Firestore
await db.collection("Profiles").doc(creatorId).update({
[`googleAccounts.${email}.accessToken`]: refreshedGoogleToken
});
// Retry with new token
response = await fetch(url, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${refreshedGoogleToken}`
}
});
}
if (!response.ok && response.status !== 404) {
const errorData = await response.json();
throw new Error(`Failed to delete event: ${errorData.error?.message || response.statusText}`);
}
console.log('[GOOGLE_DELETE] Successfully deleted event from Google Calendar', {
eventId,
creatorId
});
return true;
} catch (error) {
console.error('[GOOGLE_DELETE] Error deleting event from Google Calendar:', error);
throw error;
}
}
// Cloud Function to handle event updates
exports.syncEventToGoogleCalendar = functions.firestore
.document('Events/{eventId}')
.onWrite(async (change, context) => {
const eventId = context.params.eventId;
const afterData = change.after.exists ? change.after.data() : null;
const beforeData = change.before.exists ? change.before.data() : null;
// Skip if this is a Google-originated event
if (afterData?.externalOrigin === 'google' || beforeData?.externalOrigin === 'google') {
console.log('[GOOGLE_SYNC] Skipping sync for Google-originated event', { eventId });
return null;
}
try {
// Handle deletion
if (!afterData && beforeData) {
console.log('[GOOGLE_SYNC] Processing event deletion', { eventId });
// Only proceed if this was previously synced with Google
if (!beforeData.email) {
return null;
}
const creatorDoc = await db.collection('Profiles').doc(beforeData.creatorId).get();
const creatorData = creatorDoc.data();
if (!creatorData?.googleAccounts?.[beforeData.email]) {
return null;
}
const accountData = creatorData.googleAccounts[beforeData.email];
await deleteEventFromGoogle(
eventId,
accountData.accessToken,
accountData.refreshToken,
beforeData.creatorId,
beforeData.email
);
return null;
}
// Handle creation or update
if (afterData) {
// Skip if no creator or email is set
if (!afterData.creatorId || !afterData.email) {
return null;
}
const creatorDoc = await db.collection('Profiles').doc(afterData.creatorId).get();
const creatorData = creatorDoc.data();
if (!creatorData?.googleAccounts?.[afterData.email]) {
return null;
}
const accountData = creatorData.googleAccounts[afterData.email];
await syncEventToGoogle(
afterData,
accountData.accessToken,
accountData.refreshToken,
afterData.creatorId
);
}
return null;
} catch (error) {
console.error('[GOOGLE_SYNC] Error in sync function:', error);
// Store the error for later retry or monitoring
await db.collection('SyncErrors').add({
eventId,
error: error.message,
timestamp: admin.firestore.FieldValue.serverTimestamp(),
type: 'google'
});
throw error;
}
}););
let token = accessToken;
// Construct the Google Calendar event
const googleEvent = {
summary: event.title,
start: {
dateTime: event.allDay ? undefined : event.startDate.toISOString(),
date: event.allDay ? event.startDate.toISOString().split('T')[0] : undefined
},
end: {
dateTime: event.allDay ? undefined : event.endDate.toISOString(),
date: event.allDay ? new Date(event.endDate.getTime() + 24*60*60*1000).toISOString().split('T')[0] : undefined
},
visibility: event.private ? 'private' : 'default',
id: event.id
};
const url = `https://www.googleapis.com/calendar/v3/calendars/primary/events/${event.id}`;
let response = await fetch(url, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(googleEvent)
});
// Handle token refresh if needed
if (response.status === 401 && refreshToken) {
console.log('[GOOGLE_SYNC] Token expired, refreshing...');
const { refreshedGoogleToken } = await refreshGoogleToken(refreshToken);
token = refreshedGoogleToken;
// Update the token in Firestore
await db.collection("Profiles").doc(creatorId).update({
[`googleAccounts.${event.email}.accessToken`]: refreshedGoogleToken
});
// Retry with new token
response = await fetch(url, {
method: 'PUT',
headers: {
'Authorization': `Bearer ${refreshedGoogleToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(googleEvent)
});
}
if (!response.ok) {
const errorData = await response.json();
throw new Error(`Failed to sync event: ${errorData.error?.message || response.statusText}`);
}
console.log('[GOOGLE_SYNC] Successfully synced event to Google Calendar', {
eventId: event.id,
creatorId
});
return true;
} catch (error) {
console.error('[GOOGLE_SYNC] Error syncing event to Google Calendar:', error);
throw error;
}
}
async function deleteEventFromGoogle(eventId, accessToken, refreshToken, creatorId, email) {
try {
console.log('[GOOGLE_DELETE] Starting to delete event from Google Calendar', {
eventId,
creatorId
});
let token = accessToken;
const url = `https://www.googleapis.com/calendar/v3/calendars/primary/events/${eventId}`;
let response = await fetch(url, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`
}
});
// Handle token refresh if needed
if (response.status === 401 && refreshToken) {
console.log('[GOOGLE_DELETE] Token expired, refreshing...');
const { refreshedGoogleToken } = await refreshGoogleToken(refreshToken);
token = refreshedGoogleToken;
// Update the token in Firestore
await db.collection("Profiles").doc(creatorId).update({
[`googleAccounts.${email}.accessToken`]: refreshedGoogleToken
});
// Retry with new token
response = await fetch(url, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${refreshedGoogleToken}`
}
});
}
if (!response.ok && response.status !== 404) {
const errorData = await response.json();
throw new Error(`Failed to delete event: ${errorData.error?.message || response.statusText}`);
}
console.log('[GOOGLE_DELETE] Successfully deleted event from Google Calendar', {
eventId,
creatorId
});
return true;
} catch (error) {
console.error('[GOOGLE_DELETE] Error deleting event from Google Calendar:', error);
throw error;
}
}
exports.handleEventDelete = functions.firestore
.document('Events/{eventId}')
.onDelete(async (snapshot, context) => {
const deletedEvent = snapshot.data();
const eventId = context.params.eventId;
// Skip if this was a Google-originated event to prevent sync loops
if (deletedEvent?.externalOrigin === 'google') {
console.log('[GOOGLE_DELETE] Skipping delete sync for Google-originated event', { eventId });
return null;
}
try {
// Only proceed if this was synced with Google (has an email)
if (!deletedEvent?.email) {
console.log('[GOOGLE_DELETE] Event not synced with Google, skipping', { eventId });
return null;
}
const creatorDoc = await admin.firestore()
.collection('Profiles')
.doc(deletedEvent.creatorId)
.get();
if (!creatorDoc.exists) {
console.log('[GOOGLE_DELETE] Creator profile not found', {
eventId,
creatorId: deletedEvent.creatorId
});
return null;
}
const creatorData = creatorDoc.data();
const googleAccount = creatorData?.googleAccounts?.[deletedEvent.email];
if (!googleAccount) {
console.log('[GOOGLE_DELETE] No Google account found for email', {
eventId,
email: deletedEvent.email
});
return null;
}
await deleteEventFromGoogle(
eventId,
googleAccount.accessToken,
googleAccount.refreshToken,
deletedEvent.creatorId,
deletedEvent.email
);
console.log('[GOOGLE_DELETE] Successfully deleted event from Google Calendar', {
eventId,
email: deletedEvent.email
});
} catch (error) {
console.error('[GOOGLE_DELETE] Error deleting event from Google Calendar:', error);
// Store the error for monitoring
await admin.firestore()
.collection('SyncErrors')
.add({
eventId,
error: error.message,
timestamp: admin.firestore.FieldValue.serverTimestamp(),
type: 'google_delete'
});
throw error;
}
});