ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-15 17:47:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Profile picture upload added, QR code scan fix

Browse Source
This commit is contained in:
Milan Paunovic
2024-11-01 04:34:59 +01:00
parent 0fbf89644f
commit 909a4344dc
7 changed files with 784 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/(unauth)/get_started.tsx
View File

@ -1,33 +1,36 @@
import {SafeAreaView} from "react-native-safe-area-context"; import {SafeAreaView} from "react-native-safe-area-context";
import {Button, Colors, Dialog, LoaderScreen, Text, View} from "react-native-ui-lib"; import {Button, Colors, Dialog, LoaderScreen, Text, View} from "react-native-ui-lib";
import React, {useState} from "react"; import React, {useCallback, useState} from "react";
import {useRouter} from "expo-router"; import {useRouter} from "expo-router";
import QRIcon from "@/assets/svgs/QRIcon"; import QRIcon from "@/assets/svgs/QRIcon";
import Toast from "react-native-toast-message";
import {Camera, CameraView} from "expo-camera"; import {Camera, CameraView} from "expo-camera";
import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode"; import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
import {useAuthContext} from "@/contexts/AuthContext";
import debounce from "debounce";
export default function Screen() { export default function Screen() {
const router = useRouter() const router = useRouter()
const {setRedirectOverride} = useAuthContext()
const [hasPermission, setHasPermission] = useState<boolean | null>(null); const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false); const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
const {mutateAsync: signInWithQrCode, isLoading} = useLoginWithQrCode(); const {mutateAsync: signInWithQrCode, isLoading} = useLoginWithQrCode();
const debouncedRouterReplace = useCallback(
debounce(() => {
router.push("/(unauth)/cal_sync");
}, 300),
[]
);
const handleQrCodeScanned = async ({data}: { data: string }) => { const handleQrCodeScanned = async ({data}: { data: string }) => {
setShowCameraDialog(false); setShowCameraDialog(false);
setRedirectOverride(true);
try { try {
await signInWithQrCode({userId: data}); await signInWithQrCode({userId: data});
Toast.show({ debouncedRouterReplace()
type: "success",
text1: "Login successful with QR code!",
});
} catch (err) { } catch (err) {
Toast.show({ console.log(err)
type: "error",
text1: "Error logging in with QR code",
text2: `${err}`,
});
} }
}; };

2
components/pages/calendar/EventCalendar.tsx
View File

@ -225,7 +225,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
mode={mode} mode={mode}
enableEnrichedEvents={true} enableEnrichedEvents={true}
sortedMonthView sortedMonthView
enrichedEventsByDate={enrichedEvents} // enrichedEventsByDate={enrichedEvents}
events={filteredEvents} events={filteredEvents}
// eventCellStyle={memoizedEventCellStyle} // eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent} onPressEvent={handlePressEvent}

245
components/pages/settings/UserSettings.tsx
View File

@ -1,138 +1,131 @@
import { import {FloatingButton, Text, TouchableOpacity, View,} from "react-native-ui-lib";
FloatingButton, import React, {useState} from "react";
Text, import {Ionicons} from "@expo/vector-icons";
TouchableOpacity, import {ScrollView, StyleSheet} from "react-native";
View,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import { ScrollView, StyleSheet } from "react-native";
import MyProfile from "./user_settings_views/MyProfile"; import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup"; import MyGroup from "./user_settings_views/MyGroup";
import { useAtom } from "jotai"; import {useAtom, useSetAtom} from "jotai";
import { settingsPageIndex, userSettingsView } from "../calendar/atoms"; import {settingsPageIndex, userSettingsView} from "../calendar/atoms";
import { AuthContextProvider } from "@/contexts/AuthContext";
import PlusIcon from "@/assets/svgs/PlusIcon"; import PlusIcon from "@/assets/svgs/PlusIcon";
const UserSettings = () => { const UserSettings = () => {
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex); const setPageIndex = useSetAtom(settingsPageIndex);
const [userView, setUserView] = useAtom(userSettingsView); const [userView, setUserView] = useAtom(userSettingsView);
const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false); const [onNewUserClick, setOnNewUserClick] = useState<(boolean)>(false);
return (
<AuthContextProvider> return (
<View flexG> <View flexG>
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}> <ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setPageIndex(0); setPageIndex(0);
setUserView(true); setUserView(true);
}} }}
> >
<View row marginT-20 marginB-20 marginL-20 centerV> <View row marginT-20 marginB-20 marginL-20 centerV>
<Ionicons <Ionicons
name="chevron-back" name="chevron-back"
size={14} size={14}
color="#979797" color="#979797"
style={{ paddingBottom: 3 }} style={{paddingBottom: 3}}
/> />
<Text <Text
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }} style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
color="#979797" color="#979797"
> >
Return to main settings Return to main settings
</Text> </Text>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<View marginH-26 flexG style={{ minHeight: "90%" }}> <View marginH-26 flexG style={{minHeight: "90%"}}>
<Text text60R marginB-25> <Text text60R marginB-25>
User Management User Management
</Text> </Text>
<View style={styles.buttonSwitch} spread row> <View style={styles.buttonSwitch} spread row>
<TouchableOpacity <TouchableOpacity
onPress={() => setUserView(true)} onPress={() => setUserView(true)}
centerV centerV
centerH centerH
style={userView == true ? styles.btnSelected : styles.btnNot} style={userView == true ? styles.btnSelected : styles.btnNot}
> >
<View> <View>
<Text <Text
style={styles.btnTxt} style={styles.btnTxt}
color={userView ? "white" : "black"} color={userView ? "white" : "black"}
> >
My Profile My Profile
</Text> </Text>
</View>
</TouchableOpacity>
<TouchableOpacity
onPress={() => setUserView(false)}
centerV
centerH
style={userView == false ? styles.btnSelected : styles.btnNot}
>
<View>
<Text
style={styles.btnTxt}
color={!userView ? "white" : "black"}
>
My Group
</Text>
</View>
</TouchableOpacity>
</View>
{userView && <MyProfile/>}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
</View> </View>
</TouchableOpacity> </ScrollView>
<TouchableOpacity {!userView && (
onPress={() => setUserView(false)} <FloatingButton
centerV fullWidth
centerH hideBackgroundOverlay
style={userView == false ? styles.btnSelected : styles.btnNot} visible
> button={{
<View> label: " Add a user device",
<Text iconSource: () => <PlusIcon height={13} width={14}/>,
style={styles.btnTxt} onPress: () => setOnNewUserClick(true),
color={!userView ? "white" : "black"} style: styles.bottomButton,
> labelStyle: {fontFamily: "Manrope_600SemiBold", fontSize: 15},
My Group }}
</Text> />
</View> )}
</TouchableOpacity> </View>
</View> );
{userView && <MyProfile />}
{!userView && <MyGroup onNewUserClick={onNewUserClick} setOnNewUserClick={setOnNewUserClick}/>}
</View>
</ScrollView>
{!userView && (
<FloatingButton
fullWidth
hideBackgroundOverlay
visible
button={{
label: " Add a user device",
iconSource: () => <PlusIcon height={13} width={14} />,
onPress: () => setOnNewUserClick(true),
style: styles.bottomButton,
labelStyle: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
}}
/>
)}
</View>
</AuthContextProvider>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
bottomButton: { bottomButton: {
position: "absolute", position: "absolute",
bottom: 15, bottom: 15,
marginHorizontal: 28, marginHorizontal: 28,
width: 337, width: 337,
backgroundColor: "#e8156c", backgroundColor: "#e8156c",
height: 53.26, height: 53.26,
}, },
buttonSwitch: { buttonSwitch: {
borderRadius: 50, borderRadius: 50,
width: "100%", width: "100%",
backgroundColor: "#ebebeb", backgroundColor: "#ebebeb",
height: 45, height: 45,
}, },
btnSelected: { btnSelected: {
backgroundColor: "#05a8b6", backgroundColor: "#05a8b6",
height: "100%", height: "100%",
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
btnTxt: { btnTxt: {
fontFamily: "Manrope_500Medium", fontFamily: "Manrope_500Medium",
fontSize: 15, fontSize: 15,
}, },
btnNot: { btnNot: {
height: "100%", height: "100%",
width: "50%", width: "50%",
borderRadius: 50, borderRadius: 50,
}, },
title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 }, title: {fontFamily: "Manrope_600SemiBold", fontSize: 18},
}); });
export default UserSettings; export default UserSettings;

