- Introduced a button for syncing Google calendar

- Implemented saving of the google event data in db
- Added start date to the google calendar fetch api endpoint

calendar-integration/google-calendar-utils.js

@@ -1,30 +1,33 @@
-export async function fetchGoogleCalendarEvents(token) {
-
+export async function fetchGoogleCalendarEvents(token, startDate) {
   const response = await fetch(
-        'https://www.googleapis.com/calendar/v3/calendars/primary/events',
+    `https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}`,
     {
       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});
+        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});
+        startDateTime = new Date(stringDate).toLocaleString("en-us", {
+          ...options,
+          timeZone: timezone,
+        });
         isAllDay = true;
       }
     }
@@ -35,10 +38,16 @@ export async function fetchGoogleCalendarEvents(token) {
       const timezone = end.timeZone;
       if (end.dateTime) {
         const stringDate = end.dateTime;
-                endDateTime = new Date(stringDate).toLocaleString("en-us", {...options, timeZone: timezone});
+        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});
+        endDateTime = new Date(stringDate).toLocaleString("en-us", {
+          ...options,
+          timeZone: timezone,
+        });
       }
     }
 
@@ -47,7 +56,7 @@ export async function fetchGoogleCalendarEvents(token) {
       title: item.summary,
       startDate: startDateTime,
       endDate: endDateTime,
-            allDay: isAllDay
+      allDay: isAllDay,
     };
     googleEvents.push(googleEvent);
   });
@@ -62,5 +71,5 @@ const options = {
   hour: "numeric",
   minute: "numeric",
   second: "numeric",
-    timeZoneName: "short"
+  timeZoneName: "short",
 };

components/pages/settings/CalendarSettingsPage.tsx

@@ -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>
   );
 };