ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-08-26 06:09:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Introduced a button for syncing Google calendar

Browse Source 
- Implemented saving of the google event data in db
- Added start date to the google calendar fetch api endpoint
This commit is contained in:
Dejan
2024-10-04 01:04:11 +02:00
parent 68e1e840a0
commit ba74025589
2 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,66 +1,75 @@
export async function fetchGoogleCalendarEvents(token) {
export async function fetchGoogleCalendarEvents(token, startDate) {
const response = await fetch(
`https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
const response = await fetch(
'https://www.googleapis.com/calendar/v3/calendars/primary/events',
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
const data = await response.json();
const googleEvents = [];
data.items?.forEach((item) => {
let isAllDay = false;
const start = item.start;
let startDateTime;
if (start !== undefined) {
const timezone = start.timeZone;
if (start.dateTime) {
const stringDate = start.dateTime;
startDateTime = new Date(stringDate).toLocaleString("en-us", {
...options,
timeZone: timezone,
});
} else {
const stringDate = start.date;
startDateTime = new Date(stringDate).toLocaleString("en-us", {
...options,
timeZone: timezone,
});
isAllDay = true;
}
}
const data = await response.json();
const googleEvents = [];
data.items?.forEach((item) => {
const end = item.end;
let endDateTime;
if (end !== undefined) {
const timezone = end.timeZone;
if (end.dateTime) {
const stringDate = end.dateTime;
endDateTime = new Date(stringDate).toLocaleString("en-us", {
...options,
timeZone: timezone,
});
} else {
const stringDate = end.date;
endDateTime = new Date(stringDate).toLocaleString("en-us", {
...options,
timeZone: timezone,
});
}
}
let isAllDay = false;
const start = item.start;
let startDateTime;
if (start !== undefined) {
const googleEvent = {
id: item.id,
title: item.summary,
startDate: startDateTime,
endDate: endDateTime,
allDay: isAllDay,
};
googleEvents.push(googleEvent);
});
const timezone = start.timeZone;
if (start.dateTime) {
const stringDate = start.dateTime;
startDateTime = new Date(stringDate).toLocaleString("en-us", {...options, timeZone: timezone});
} else {
const stringDate = start.date;
startDateTime = new Date(stringDate).toLocaleString("en-us", {...options, timeZone: timezone});
isAllDay = true;
}
}
const end = item.end;
let endDateTime;
if (end !== undefined) {
const timezone = end.timeZone;
if (end.dateTime) {
const stringDate = end.dateTime;
endDateTime = new Date(stringDate).toLocaleString("en-us", {...options, timeZone: timezone});
} else {
const stringDate = end.date;
endDateTime = new Date(stringDate).toLocaleString("en-us", {...options, timeZone: timezone});
}
}
const googleEvent = {
id: item.id,
title: item.summary,
startDate: startDateTime,
endDate: endDateTime,
allDay: isAllDay
};
googleEvents.push(googleEvent);
});
return googleEvents;
return googleEvents;
}
const options = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short"
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric",
timeZoneName: "short",
};

51
components/pages/settings/CalendarSettingsPage.tsx
View File

@ -1,21 +1,41 @@
import { AntDesign, Ionicons } from "@expo/vector-icons";
import React, { useState } from "react";
import { Button, View, Text, Checkbox } from "react-native-ui-lib";
import { Button, Checkbox, Text, View } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { colorMap } from "@/contexts/SettingsContext";
import { TouchableOpacity } from "react-native-gesture-handler";
import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
const CalendarSettingsPage = (props: {
setSelectedPage: (page: number) => void;
}) => {
const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
const [startDate, setStartDate] = useState<boolean>(true);
const { mutateAsync: createEvent } = useCreateEvent();
// Note: user token for the correct provider is needed
const fetchAndSaveGoogleEvents = (token: string) => {
const timeMin = new Date(new Date().setHours(0, 0, 0, 0)).toISOString();
fetchGoogleCalendarEvents(token, timeMin).then((response) => {
response?.forEach((item) => saveData(item));
});
};
async function saveData(item) {
await createEvent(item);
}
return (
<View marginH-30>
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
<View row marginT-20 marginB-35 centerV>
<Ionicons name="chevron-back" size={22} color="#979797" />
<Text text70 color="#979797">Return to main settings</Text>
<Text text70 color="#979797">
Return to main settings
</Text>
</View>
</TouchableOpacity>
<Text text60R>Calendar settings</Text>
@ -90,6 +110,33 @@ const CalendarSettingsPage = (props: {
</Text>
</View>
</View>
<View style={styles.card}>
<Text text70>Calendars</Text>
{/** Note: Should check for the user if it has connected calendars **/}
<View style={{ marginTop: 20 }}>
<Button
label={"Sync Calendar"}
iconSource={() => (
<View
backgroundColor="#ededed"
width={40}
height={40}
style={{ borderRadius: 50 }}
marginR-10
centerV
centerH
>
<AntDesign name="google" size={30} color="#6c645b" />
</View>
)}
icon={<AntDesign name="checkcircleo" size={30} color="#8005eb" />}
backgroundColor="white"
color="#464039"
borderRadius={15}
onPress={fetchAndSaveGoogleEvents}
/>
</View>
</View>
</View>
);
};