1124
components/pages/settings/user_settings_views/MyGroup.tsx
View File

File diff suppressed because it is too large Load Diff

1
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -65,7 +65,6 @@ const MyProfile = () => {
if (profileData) { if (profileData) {
setFirstName(profileData.firstName || ""); setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || ""); setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null);
setTimeZone( setTimeZone(
profileData.timeZone || Localization.getCalendars()[0].timeZone! profileData.timeZone || Localization.getCalendars()[0].timeZone!
); );

20
hooks/firebase/useChangeProfilePicture.ts
View File

@ -1,13 +1,13 @@
import { useMutation, useQueryClient } from "react-query"; import {useMutation, useQueryClient} from "react-query";
import firestore from "@react-native-firebase/firestore"; import firestore from "@react-native-firebase/firestore";
import storage from "@react-native-firebase/storage"; import storage from "@react-native-firebase/storage";
import { useAuthContext } from "@/contexts/AuthContext"; import {useAuthContext} from "@/contexts/AuthContext";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { Platform } from "react-native"; import {Platform} from "react-native";
export const useChangeProfilePicture = () => { export const useChangeProfilePicture = (customUserId?: string) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { user, refreshProfileData } = useAuthContext(); const {user, refreshProfileData} = useAuthContext();
return useMutation({ return useMutation({
mutationKey: ["changeProfilePicture"], mutationKey: ["changeProfilePicture"],
@ -38,10 +38,12 @@ export const useChangeProfilePicture = () => {
const downloadURL = await reference.getDownloadURL(); const downloadURL = await reference.getDownloadURL();
console.log("Download URL:", downloadURL); console.log("Download URL:", downloadURL);
if(!customUserId) {
await firestore() await firestore()
.collection("Profiles") .collection("Profiles")
.doc(user?.uid) .doc(user?.uid)
.update({ pfp: downloadURL }); .update({pfp: downloadURL});
}
} catch (e) { } catch (e) {
console.error("Error uploading profile picture:", e); console.error("Error uploading profile picture:", e);
@ -50,8 +52,10 @@ export const useChangeProfilePicture = () => {
}, },
onSuccess: () => { onSuccess: () => {
// Invalidate queries to refresh profile data // Invalidate queries to refresh profile data
queryClient.invalidateQueries("Profiles"); if (!customUserId) {
refreshProfileData(); queryClient.invalidateQueries("Profiles");
refreshProfileData();
}
}, },
}); });
}; };

62
hooks/useUploadProfilePicture.ts Normal file
View File

@ -0,0 +1,62 @@
import {useState} from "react";
import * as ImagePicker from "expo-image-picker";
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
export const useUploadProfilePicture = (customUserId?: string, existingPfp?: string) => {
const [profileImage, setProfileImage] = useState<
string | ImagePicker.ImagePickerAsset | null
>(existingPfp || null);
const [profileImageAsset, setProfileImageAsset] = useState<
ImagePicker.ImagePickerAsset | null
>(null);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture(customUserId);
const pickImage = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert("Permission to access camera roll is required!");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.canceled) {
setProfileImage(result.assets[0].uri);
setProfileImageAsset(result.assets[0]);
if (!customUserId) {
await changeProfilePicture(result.assets[0]);
}
}
};
const handleClearImage = async () => {
if (!customUserId) {
await updateUserData({newUserData: {pfp: null}});
}
setProfileImage(null);
};
const pfpUri =
profileImage && typeof profileImage === "object" && "uri" in profileImage
? profileImage.uri
: profileImage;
return {
pfpUri,
profileImage,
profileImageAsset,
handleClearImage,
pickImage,
changeProfilePicture
}
}