import { AntDesign, Ionicons } from "@expo/vector-icons"; import React, { useState } from "react"; 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 { fetchMicrosoftCalendarEvents } from "@/calendar-integration/microsoft-calendar-utils"; import { useCreateEventFromProvider } from "@/hooks/firebase/useCreateEvent"; import { useAuthContext } from "@/contexts/AuthContext"; import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData"; import { GoogleSignin } from "@react-native-google-signin/google-signin"; import { authorize } from "react-native-app-auth"; GoogleSignin.configure({ webClientId: "406146460310-hjadmfa1gg4ptaouira5rkhu0djlo5ut.apps.googleusercontent.com", scopes: ["profile", "email"], // Note: add calendar scope }); const GoogleLogin = async () => { return await GoogleSignin.signIn(); }; const microsoftConfig = { issuer: "https://login.microsoftonline.com/common", clientId: "", // Replace with your microsoft client id redirectUrl: "", // replace with your redirect uri added in microsoft portal scopes: ["openid", "profile", "email"], // Add calendar scope serviceConfiguration: { authorizationEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize", tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token", revocationEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/logout", }, useNonce: true, usePKCE: true, //For iOS, we have added the useNonce and usePKCE parameters, which are recommended for security reasons. additionalParameters: { prompt: "consent", }, }; const CalendarSettingsPage = (props: { setSelectedPage: (page: number) => void; }) => { const [selectedColor, setSelectedColor] = useState(colorMap.pink); const [startDate, setStartDate] = useState(true); const { profileData } = useAuthContext(); const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider(); const { mutateAsync: updateUserData } = useUpdateUserData(); const fetchAndSaveGoogleEvents = () => { const timeMin = new Date(new Date().setHours(0, 0, 0, 0)); const timeMax = new Date( new Date(new Date().setHours(0, 0, 0, 0)).setDate(timeMin.getDate() + 30), ); fetchGoogleCalendarEvents( profileData?.googleToken, timeMin.toISOString().slice(0, -5) + "Z", timeMax.toISOString().slice(0, -5) + "Z", ).then((response) => { response?.forEach((item) => saveData(item)); }); }; async function saveData(item) { await createEventFromProvider(item); } const fetchAndSaveMicrosoftEvents = () => { const startDateTime = new Date(new Date().setHours(0, 0, 0, 0)); const endDateTime = new Date( new Date(new Date().setHours(0, 0, 0, 0)).setDate( startDateTime.getDate() + 30, ), ); fetchMicrosoftCalendarEvents( profileData?.microsoftToken, startDateTime.toISOString().slice(0, -5) + "Z", endDateTime.toISOString().slice(0, -5) + "Z", ).then((response) => { response?.forEach((item) => saveData(item)); }); }; const handleGoogleLogin = async () => { 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"); } }; const handleMicrosoftSignIn = async () => { try { const { idToken } = await authorize(microsoftConfig); if (idToken) { await updateUserData({ newUserData: { microsoftToken: idToken } }); } } catch (error) { console.log(error); } }; return ( props.setSelectedPage(0)}> Return to main settings Calendar settings Event Color Preference setSelectedColor(colorMap.pink)}> {selectedColor == colorMap.pink && ( )} setSelectedColor(colorMap.orange)}> {selectedColor == colorMap.orange && ( )} setSelectedColor(colorMap.green)}> {selectedColor == colorMap.green && ( )} setSelectedColor(colorMap.teal)}> {selectedColor == colorMap.teal && ( )} setSelectedColor(colorMap.purple)}> {selectedColor == colorMap.purple && ( )} Weekly Start Date setStartDate(true)} /> Sundays {" "} (default) setStartDate(false)} /> Mondays Add Calendar