From b52c9cb74fd62ffbeff04a0e2170e9ce567f17e0 Mon Sep 17 00:00:00 2001
From: Dejan <panovskidejan@yahoo.com>
Date: Fri, 1 Nov 2024 01:23:28 +0100
Subject: [PATCH] - Redesigned the calendar settings page and connecting,
 disconnecting and syncing calendars, fixed issues with syncing

---
 .../pages/settings/CalendarSettingsPage.tsx   | 351 ++++++++----------
 1 file changed, 151 insertions(+), 200 deletions(-)

diff --git a/components/pages/settings/CalendarSettingsPage.tsx b/components/pages/settings/CalendarSettingsPage.tsx
index 4fe4dfd..fcceced 100644
--- a/components/pages/settings/CalendarSettingsPage.tsx
+++ b/components/pages/settings/CalendarSettingsPage.tsx
@@ -22,6 +22,7 @@ import {useAtom} from "jotai";
 import {settingsPageIndex} from "../calendar/atoms";
 import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
 import {useClearTokens} from "@/hooks/firebase/useClearTokens";
+import Feather from "@expo/vector-icons/Feather";
 
 const googleConfig = {
     androidClientId:
@@ -81,7 +82,7 @@ const CalendarSettingsPage = () => {
     };
 
     const handleConfirm = () => {
-        clearToken(selectedService, selectedEmail);
+        clearTokens({ provider : selectedService, email: selectedEmail });
         setModalVisible(false);
     };
 
@@ -97,7 +98,7 @@ const CalendarSettingsPage = () => {
     );
 
     const {mutateAsync: updateUserData} = useUpdateUserData();
-    const {mutateAsync: clearToken} = useClearTokens();
+    const {mutateAsync: clearTokens} = useClearTokens();
     const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} =
         useFetchAndSaveGoogleEvents();
     const {
@@ -477,34 +478,6 @@ const CalendarSettingsPage = () => {
                     color="black"
                     text70BL
                 />
-                {profileData?.googleAccounts
-                    ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
-                        const googleToken = profileData?.googleAccounts?.[googleMail]?.accessToken;
-                        return (
-                            googleToken && (
-                                <Button
-                                    key={googleMail}
-                                    onPress={() => {
-                                        showConfirmationDialog("google", googleMail);
-                                    }}
-                                    label={`Disconnect ${googleMail}`}
-                                    labelStyle={styles.addCalLbl}
-                                    labelProps={{
-                                        numberOfLines: 2,
-                                    }}
-                                    iconSource={() => (
-                                        <View marginR-15>
-                                            <GoogleIcon/>
-                                        </View>
-                                    )}
-                                    style={styles.addCalBtn}
-                                    color="black"
-                                    text70BL
-                                />
-                            )
-                        );
-                    })
-                    : null}
 
                 {!profileData?.appleAccounts && (
                     <Button
@@ -525,33 +498,6 @@ const CalendarSettingsPage = () => {
                     />
                 )}
 
-                {profileData?.appleAccounts
-                    ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
-                        const appleToken = profileData?.appleAccounts?.[appleEmail!];
-                        return (
-                            appleToken && (
-                                <Button
-                                    key={appleEmail}
-                                    onPress={() => showConfirmationDialog("apple", appleEmail)}
-                                    label={`Disconnect Apple`}
-                                    labelStyle={styles.addCalLbl}
-                                    labelProps={{
-                                        numberOfLines: 2,
-                                    }}
-                                    iconSource={() => (
-                                        <View marginR-15>
-                                            <AppleIcon/>
-                                        </View>
-                                    )}
-                                    style={styles.addCalBtn}
-                                    color="black"
-                                    text70BL
-                                />
-                            )
-                        );
-                    })
-                    : null}
-
                 <Button
                     onPress={() => handleMicrosoftSignIn()}
                     label={profileData?.microsoftAccounts ? "Connect another Outlook account" : "Connect Outlook"}
