- 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,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(
+  const data = await response.json();
-        'https://www.googleapis.com/calendar/v3/calendars/primary/events',
+  const googleEvents = [];
-        {
+  data.items?.forEach((item) => {
-            headers: {
+    let isAllDay = false;
-                Authorization: `Bearer ${token}`,
+    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 end = item.end;
-    const googleEvents = [];
+    let endDateTime;
-    data.items?.forEach((item) => {
+    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 googleEvent = {
-        const start = item.start;
+      id: item.id,
-        let startDateTime;
+      title: item.summary,
-        if (start !== undefined) {
+      startDate: startDateTime,
+      endDate: endDateTime,
+      allDay: isAllDay,
+    };
+    googleEvents.push(googleEvent);
+  });
 
-            const timezone = start.timeZone;
+  return googleEvents;
-            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;
 }
 
 const options = {
-    year: "numeric",
+  year: "numeric",
-    month: "long",
+  month: "long",
-    day: "numeric",
+  day: "numeric",
-    hour: "numeric",
+  hour: "numeric",
-    minute: "numeric",
+  minute: "numeric",
-    second: "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>
   );
 };