cally/app/(unauth)/cal_sync.tsx

import {SafeAreaView} from "react-native-safe-area-context";
import {Button, Text, View} from "react-native-ui-lib";
import React, { useEffect } from "react";
import {useCalSync} from "@/hooks/useCalSync";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import AppleIcon from "@/assets/svgs/AppleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
import {useAuthContext} from "@/contexts/AuthContext";
import {StyleSheet} from "react-native";
import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";

export default function Screen() {
    const {profileData, setRedirectOverride} = useAuthContext()
    const {handleStartGoogleSignIn, handleAppleSignIn, handleMicrosoftSignIn} = useCalSync()
    const {data: householdName, refetch} = useGetHouseholdName(profileData?.familyId);


    useEffect(() => {
      refetch();
    }, [profileData?.familyId])
    
    const hasSomeCalendarsSynced =
        !!profileData?.appleAccounts || !!profileData?.microsoftAccounts || !!profileData?.googleAccounts

    return (
        <SafeAreaView style={{flex: 1}}>
            <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
                <View gap-13 width={"100%"} marginB-20>
                {householdName && <Text style={{fontSize: 25, fontFamily: 'Manrope_600SemiBold'}}>
                        You Joined {householdName}
                    </Text>}
                    <Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
                        Let's get started!
                    </Text>
                    <Text color={"#919191"} style={{fontSize: 20}}>
                        Add your calendar below to sync events to your Cally calendar
                    </Text>
                </View>

                <View width={"100%"} gap-1>
                    {!profileData?.googleAccounts && (
                        <Button
                            onPress={() => handleStartGoogleSignIn()}
                            label={"Connect Google account"}
                            labelStyle={styles.addCalLbl}
                            labelProps={{
                                numberOfLines: 2,
                            }}
                            iconSource={() => (
                                <View marginR-15>
                                    <GoogleIcon/>
                                </View>
                            )}
                            style={styles.addCalBtn}
                            color="black"
                            text70BL
                        />
                    )}

                    {profileData?.googleAccounts
                        ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
                            const googleToken = profileData?.googleAccounts?.[googleMail]?.accessToken;
                            return (
                                googleToken && (
                                    <Button
                                        key={googleMail}
                                        disabled
                                        label={`Connected ${googleMail}`}
                                        labelStyle={styles.addCalLbl}
                                        labelProps={{
                                            numberOfLines: 2,
                                        }}
                                        iconSource={() => (
                                            <View marginR-15>
                                                <GoogleIcon/>
                                            </View>
                                        )}
                                        style={styles.addCalBtn}
                                        color="black"
                                        text70BL
                                    />
                                )
                            );
                        })
                        : null}

                    {!profileData?.appleAccounts && (
                        <Button
                            onPress={() => handleAppleSignIn()}
                            label={"Connect Apple"}
                            labelStyle={styles.addCalLbl}
                            labelProps={{
                                numberOfLines: 2,
                            }}
                            iconSource={() => (
                                <View marginR-15>
                                    <AppleIcon/>
                                </View>
                            )}
                            style={styles.addCalBtn}
                            color="black"
                            text70BL
                        />
                    )}

                    {profileData?.appleAccounts
                        ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
                            const appleToken = profileData?.appleAccounts?.[appleEmail!];
                            return (
                                appleToken && (
                                    <Button
                                        key={appleEmail}
                                        disabled
                                        label={`Connected Apple Calendar`}
                                        labelStyle={styles.addCalLbl}
                                        labelProps={{
                                            numberOfLines: 2,
                                        }}
                                        iconSource={() => (
                                            <View marginR-15>
                                                <AppleIcon/>
                                            </View>
                                        )}
                                        style={styles.addCalBtn}
                                        color="black"
                                        text70BL
                                    />
                                )
                            );
                        })
                        : null}

                    {!profileData?.microsoftAccounts && (
                        <Button
                            onPress={() => handleMicrosoftSignIn()}
                            label={"Connect Outlook"}
                            labelStyle={styles.addCalLbl}
                            labelProps={{
                                numberOfLines: 2,
                            }}
                            iconSource={() => (
                                <View marginR-15>
                                    <OutlookIcon/>
                                </View>
                            )}
                            style={styles.addCalBtn}
                            color="black"
                            text70BL
                        />
                    )}

                    {profileData?.microsoftAccounts
                        ? Object.keys(profileData?.microsoftAccounts)?.map(
                            (microsoftEmail) => {
                                const microsoftToken =
                                    profileData?.microsoftAccounts?.[microsoftEmail];
                                return (
                                    microsoftToken && (
                                        <Button
                                            key={microsoftEmail}

                                            label={`Connected ${microsoftEmail}`}
                                            labelStyle={styles.addCalLbl}
                                            labelProps={{
                                                numberOfLines: 2,
                                            }}
                                            iconSource={() => (
                                                <View marginR-15>
                                                    <OutlookIcon/>
                                                </View>
                                            )}
                                            style={styles.addCalBtn}
                                            color="black"
                                            text70BL
                                        />
                                    )
                                );
                            }
                        )
                        : null}
                </View>

                <View flexG/>

                <View width={"100%"}>
                    <Button
                        label={hasSomeCalendarsSynced ? "Continue" : "Skip this step"}
                        onPress={() => setRedirectOverride(false)}
                        marginT-50
                        labelStyle={{
                            fontFamily: "PlusJakartaSans_600SemiBold",
                            fontSize: 16,
                        }}
                        style={{height: 50}}
                        backgroundColor="#fd1775"
                    />
                </View>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    addCalBtn: {
        backgroundColor: "#ffffff",
        marginBottom: 15,
        justifyContent: "flex-start",
        paddingLeft: 25,
    },
    backBtn: {
        backgroundColor: "red",
        marginLeft: -2,
        justifyContent: "flex-start",
    },
    card: {
        backgroundColor: "white",
        width: "100%",
        padding: 20,
        paddingBottom: 30,
        marginTop: 20,
        borderRadius: 12,
    },
    noPaddingCard: {
        backgroundColor: "white",
        width: "100%",
        marginTop: 20,
        borderRadius: 12,
    },
    colorBox: {
        aspectRatio: 1,
        justifyContent: "center",
        alignItems: "center",
        width: 51,
        borderRadius: 12,
    },
    checkbox: {
        borderRadius: 50,
    },
    addCalLbl: {
        fontSize: 16,
        fontFamily: "PlusJakartaSan_500Medium",
        flexWrap: "wrap",
        width: "75%",
        textAlign: "left",
        lineHeight: 20,
        overflow: "visible",
    },
    subTitle: {
        fontFamily: "Manrope_600SemiBold",
        fontSize: 18,
    },
    cardTitle: {
        fontFamily: "Manrope_500Medium",
        fontSize: 15,
    },
});