mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34:54 +00:00
- Redesigned the calendar settings page and connecting, disconnecting and syncing calendars, fixed issues with syncing
This commit is contained in:
Dejan
@ -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",
|
||||
|
||||
Reference in New Issue
Block a user