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

All day event package

Browse Source
This commit is contained in:
Milan Paunovic
2024-11-01 22:02:36 +01:00
parent 61fff87975
commit 87137e7b15
12 changed files with 322 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
calendar-integration/google-calendar-utils.js
View File

@ -1,15 +1,25 @@
export async function fetchGoogleCalendarEvents(token, email, familyId, startDate, endDate) {
const response = await fetch(
`https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}&time_max=${endDate}`,
{
const googleEvents = [];
let pageToken = null;
do {
const url = new URL(`https://www.googleapis.com/calendar/v3/calendars/primary/events`);
url.searchParams.set('singleEvents', 'true');
url.searchParams.set('timeMin', startDate);
url.searchParams.set('timeMax', endDate);
if (pageToken) url.searchParams.set('pageToken', pageToken);
const response = await fetch(url.toString(), {
headers: {
Authorization: `Bearer ${token}`,
},
},
);
});
const data = await response.json();
const googleEvents = [];
if (!response.ok) {
throw new Error(`Error fetching events: ${data.error?.message || response.statusText}`);
}
data.items?.forEach((item) => {
let isAllDay = false;
@ -46,5 +56,9 @@ export async function fetchGoogleCalendarEvents(token, email, familyId, startDat
googleEvents.push(googleEvent);
});
return {googleEvents, success: response.ok};
// Prepare for the next page if it exists
pageToken = data.nextPageToken;
} while (pageToken);
return { googleEvents, success: true };
}

1
components/pages/calendar/CalendarHeader.tsx
View File

@ -14,6 +14,7 @@ import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { format, isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
import {useIsMutating} from "react-query";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);

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

@ -1,6 +1,6 @@
import React, {useCallback, useEffect, useMemo, useState} from "react";
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
import {ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import {
@ -14,6 +14,9 @@ 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 {useCalSync} from "@/hooks/useCalSync";
import { useIsMutating } from "react-query";
import {useSyncEvents} from "@/hooks/useSyncOnScroll";
interface EventCalendarProps {
calendarHeight: number;
@ -37,6 +40,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const setEventForEdit = useSetAtom(eventForEditAtom);
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const {isSyncing} = useSyncEvents()
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
const todaysDate = new Date();
@ -75,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
(event: CalendarEvent) => ({backgroundColor: event.eventColor, fontSize: 14}),
[]
);
@ -211,6 +215,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
if (isLoading) {
return (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
@ -219,6 +224,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
// console.log(enrichedEvents, filteredEvents)
return (
<>
{isSyncing && (
<View style={styles.loadingContainer}>
{isSyncing && <Text>Syncing...</Text>}
<ActivityIndicator size="large" color="#0000ff"/>
</View>
)}
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
@ -227,7 +239,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
sortedMonthView
// enrichedEventsByDate={enrichedEvents}
events={filteredEvents}
// eventCellStyle={memoizedEventCellStyle}
eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
@ -249,10 +261,10 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
},
typography: {
fontFamily: "PlusJakartaSans_500Medium",
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
sm: {fontFamily: "Manrope_600SemiBold", fontSize: 8},
xl: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
fontSize: 14,
},
moreLabel: {},
xs: {fontSize: 10},
@ -261,10 +273,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={"white"}
showAdjacentMonths
// headerContainerStyle={mode !== "month" ? {
// overflow:"hidden",
// height: 12,
// } : {}}
hourStyle={styles.hourStyle}
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>
</>
);
}
);
@ -291,6 +309,11 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "center",
alignItems: "center",
position: "absolute",
width: "100%",
height: "100%",
zIndex: 100,
backgroundColor: "rgba(255, 255, 255, 0.9)",
},
dayHeader: {
backgroundColor: "#4184f2",

2
firebase/functions/index.js
View File

@ -181,7 +181,7 @@ exports.generateCustomToken = onRequest(async (request, response) => {
}
});
exports.refreshTokens = functions.pubsub.schedule('every 1 hours').onRun(async (context) => {
exports.refreshTokens = functions.pubsub.schedule('every 45 minutes').onRun(async (context) => {
console.log('Running token refresh job...');
const profilesSnapshot = await db.collection('Profiles').get();

4
hooks/firebase/useGetEvents.ts
View File

@ -20,6 +20,7 @@ export const useGetEvents = () => {
// If family view is active, include family, creator, and attendee events
if (isFamilyView) {
const familyQuery = db.collection("Events").where("familyID", "==", familyId);
const creatorQuery = db.collection("Events").where("creatorId", "==", userId);
const attendeeQuery = db.collection("Events").where("attendees", "array-contains", userId);
@ -83,7 +84,7 @@ export const useGetEvents = () => {
const eventColor = profileData?.eventColor || colorMap.pink;
return {
id: event.id || Math.random().toString(36).substr(2, 9), // Generate temp ID if missing
id: event.id || Math.random().toString(36).slice(2, 9), // Generate temp ID if missing
title: event.title,
start: new Date(event.startDate.seconds * 1000),
end: new Date(event.endDate.seconds * 1000),
@ -96,5 +97,6 @@ export const useGetEvents = () => {
},
staleTime: Infinity,
cacheTime: Infinity,
keepPreviousData: true,
});
};

16
hooks/useCalSync.ts
View File

@ -46,14 +46,9 @@ export const useCalSync = () => {
const {profileData} = useAuthContext();
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} =
useFetchAndSaveGoogleEvents();
const {
mutateAsync: fetchAndSaveOutlookEvents,
isLoading: isSyncingOutlook,
} = useFetchAndSaveOutlookEvents();
const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} =
useFetchAndSaveAppleEvents();
const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} = useFetchAndSaveGoogleEvents();
const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveOutlookEvents();
const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} = useFetchAndSaveAppleEvents();
WebBrowser.maybeCompleteAuthSession();
const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
@ -74,6 +69,7 @@ export const useCalSync = () => {
}
);
console.log(response)
const userInfo = await userInfoResponse.json();
const googleMail = userInfo.email;
@ -89,6 +85,7 @@ export const useCalSync = () => {
await fetchAndSaveGoogleEvents({
token: accessToken,
refreshToken: refreshToken,
email: googleMail,
});
}
@ -283,6 +280,7 @@ export const useCalSync = () => {
isConnectedToGoogle,
isSyncingOutlook,
isSyncingGoogle,
isSyncingApple
isSyncingApple,
isSyncing: isSyncingApple || isSyncingOutlook || isSyncingGoogle
}
}

11
hooks/useFetchAndSaveAppleEvents.ts
View File

@ -9,11 +9,12 @@ export const useFetchAndSaveAppleEvents = () => {
const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
return useMutation({
mutationKey: ["fetchAndSaveAppleEvents"],
mutationFn: async ({token, email}: { token?: string, email?: string }) => {
console.log("CALLL")
const timeMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
const timeMax = new Date(new Date().setFullYear(new Date().getFullYear() + 5));
mutationKey: ["fetchAndSaveAppleEvents", "sync"],
mutationFn: async ({token, email, date}: { token?: string; email?: string, date?: Date }) => {
const baseDate = date || new Date();
const timeMin = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() - 1));
const timeMax = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() + 1));
try {
const response = await fetchiPhoneCalendarEvents(
profileData?.familyId!,

77
hooks/useFetchAndSaveGoogleEvents.ts
View File

@ -3,41 +3,44 @@ import {fetchGoogleCalendarEvents} from "@/calendar-integration/google-calendar-
import { useAuthContext } from "@/contexts/AuthContext";
import { useCreateEventsFromProvider } from "@/hooks/firebase/useCreateEvent";
import { useClearTokens } from "@/hooks/firebase/useClearTokens";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
export const useFetchAndSaveGoogleEvents = () => {
const queryClient = useQueryClient()
const queryClient = useQueryClient();
const { profileData } = useAuthContext();
const { mutateAsync: createEventsFromProvider } = useCreateEventsFromProvider();
const { mutateAsync: clearToken } = useClearTokens();
const { mutateAsync: updateUserData } = useUpdateUserData();
return useMutation({
mutationKey: ["fetchAndSaveGoogleEvents"],
mutationFn: async ({token, email}: { token?: string; email?: string }) => {
console.log("Fetching Google Calendar events...");
const timeMin = new Date(new Date().setMonth(new Date().getMonth() - 2));
const timeMax = new Date(new Date().setMonth(new Date().getMonth() + 2));
mutationKey: ["fetchAndSaveGoogleEvents", "sync"],
mutationFn: async ({ token, email, date, refreshToken }: { token?: string; refreshToken?: string; email?: string; date?: Date }) => {
const baseDate = date || new Date();
const timeMin = new Date(baseDate.setMonth(baseDate.getMonth() - 1)).toISOString().slice(0, -5) + "Z";
const timeMax = new Date(baseDate.setMonth(baseDate.getMonth() + 2)).toISOString().slice(0, -5) + "Z";
console.log("Token: ", token);
const tryFetchEvents = async (isRetry = false) => {
try {
const response = await fetchGoogleCalendarEvents(
token,
email,
profileData?.familyId,
timeMin.toISOString().slice(0, -5) + "Z",
timeMax.toISOString().slice(0, -5) + "Z"
timeMin,
timeMax
);
if (!response.success) {
await clearToken({email: email!, provider: "google"})
return
await clearToken({ email: email!, provider: "google" });
return; // Stop refetching if clearing the token
}
console.log("Google Calendar events fetched:", response);
const items = response?.googleEvents?.map((item) => {
if (item.allDay) {
item.startDate = new Date(new Date(item.startDate).setHours(0, 0, 0, 0));
item.startDate = new Date(item.startDate.setHours(0, 0, 0, 0));
item.endDate = item.startDate;
}
return item;
@ -46,11 +49,59 @@ export const useFetchAndSaveGoogleEvents = () => {
await createEventsFromProvider(items);
} catch (error) {
console.error("Error fetching Google Calendar events:", error);
throw error; // Ensure errors are propagated to the mutation
if (!isRetry) {
const refreshedToken = await handleRefreshToken(email, refreshToken);
if (refreshedToken) {
await updateUserData({
newUserData: {
googleAccounts: {
...profileData.googleAccounts,
[email!]: { ...profileData.googleAccounts[email!], accessToken: refreshedToken },
},
},
});
return tryFetchEvents(true); // Retry once after refreshing
} else {
await clearToken({ email: email!, provider: "google" });
console.error(`Token refresh failed; token cleared for ${email}`);
throw error;
}
} else {
console.error(`Retry failed after refreshing token for user ${profileData?.email}:`, error.message);
throw error;
}
}
};
return tryFetchEvents();
},
onSuccess: () => {
queryClient.invalidateQueries(["events"])
queryClient.invalidateQueries(["events"]);
},
});
};
async function handleRefreshToken(email: string, refreshToken: string) {
if (!refreshToken) return null;
try {
const response = await fetch('https://oauth2.googleapis.com/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
grant_type: 'refresh_token',
refresh_token: refreshToken,
client_id: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
}),
});
const data = await response.json();
return data.access_token;
} catch (error) {
console.error("Error refreshing Google token:", error);
return null;
}
}

9
hooks/useFetchAndSaveOutlookEvents.ts
View File

@ -9,10 +9,11 @@ export const useFetchAndSaveOutlookEvents = () => {
const {mutateAsync: createEventsFromProvider} = useCreateEventsFromProvider();
return useMutation({
mutationKey: ["fetchAndSaveOutlookEvents"],
mutationFn: async ({token, email}: { token?: string; email?: string }) => {
const timeMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
const timeMax = new Date(new Date().setFullYear(new Date().getFullYear() + 3));
mutationKey: ["fetchAndSaveOutlookEvents", "sync"],
mutationFn: async ({token, email, date}: { token?: string; email?: string, date?: Date }) => {
const baseDate = date || new Date();
const timeMin = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() - 1));
const timeMax = new Date(new Date(baseDate).setFullYear(new Date(baseDate).getMonth() + 1));
console.log("Token: ", token ?? profileData?.microsoftToken);

85
hooks/useSyncOnScroll.ts Normal file
View File

@ -0,0 +1,85 @@
import { useState, useEffect, useCallback } from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { useAtomValue } from "jotai";
import { useFetchAndSaveGoogleEvents } from "./useFetchAndSaveGoogleEvents";
import { useFetchAndSaveAppleEvents } from "./useFetchAndSaveAppleEvents";
import { useFetchAndSaveOutlookEvents } from "./useFetchAndSaveOutlookEvents";
import { selectedDateAtom } from "@/components/pages/calendar/atoms";
import { addDays, subDays, isBefore, isAfter, format } from "date-fns";
export const useSyncEvents = () => {
const { profileData } = useAuthContext();
const selectedDate = useAtomValue(selectedDateAtom);
const [lastSyncDate, setLastSyncDate] = useState<Date>(selectedDate);
const [lowerBoundDate, setLowerBoundDate] = useState<Date>(subDays(selectedDate, 6 * 30));
const [upperBoundDate, setUpperBoundDate] = useState<Date>(addDays(selectedDate, 6 * 30));
const [isSyncing, setIsSyncing] = useState(false);
const [error, setError] = useState(null);
const syncedRanges = useState<Set<string>>(new Set())[0];
const { mutateAsync: fetchAndSaveGoogleEvents } = useFetchAndSaveGoogleEvents();
const { mutateAsync: fetchAndSaveOutlookEvents } = useFetchAndSaveOutlookEvents();
const { mutateAsync: fetchAndSaveAppleEvents } = useFetchAndSaveAppleEvents();
const generateRangeKey = (startDate: Date, endDate: Date) => {
return `${format(startDate, "yyyy-MM-dd")}_${format(endDate, "yyyy-MM-dd")}`;
};
const syncEvents = useCallback(async () => {
setIsSyncing(true);
setError(null);
const newLowerBound = subDays(selectedDate, 6 * 30);
const newUpperBound = addDays(selectedDate, 6 * 30);
const rangeKey = generateRangeKey(newLowerBound, newUpperBound);
if (syncedRanges.has(rangeKey)) {
setIsSyncing(false);
return;
}
if (isBefore(selectedDate, lowerBoundDate) || isAfter(selectedDate, upperBoundDate)) {
try {
const googleEvents = Object.entries(profileData?.googleAccounts || {}).map(([email, { accessToken }]) =>
fetchAndSaveGoogleEvents({ token: accessToken, email, date: selectedDate })
);
const outlookEvents = Object.entries(profileData?.microsoftAccounts || {}).map(([email, token]) =>
fetchAndSaveOutlookEvents({ token, email, date: selectedDate })
);
const appleEvents = Object.entries(profileData?.appleAccounts || {}).map(([email, token]) =>
fetchAndSaveAppleEvents({ token, email, date: selectedDate })
);
await Promise.all([...googleEvents, ...outlookEvents, ...appleEvents]);
setLastSyncDate(selectedDate);
setLowerBoundDate(newLowerBound);
setUpperBoundDate(newUpperBound);
syncedRanges.add(rangeKey);
} catch (err) {
console.error("Error syncing events:", err);
setError(err);
} finally {
setIsSyncing(false);
}
} else {
setIsSyncing(false);
}
}, [selectedDate, lowerBoundDate, upperBoundDate, profileData, fetchAndSaveGoogleEvents, fetchAndSaveOutlookEvents, fetchAndSaveAppleEvents, syncedRanges]);
useEffect(() => {
syncEvents();
}, [selectedDate, syncEvents]);
return {
isSyncing,
error,
lastSyncDate,
lowerBoundDate,
upperBoundDate,
};
};

2
patches/react-native-big-calendar+4.15.1.patch
View File

@ -1,5 +1,5 @@
diff --git a/node_modules/react-native-big-calendar/build/index.js b/node_modules/react-native-big-calendar/build/index.js
index 848ceba..57fbaed 100644
index 848ceba..add1b1c 100644
--- a/node_modules/react-native-big-calendar/build/index.js
+++ b/node_modules/react-native-big-calendar/build/index.js
@@ -9,6 +9,17 @@ var isoWeek = require('dayjs/plugin/isoWeek');