Added pfp images

hooks/firebase/useChangeProfilePicture.ts

@@ -0,0 +1,57 @@
+import { useMutation, useQueryClient } from "react-query";
+import firestore from "@react-native-firebase/firestore";
+import storage from "@react-native-firebase/storage";
+import { useAuthContext } from "@/contexts/AuthContext";
+import * as ImagePicker from "expo-image-picker";
+import { Platform } from "react-native";
+
+export const useChangeProfilePicture = () => {
+    const queryClient = useQueryClient();
+    const { user, refreshProfileData } = useAuthContext();
+
+    return useMutation({
+        mutationKey: ["changeProfilePicture"],
+        mutationFn: async (profilePicture: ImagePicker.ImagePickerAsset) => {
+            if (!profilePicture?.uri) {
+                throw new Error("No image selected");
+            }
+
+            let imageUri = profilePicture.uri;
+
+            console.log("Selected image URI:", imageUri);
+
+            if (Platform.OS === 'ios' && !imageUri.startsWith('file://')) {
+                imageUri = `file://${imageUri}`;
+                console.log("Updated image URI for iOS:", imageUri);
+            }
+
+            const fileName = `profilePictures/${new Date().getTime()}_profile.jpg`;
+            console.log("Firebase Storage file path:", fileName);
+
+            try {
+                const reference = storage().ref(fileName);
+
+                console.log('Uploading image to Firebase Storage...');
+                await reference.putFile(imageUri);
+                console.log('Image uploaded successfully!');
+
+                const downloadURL = await reference.getDownloadURL();
+                console.log("Download URL:", downloadURL);
+
+                await firestore()
+                    .collection("Profiles")
+                    .doc(user?.uid)
+                    .update({ pfp: downloadURL });
+
+            } catch (e) {
+                console.error("Error uploading profile picture:", e.message);
+                throw e;
+            }
+        },
+        onSuccess: () => {
+            // Invalidate queries to refresh profile data
+            queryClient.invalidateQueries("Profiles");
+            refreshProfileData();
+        },
+    });
+};