edit profile

src/screens/Profile/EditProfile.js

@@ -1,24 +1,28 @@
-import { View, Text, Image, TextInput, Platform } from "react-native";
-import React, { useEffect, useState } from "react";
-import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import { gutters, Palette } from "../../styles";
 import { BlurView } from "expo-blur";
-import Style, { size } from "../../styles/Style";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import GradientButton from "../../components/GradientButton";
+import * as ImagePicker from "expo-image-picker";
+import React, { useEffect, useState } from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
-import { goBack } from "../../navigation/NavigationService";
-import EditInput from "./components/EditInput";
 import { useGlobal } from "reactn";
-import firebase, { usersRef } from "../../config/firebase";
+import { background, img } from "../../assets";
+import GradientButton from "../../components/GradientButton";
+import firebase, { serverTimestamp, usersRef } from "../../config/firebase";
+import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
+import Page from "../../layouts/Page";
+import { goBack } from "../../navigation/NavigationService";
+import { useUser } from "../../providers/UserDataProvider";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { size } from "../../styles/Style";
+import EditInput from "./components/EditInput";
 
 const EditProfile = () => {
   const [currentUserData] = useGlobal("currentUserData");
   const [, setTooltip] = useGlobal("_tooltip");
-
+  const { currentUID } = useUser();
   const [pseudo, setPseudo] = useState("");
   const [loading, setLoading] = useState(false);
+  const [updatingPhoto, setUpdatingPhoto] = useState(false);
 
   useEffect(() => {
     if (currentUserData?.userName && !pseudo) {
@@ -53,18 +57,67 @@ const EditProfile = () => {
           userNameLower: lower,
           updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
         },
-        { merge: true },
+        { merge: true }
       );
 
       setTooltip({ text: "Pseudo mis à jour", type: "success" });
       goBack();
     } catch (e) {
       console.log("EditProfile onSave error", e?.message);
-      setTooltip({ text: e?.message || "Mise à jour impossible", type: "error" });
+      setTooltip({
+        text: e?.message || "Mise à jour impossible",
+        type: "error",
+      });
     } finally {
       setLoading(false);
     }
   };
+
+  const onChangePicture = async () => {
+    try {
+      setUpdatingPhoto(true);
+      const uid = currentUID;
+      if (!uid) return;
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [4, 4],
+        quality: 1,
+      });
+
+      const pickedUri = result?.assets?.[0]?.uri || null;
+      if (!pickedUri) return;
+
+      const { resultURI = null } = await uploadFileToFirebase({
+        uri: pickedUri,
+        path: `users/${uid}/profilePicture.png`,
+      });
+
+      if (!resultURI) throw new Error("Téléversement de l'image impossible");
+
+      await usersRef.doc(uid).set(
+        {
+          profilePictureURL: resultURI,
+          updatedAt: serverTimestamp(),
+        },
+        { merge: true }
+      );
+
+      await firebase.auth().currentUser.updateProfile({
+        photoURL: resultURI,
+      });
+
+      setTooltip({ text: "Photo de profil mise à jour", type: "success" });
+    } catch (e) {
+      setTooltip({
+        text: e?.message || "Erreur changement photo de profil",
+        type: "error",
+      });
+    } finally {
+      setUpdatingPhoto(false);
+    }
+  };
   return (
     <Page
       headerType="NAVIGATE"
@@ -91,9 +144,15 @@ const EditProfile = () => {
             Platform.OS !== "ios" ? "dimezisBlurView" : "none"
           }
         >
-          <View style={{ alignItems: "center" }}>
+          <Pressable style={{ alignItems: "center" }} onPress={onChangePicture}>
             <Image
-              source={img.profile}
+              source={
+                currentUserData?.profilePictureURL
+                  ? {
+                      uri: currentUserData?.profilePictureURL,
+                    }
+                  : img.profile
+              }
               style={{
                 ...size({ size: 108 }),
                 borderRadius: 100,
@@ -106,10 +165,15 @@ const EditProfile = () => {
                 fontFamily: FONT_FAMILY.InterRegular,
               }}
             >
-              Modifier la photo
+              {updatingPhoto ? "Chargement..." : "Modifier la photo"}
             </Text>
-          </View>
-          <EditInput label="Pseudo" placeholder="Pseudo" value={pseudo} setValue={setPseudo} />
+          </Pressable>
+          <EditInput
+            label="Pseudo"
+            placeholder="Pseudo"
+            value={pseudo}
+            setValue={setPseudo}
+          />
 
           <GradientButton
             title={loading ? "Chargement..." : "Enregistrer les modifications"}
@@ -118,7 +182,12 @@ const EditProfile = () => {
               alignSelf: "center",
             }}
             onPress={onSave}
-            disabled={loading || !pseudo?.trim() || pseudo?.trim() === (currentUserData?.userName || "")} 
+            disabled={
+              loading ||
+              updatingPhoto ||
+              !pseudo?.trim() ||
+              pseudo?.trim() === (currentUserData?.userName || "")
+            }
           />
         </BlurView>
       </View>

src/screens/Profile/Profile.js

@@ -1,5 +1,5 @@
 import { BlurView } from "expo-blur";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   FlatList,
   Image,
@@ -22,24 +22,29 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
+import { getFollowersCount, getFollowingCount } from "../../services/follows";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { gutters, size } from "../../styles/Style";
 import MusicCard from "../Library/components/MusicCard";
-
 const Profile = () => {
   const [selected, setSelected] = useState("Chansons");
   const [currentUserData] = useGlobal("currentUserData");
-  const { userProjects } = useUser();
+  const { userProjects, currentUID } = useUser();
   const [, setTooltip] = useGlobal("_tooltip");
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
-
+  const [following, setFollowing] = useState(0);
+  const [followers, setFollowers] = useState(0);
   const onPressMenu = (item) => {
     setSelected(item);
   };
-
+  useEffect(() => {
+    if (!currentUID) return;
+    getFollowersCount(currentUID).then(setFollowers);
+    getFollowingCount(currentUID).then(setFollowing);
+  }, [currentUID]);
   return (
     <Page
       backgroundImg={background.profileBG}
@@ -72,7 +77,13 @@ const Profile = () => {
           >
             <View style={{ alignItems: "center" }}>
               <Image
-                source={img.profile}
+                source={
+                  currentUserData?.profilePictureURL
+                    ? {
+                        uri: currentUserData?.profilePictureURL,
+                      }
+                    : img.profile
+                }
                 style={{
                   ...size({ size: 108 }),
                   borderRadius: 100,
@@ -96,15 +107,11 @@ const Profile = () => {
                 <Text style={styles.label}>playbacks</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
-                  {currentUserData?.followBy?.length || 0}
-                </Text>
+                <Text style={styles.value}>{followers}</Text>
                 <Text style={styles.label}>abonnés</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
-                  {currentUserData?.following?.length || 0}
-                </Text>
+                <Text style={styles.value}>{following}</Text>
                 <Text style={styles.label}>abonnements</Text>
               </View>
             </View>

src/screens/Profile/SingerProfile.js

@@ -10,14 +10,14 @@ import {
   View,
 } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
+import { useGlobal } from "reactn";
 import { background, icons, img } from "../../assets";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import GradientButton from "../../components/GradientButton";
+import { followsRef } from "../../config/firebase";
 import Page from "../../layouts/Page";
 import { useUser } from "../../providers/UserDataProvider";
 import { getFollowersCount, getFollowingCount } from "../../services/follows";
-import { useGlobal } from "reactn";
-import { followsRef } from "../../config/firebase";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Style, { size } from "../../styles/Style";