@@ -568,37 +514,6 @@ const CalendarSettingsPage = () => {
                     color="black"
                     text70BL
                 />
-                {profileData?.microsoftAccounts
-                    ? Object.keys(profileData?.microsoftAccounts)?.map(
-                        (microsoftEmail) => {
-                            const microsoftToken =
-                                profileData?.microsoftAccounts?.[microsoftEmail];
-                            return (
-                                microsoftToken && (
-                                    <Button
-                                        key={microsoftEmail}
-                                        onPress={() => {
-                                            showConfirmationDialog("outlook", microsoftEmail);
-                                        }}
-                                        label={`Disconnect ${microsoftEmail}`}
-                                        labelStyle={styles.addCalLbl}
-                                        labelProps={{
-                                            numberOfLines: 2,
-                                        }}
-                                        iconSource={() => (
-                                            <View marginR-15>
-                                                <OutlookIcon/>
-                                            </View>
-                                        )}
-                                        style={styles.addCalBtn}
-                                        color="black"
-                                        text70BL
-                                    />
-                                )
-                            );
-                        }
-                    )
-                    : null}
 
                 {(isConnectedToGoogle ||
                     isConnectedToMicrosoft ||
@@ -614,50 +529,62 @@ const CalendarSettingsPage = () => {
                                     Object.keys(profileData?.googleAccounts)?.map(
                                         (googleEmail) => {
                                             const googleToken =
-                                                profileData?.googleAccounts?.[googleEmail];
+                                                profileData?.googleAccounts?.[googleEmail]?.accessToken;
                                             return (
                                                 googleToken && (
-                                                    <TouchableOpacity
-                                                        onPress={() =>
-                                                            fetchAndSaveGoogleEvents({
-                                                                token: googleToken,
-                                                                email: googleEmail,
-                                                            })
-                                                        }
-                                                    >
-                                                        <View row paddingR-20 center>
-                                                            <Button
-                                                                disabled={isSyncingGoogle}
-                                                                onPress={() =>
-                                                                    fetchAndSaveGoogleEvents({
-                                                                        token: googleToken,
-                                                                        email: googleEmail,
-                                                                    })
-                                                                }
-                                                                label={`Sync ${googleEmail}`}
-                                                                labelStyle={styles.addCalLbl}
-                                                                labelProps={{numberOfLines: 3}}
-                                                                iconSource={() => (
-                                                                    <View marginR-15>
-                                                                        <GoogleIcon/>
-                                                                    </View>
-                                                                )}
-                                                                style={styles.addCalBtn}
-                                                                color="black"
-                                                                text70BL
-                                                            />
-
+                                                    <View row paddingR-5 center>
+                                                        <View
+                                                            style={{
+                                                                backgroundColor: "#ffffff",
+                                                                marginBottom: 15,
+                                                                paddingLeft: 15,
+                                                            }}
+                                                            color="black"
+                                                            text70BL
+                                                            row
+                                                            centerV
+                                                            width="100%"
+                                                            spread
+                                                        >
                                                             {isSyncingGoogle ? (
-                                                                <ActivityIndicator/>
+                                                                <View marginR-5>
+                                                                    <ActivityIndicator/>
+                                                                </View>
                                                             ) : (
-                                                                <Ionicons
-                                                                    name={"refresh"}
-                                                                    size={20}
-                                                                    color={"#000000"}
-                                                                />
+                                                                <View marginR-5>
+                                                                    <Button
+                                                                        style={{backgroundColor: "#ffffff"}}
+                                                                        color="black"
+                                                                        onPress={() =>
+                                                                            fetchAndSaveGoogleEvents({
+                                                                                token: googleToken,
+                                                                                email: googleEmail,
+                                                                            })
+                                                                        }
+                                                                        iconSource={() => <Ionicons
+                                                                            name={"refresh"}
+                                                                            size={20}
+                                                                            color={"#000000"}
+                                                                        />}
+                                                                    />
+                                                                </View>
                                                             )}
+                                                            <View marginR-5>
+                                                                <GoogleIcon/>
+                                                            </View>
+                                                            <Text style={styles.addCalLbl}>
+                                                                {googleEmail}
+                                                            </Text>
+                                                            <Button
+                                                                style={{backgroundColor: "#ffffff", marginRight: 5}}
+                                                                color="black"
+                                                                onPress={
+                                                                    () => showConfirmationDialog("google", googleEmail)
+                                                                }
+                                                                iconSource={() => <Feather name="x" size={24} />}
+                                                            />
                                                         </View>
-                                                    </TouchableOpacity>
+                                                    </View>
                                                 )
                                             );
                                         }
@@ -670,46 +597,57 @@ const CalendarSettingsPage = () => {
                                         const appleToken = profileData?.appleAccounts?.[appleEmail];
                                         return (
                                             appleToken && (
-                                                <TouchableOpacity
-                                                    onPress={() =>
-                                                        fetchAndSaveAppleEvents({
-                                                            email: appleEmail,
-                                                            token: appleToken,
-                                                        })
-                                                    }
-                                                >
-                                                    <View row paddingR-20 center>
-                                                        <Button
-                                                            disabled={isSyncingApple}
-                                                            onPress={() =>
-                                                                fetchAndSaveAppleEvents({
-                                                                    email: appleEmail,
-                                                                    token: appleToken,
-                                                                })
-                                                            }
-                                                            label={isSyncingApple ? "Syncing Events from the Apple calendar..." : `Sync Apple`}
-                                                            labelStyle={styles.addCalLbl}
-                                                            labelProps={{numberOfLines: 3}}
-                                                            iconSource={() => (
-                                                                <View marginR-15>
-                                                                    <AppleIcon/>
-                                                                </View>
-                                                            )}
-                                                            style={styles.addCalBtn}
-                                                            color="black"
-                                                            text70BL
-                                                        />
+                                                <View row paddingR-5 center>
+                                                    <View
+                                                        style={{
+                                                            backgroundColor: "#ffffff",
+                                                            marginBottom: 15,
+                                                            paddingLeft: 15,
+                                                        }}
+                                                        color="black"
+                                                        text70BL
+                                                        row
+                                                        centerV
+                                                        width="100%"
+                                                        spread
+                                                    >
+                                                        <View marginR-5>
+                                                            <AppleIcon/>
+                                                        </View>
+                                                        <Text style={styles.addCalLbl}>
+                                                            {appleEmail}
+                                                        </Text>
                                                         {isSyncingApple ? (
-                                                            <ActivityIndicator/>
+                                                            <View marginR-5>
+                                                                <ActivityIndicator/>
+                                                            </View>
                                                         ) : (
-                                                            <Ionicons
-                                                                name={"refresh"}
-                                                                size={20}
-                                                                color={"#000000"}
-                                                            />
+                                                            <View marginR-5>
+                                                                <Button
+                                                                    style={{backgroundColor: "#ffffff"}}
+                                                                    color="black"
+                                                                    onPress={() =>
+                                                                        fetchAndSaveAppleEvents({
+                                                                            email: appleEmail,
+                                                                            token: appleToken,
+                                                                        })
+                                                                    }
+                                                                    iconSource={() => <Ionicons
+                                                                        name={"refresh"}
+                                                                        size={20}
+                                                                        color={"#000000"}
+                                                                    />}
+                                                                />
+                                                            </View>
                                                         )}
+                                                        <Button
+                                                            style={{backgroundColor: "#ffffff",  marginRight: 5}}
+                                                            color="black"
+                                                            onPress={() => showConfirmationDialog("apple", appleEmail)}
+                                                            iconSource={() => <Feather name="x" size={24} />}
+                                                        />
                                                     </View>
-                                                </TouchableOpacity>
+                                                </View>
                                             )
                                         );
                                     })}
@@ -721,46 +659,59 @@ const CalendarSettingsPage = () => {
                                                 profileData?.microsoftAccounts?.[microsoftEmail];
                                             return (
                                                 microsoftToken && (
-                                                    <TouchableOpacity
-                                                        onPress={() =>
-                                                            fetchAndSaveOutlookEvents({
-                                                                token: microsoftToken,
-                                                                email: microsoftEmail,
-                                                            })
-                                                        }
-                                                    >
-                                                        <View row paddingR-20 center>
-                                                            <Button
-                                                                disabled={isSyncingOutlook}
-                                                                onPress={() =>
-                                                                    fetchAndSaveOutlookEvents({
-                                                                        token: microsoftToken,
-                                                                        email: microsoftEmail,
-                                                                    })
-                                                                }
-                                                                label={`Sync ${microsoftEmail}`}
-                                                                labelStyle={styles.addCalLbl}
-                                                                labelProps={{numberOfLines: 3}}
-                                                                iconSource={() => (
-                                                                    <View marginR-15>
-                                                                        <OutlookIcon/>
-                                                                    </View>
-                                                                )}
-                                                                style={styles.addCalBtn}
-                                                                color="black"
-                                                                text70BL
-                                                            />
+                                                    <View row paddingR-5 center>
+                                                        <View
+                                                            style={{
+                                                                backgroundColor: "#ffffff",
+                                                                marginBottom: 15,
+                                                                paddingLeft: 15,
+                                                            }}
+                                                            color="black"
+                                                            text70BL
+                                                            row
+                                                            centerV
+                                                            width="100%"
+                                                            spread
+                                                        >
                                                             {isSyncingOutlook ? (
-                                                                <ActivityIndicator/>
+                                                                <View marginR-5>
+                                                                    <ActivityIndicator/>
+                                                                </View>
                                                             ) : (
-                                                                <Ionicons
-                                                                    name={"refresh"}
-                                                                    size={20}
-                                                                    color={"#000000"}
-                                                                />
+                                                                <View marginR-5>
+                                                                    <Button
+                                                                        style={{backgroundColor: "#ffffff"}}
+                                                                        color="black"
+                                                                        onPress={() =>
+                                                                                fetchAndSaveOutlookEvents({
+                                                                                    token: microsoftToken,
+                                                                                    email: microsoftEmail,
+                                                                                })
+                                                                        }
+                                                                        iconSource={() => <Ionicons
+                                                                            name={"refresh"}
+                                                                            size={20}
+                                                                            color={"#000000"}
+                                                                        />}
+                                                                    />
+                                                                </View>
                                                             )}
+                                                            <View marginR-5>
+                                                                <OutlookIcon/>
+                                                            </View>
+                                                            <Text style={styles.addCalLbl}>
+                                                                {microsoftEmail}
+                                                            </Text>
+                                                            <Button
+                                                                style={{backgroundColor: "#ffffff",  marginRight: 5}}
+                                                                color="black"
+                                                                onPress={
+                                                                    () => showConfirmationDialog("outlook", microsoftEmail)
+                                                                }
+                                                                iconSource={() => <Feather name="x" size={24} />}
+                                                            />
                                                         </View>
-                                                    </TouchableOpacity>
+                                                    </View>
                                                 )
                                             );
                                         }
@@ -821,10 +772,10 @@ const styles = StyleSheet.create({
         fontSize: 16,
         fontFamily: "PlusJakartaSan_500Medium",
         flexWrap: "wrap",
-        width: "75%",
+        width: "70%",
         textAlign: "left",
         lineHeight: 20,
-        overflow: "visible",
+        overflow: "hidden",
     },
     subTitle: {
         fontFamily: "Manrope_600SemiBold",