ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Redesigned the calendar settings page and connecting, disconnecting and syncing calendars, fixed issues with syncing

Browse Source
This commit is contained in:
Dejan
2024-11-01 01:23:28 +01:00
parent 539cbd9f10
commit b52c9cb74f
1 changed files with 151 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
components/pages/settings/CalendarSettingsPage.tsx
View File

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