mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +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 {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",
|
||||||
|
|||||||
Reference in New Issue
Block a user