- 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

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