- Implemented google sign in and saved the id token in db for the current user

- Used the id token for the current user for fetching the google calendar events

components/pages/settings/CalendarSettingsPage.tsx

@@ -7,23 +7,38 @@ import { TouchableOpacity } from "react-native-gesture-handler";
 import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
 import { fetchMicrosoftCalendarEvents } from "@/calendar-integration/microsoft-calendar-utils";
 import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { GoogleSignin } from "@react-native-google-signin/google-signin";
 
+GoogleSignin.configure({
+  webClientId:
+    "406146460310-hjadmfa1gg4ptaouira5rkhu0djlo5ut.apps.googleusercontent.com",
+  scopes: ["profile", "email"], // Note: add calendar scope
+});
+
+const GoogleLogin = async () => {
+  return await GoogleSignin.signIn();
+};
+
 const CalendarSettingsPage = (props: {
   setSelectedPage: (page: number) => void;
 }) => {
   const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
   const [startDate, setStartDate] = useState<boolean>(true);
+  const { profileData } = useAuthContext();
 
   const { mutateAsync: createEvent } = useCreateEvent();
+  const { mutateAsync: updateUserData } = useUpdateUserData();
 
-  // Note: user token for the correct provider is needed
+  const fetchAndSaveGoogleEvents = () => {
-  const fetchAndSaveGoogleEvents = (token: string) => {
     const timeMin = new Date(new Date().setHours(0, 0, 0, 0)).toISOString();
 
-    fetchGoogleCalendarEvents(token, timeMin).then((response) => {
+    fetchGoogleCalendarEvents(profileData?.googleToken, timeMin).then(
-      response?.forEach((item) => saveData(item));
+      (response) => {
-    });
+        response?.forEach((item) => createEvent(item));
+      },
+    );
   };
 
   const fetchAndSaveMicrosoftEvents = (token: string) => {
@@ -43,9 +58,21 @@ const CalendarSettingsPage = (props: {
     });
   };
 
-  async function saveData(item) {
+  const handleGoogleLogin = async () => {
-    await createEvent(item);
+    try {
-  }
+      const response = await GoogleLogin();
+      if (response) {
+        const googleUserData = response.data;
+        let idToken = googleUserData?.idToken;
+
+        if (idToken) {
+          await updateUserData({ newUserData: { googleToken: idToken } });
+        }
+      }
+    } catch (apiError) {
+      console.log(apiError || "Something went wrong");
+    }
+  };
 
   return (
     <View marginH-30>
@@ -140,46 +167,44 @@ const CalendarSettingsPage = (props: {
                 width={40}
                 height={40}
                 style={{ borderRadius: 50 }}
-                marginR-10
                 centerV
                 centerH
               >
-                <AntDesign name="google" size={30} color="#6c645b" />
+                <Ionicons name="logo-google" size={22} color="#979797" />
               </View>
             )}
-            icon={<AntDesign name="checkcircleo" size={30} color="#8005eb" />}
             backgroundColor="white"
             color="#464039"
             borderRadius={15}
-            onPress={signInGoogle}
+            onPress={handleGoogleLogin}
           />
         </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
+          {profileData?.googleToken !== undefined && (
-            label={"Sync Google"}
+            <Button
-            iconSource={() => (
+              label={"Sync Google"}
-              <View
+              iconSource={() => (
-                backgroundColor="#ededed"
+                <View
-                width={40}
+                  backgroundColor="#ededed"
-                height={40}
+                  width={40}
-                style={{ borderRadius: 50 }}
+                  height={40}
-                marginR-10
+                  style={{ borderRadius: 50 }}
-                centerV
+                  marginR-10
-                centerH
+                  centerV
-              >
+                  centerH
-                <AntDesign name="google" size={30} color="#6c645b" />
+                >
-              </View>
+                  <Ionicons name="logo-google" size={22} color="#979797" />
-            )}
+                </View>
-            icon={<AntDesign name="checkcircleo" size={30} color="#8005eb" />}
+              )}
-            backgroundColor="white"
+              backgroundColor="white"
-            color="#464039"
+              color="#464039"
-            borderRadius={15}
+              borderRadius={15}
-            onPress={fetchAndSaveGoogleEvents}
+              onPress={fetchAndSaveGoogleEvents}
-          />
+            />
+          )}
           <Button
             label={"Sync Outlook"}
             iconSource={() => (
@@ -192,10 +217,9 @@ const CalendarSettingsPage = (props: {
                 centerV
                 centerH
               >
-                <AntDesign name="google" size={30} color="#6c645b" />
+                <Ionicons name="logo-microsoft" size={22} color="#979797" />
               </View>
             )}
-            icon={<AntDesign name="checkcircleo" size={30} color="#8005eb" />}
             backgroundColor="white"
             color="#464039"
             borderRadius={15}
@@ -207,24 +231,6 @@ const CalendarSettingsPage = (props: {
   );
 };
 
-const signInGoogle = async () => {
-  GoogleSignin.configure({
-    webClientId:
-      "406146460310-81gld1b58ujsoe6a2t3ht0haprv5pa69.apps.googleusercontent.com",
-    scopes: ["profile", "email", "calendar"],
-    offlineAccess: true,
-  });
-
-  try {
-    await GoogleSignin.hasPlayServices();
-    let userInfo = await GoogleSignin.signIn();
-    console.log(userInfo);
-  } catch (error) {
-    console.log(error);
-    console.log(error.code);
-  }
-};
-
 const styles = StyleSheet.create({
   backBtn: {
     backgroundColor: "red",