From 94d3b5fffdfdceab6ee1c0d2a187a34f184c9ef7 Mon Sep 17 00:00:00 2001
From: ivic00 <102467664+ivic00@users.noreply.github.com>
Date: Fri, 1 Nov 2024 01:12:19 +0100
Subject: [PATCH 1/2] ui fixes, added delete account confirmation
---
components/pages/grocery/GroceryList.tsx | 2 +-
.../user_components/DeleteProfileDialogs.tsx | 128 ++++++++++++++++++
.../user_settings_views/MyProfile.tsx | 29 +++-
3 files changed, 157 insertions(+), 2 deletions(-)
create mode 100644 components/pages/settings/user_components/DeleteProfileDialogs.tsx
diff --git a/components/pages/grocery/GroceryList.tsx b/components/pages/grocery/GroceryList.tsx
index be9f166..0fe5186 100644
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@@ -74,7 +74,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
}, [groceries]);
return (
-
+
void;
+ onFirstYes: () => void;
+ onConfirm: () => void;
+}
+
+const DeleteProfileDialogs: React.FC = ({
+ visible,
+ onDismiss,
+ onFirstYes,
+ onConfirm,
+}) => {
+ const [confirmationDialog, setConfirmationDialog] = useState(false);
+ return (
+ <>
+
+
+ >
+ );
+};
+
+// Empty stylesheet for future styles
+const styles = StyleSheet.create({
+ confirmBtn: {
+ backgroundColor: "#FF5449",
+ },
+ cancelBtn: {
+ backgroundColor: "white",
+ },
+ dialog: {
+ backgroundColor: "white",
+ paddingHorizontal: 25,
+ paddingTop: 25,
+ paddingBottom: 17,
+ borderRadius: 20,
+ },
+ title: {
+ fontFamily: "Manrope_600SemiBold",
+ fontSize: 22,
+ marginBottom: 5,
+ },
+ text: {
+ fontFamily: "PlusJakartaSans_400Regular",
+ fontSize: 16,
+ marginBottom: 0,
+ },
+});
+
+export default DeleteProfileDialogs;
diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx
index 869c619..5a8f9a7 100644
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, TouchableOpacity } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker";
import {
+ Button,
Colors,
Image,
Picker,
@@ -18,6 +19,7 @@ import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
+import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
const MyProfile = () => {
const { user, profileData } = useAuthContext();
@@ -32,6 +34,15 @@ const MyProfile = () => {
string | ImagePicker.ImagePickerAsset | null
>(profileData?.pfp || null);
+ const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+
+ const handleHideDeleteDialog = () => {
+ setShowDeleteDialog(false);
+ };
+ const handleShowDeleteDialog = () => {
+ setShowDeleteDialog(true);
+ };
+
const { mutateAsync: updateUserData } = useUpdateUserData();
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
const isFirstRender = useRef(true);
@@ -93,7 +104,7 @@ const MyProfile = () => {
: profileImage;
return (
-
+
Your Profile
@@ -205,6 +216,22 @@ const MyProfile = () => {
+
+ {
+ setShowDeleteDialog(false);
+ }}
+ visible={showDeleteDialog}
+ onDismiss={handleHideDeleteDialog}
+ onConfirm={() => {console.log('delete account here')}}
+ />
);
};
From b52c9cb74fd62ffbeff04a0e2170e9ce567f17e0 Mon Sep 17 00:00:00 2001
From: Dejan
Date: Fri, 1 Nov 2024 01:23:28 +0100
Subject: [PATCH 2/2] - 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 && (
- {
- showConfirmationDialog("google", googleMail);
- }}
- label={`Disconnect ${googleMail}`}
- labelStyle={styles.addCalLbl}
- labelProps={{
- numberOfLines: 2,
- }}
- iconSource={() => (
-
-
-
- )}
- style={styles.addCalBtn}
- color="black"
- text70BL
- />
- )
- );
- })
- : null}
{!profileData?.appleAccounts && (
{
/>
)}
- {profileData?.appleAccounts
- ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
- const appleToken = profileData?.appleAccounts?.[appleEmail!];
- return (
- appleToken && (
- showConfirmationDialog("apple", appleEmail)}
- label={`Disconnect Apple`}
- labelStyle={styles.addCalLbl}
- labelProps={{
- numberOfLines: 2,
- }}
- iconSource={() => (
-
-
-
- )}
- style={styles.addCalBtn}
- color="black"
- text70BL
- />
- )
- );
- })
- : null}
-
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 && (
- {
- showConfirmationDialog("outlook", microsoftEmail);
- }}
- label={`Disconnect ${microsoftEmail}`}
- labelStyle={styles.addCalLbl}
- labelProps={{
- numberOfLines: 2,
- }}
- iconSource={() => (
-
-
-
- )}
- 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 && (
-
- fetchAndSaveGoogleEvents({
- token: googleToken,
- email: googleEmail,
- })
- }
- >
-
-
- fetchAndSaveGoogleEvents({
- token: googleToken,
- email: googleEmail,
- })
- }
- label={`Sync ${googleEmail}`}
- labelStyle={styles.addCalLbl}
- labelProps={{numberOfLines: 3}}
- iconSource={() => (
-
-
-
- )}
- style={styles.addCalBtn}
- color="black"
- text70BL
- />
-
+
+
{isSyncingGoogle ? (
-
+
+
+
) : (
-
+
+
+ fetchAndSaveGoogleEvents({
+ token: googleToken,
+ email: googleEmail,
+ })
+ }
+ iconSource={() => }
+ />
+
)}
+
+
+
+
+ {googleEmail}
+
+ showConfirmationDialog("google", googleEmail)
+ }
+ iconSource={() => }
+ />
-
+
)
);
}
@@ -670,46 +597,57 @@ const CalendarSettingsPage = () => {
const appleToken = profileData?.appleAccounts?.[appleEmail];
return (
appleToken && (
-
- fetchAndSaveAppleEvents({
- email: appleEmail,
- token: appleToken,
- })
- }
- >
-
-
- fetchAndSaveAppleEvents({
- email: appleEmail,
- token: appleToken,
- })
- }
- label={isSyncingApple ? "Syncing Events from the Apple calendar..." : `Sync Apple`}
- labelStyle={styles.addCalLbl}
- labelProps={{numberOfLines: 3}}
- iconSource={() => (
-
-
-
- )}
- style={styles.addCalBtn}
- color="black"
- text70BL
- />
+
+
+
+
+
+
+ {appleEmail}
+
{isSyncingApple ? (
-
+
+
+
) : (
-
+
+
+ fetchAndSaveAppleEvents({
+ email: appleEmail,
+ token: appleToken,
+ })
+ }
+ iconSource={() => }
+ />
+
)}
+ showConfirmationDialog("apple", appleEmail)}
+ iconSource={() => }
+ />
-
+
)
);
})}
@@ -721,46 +659,59 @@ const CalendarSettingsPage = () => {
profileData?.microsoftAccounts?.[microsoftEmail];
return (
microsoftToken && (
-
- fetchAndSaveOutlookEvents({
- token: microsoftToken,
- email: microsoftEmail,
- })
- }
- >
-
-
- fetchAndSaveOutlookEvents({
- token: microsoftToken,
- email: microsoftEmail,
- })
- }
- label={`Sync ${microsoftEmail}`}
- labelStyle={styles.addCalLbl}
- labelProps={{numberOfLines: 3}}
- iconSource={() => (
-
-
-
- )}
- style={styles.addCalBtn}
- color="black"
- text70BL
- />
+
+
{isSyncingOutlook ? (
-
+
+
+
) : (
-
+
+
+ fetchAndSaveOutlookEvents({
+ token: microsoftToken,
+ email: microsoftEmail,
+ })
+ }
+ iconSource={() => }
+ />
+
)}
+
+
+
+
+ {microsoftEmail}
+
+ showConfirmationDialog("outlook", microsoftEmail)
+ }
+ iconSource={() => }
+ />
-
+
)
);
}
@@ -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",