edit profile

src/config/firebase.js

@@ -54,7 +54,7 @@ export const notificationsRef = firestore.collection("notifications");
 export const documentsRef = firestore.collection("documents");
 export const chatsRef = firestore.collection("chats");
 
-export const { arrayUnion, arrayRemove, increment } =
+export const { arrayUnion, arrayRemove, increment, serverTimestamp } =
   firebase.firestore.FieldValue;
 
 export default firebase;

src/providers/UserDataProvider.js

@@ -93,7 +93,7 @@ export default ({ children }) => {
           {
             followerId: currentUID,
             followeeId: userId,
-            createdAt: firebase.firestore.FieldValue.serverTimestamp(),
+            createdAt: new Date(),
           },
           { merge: true }
         );
@@ -109,7 +109,10 @@ export default ({ children }) => {
     try {
       if (currentUID && userId) {
         await followsRef.doc(`${currentUID}_${userId}`).delete();
-        setTooltip({ type: "success", text: "Vous ne suivez plus cet utilisateur" });
+        setTooltip({
+          type: "success",
+          text: "Vous ne suivez plus cet utilisateur",
+        });
       }
     } catch (e) {
       console.log(e);

src/screens/AccountSettings.js

@@ -1,21 +1,21 @@
-import React, { useGlobal } from "reactn";
-import { Text, Pressable } from "react-native";
 import * as ImagePicker from "expo-image-picker";
+import { Pressable, Text } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
+import React, { useGlobal } from "reactn";
 
 import { responsiveWidth } from "../actions/responsiveSizes.js";
 import Page from "../layouts/Page";
 
+import alert from "../components/Alert.js";
 import Avatar from "../components/Avatar";
 import InputRow from "../components/InputRow";
 import ItemRowList from "../components/ItemRowList.js";
-import alert from "../components/Alert.js";
 
 import firebase, { usersRef } from "../config/firebase";
 
-import { Fonts, gutters, Palette, Style } from "../styles";
 import { uploadFileToFirebase } from "../helpers/uploadToFirebase";
 import { Routes } from "../navigation/Routes.js";
+import { Fonts, gutters, Palette, Style } from "../styles";
 
 import { useUserData } from "../providers/UserDataProvider.js";
 

src/screens/Library/Research.js

@@ -1,9 +1,10 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Image, Pressable, ScrollView, Text, View } from "react-native";
 import { background, img } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
 import { usersRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
+import { useGlobal } from "reactn";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -18,14 +19,18 @@ const Research = () => {
   const [selected, setSelected] = useState(null);
   const [search, setSearch] = useState("");
   const queryText = useMemo(() => search.trim(), [search]);
+  const [currentUID] = useGlobal("currentUID");
+  const [autoLoads, setAutoLoads] = useState(0);
 
   const usersQueryRef = useMemo(() => {
-    if (!queryText) return null;
     try {
-      return usersRef
+      if (queryText) {
-        .orderBy("userName")
+        return usersRef
-        .startAt(queryText)
+          .orderBy("userName")
-        .endAt(queryText + "\uf8ff");
+          .startAt(queryText)
+          .endAt(queryText + "\uf8ff");
+      }
+      return usersRef.orderBy("userName");
     } catch (e) {
       return null;
     }
@@ -39,11 +44,28 @@ const Research = () => {
     ref: usersQueryRef,
     simpleRef: false,
     listener: false,
-    condition: !!usersQueryRef && queryText.length > 0,
+    condition: !!usersQueryRef,
     refreshArray: [queryText],
     usePagination: true,
     batchSize: 5,
   });
+  const filteredUsers = useMemo(() => {
+    const arr = Array.isArray(userResults) ? userResults : [];
+    return arr.filter((u) => u?.id !== currentUID && u?.userID !== currentUID);
+  }, [JSON.stringify(userResults), currentUID]);
+
+  useEffect(() => {
+    setAutoLoads(0);
+  }, [queryText]);
+
+  useEffect(() => {
+    if (filteredUsers.length < 5 && usersQueryRef && !usersLoading) {
+      if (autoLoads < 3) {
+        setAutoLoads((n) => n + 1);
+        loadMoreUsers();
+      }
+    }
+  }, [filteredUsers.length, usersLoading, usersQueryRef, autoLoads, loadMoreUsers]);
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
@@ -138,21 +160,8 @@ const Research = () => {
                   gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
                 >
                   <View style={{ gap: 8 }}>
-                    {queryText.length === 0 && (
+                    {Array.isArray(filteredUsers) &&
-                      <Text
+                      filteredUsers.slice(0, 5).map((u) => (
-                        style={{
-                          fontSize: 12,
-                          color: Palette.gray,
-                          fontFamily: FONT_FAMILY.InterRegular,
-                        }}
-                      >
-                        Commence à taper pour rechercher des profils…
-                      </Text>
-                    )}
-
-                    {queryText.length > 0 &&
-                      Array.isArray(userResults) &&
-                      userResults.map((u) => (
                         <Pressable
                           style={{ gap: 14, ...Style.containerRow }}
                           key={u.id}
@@ -177,8 +186,7 @@ const Research = () => {
                           </Text>
                         </Pressable>
                       ))}
-
+                    {(filteredUsers.length >= 5 || usersLoading) && (
-                    {queryText.length > 0 && userResults.length > 0 && (
                       <Pressable
                         onPress={loadMoreUsers}
                         style={{ alignSelf: "center", marginTop: 6 }}

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 * as ImagePicker from "expo-image-picker";
-import { FONT_FAMILY } from "../../styles/Fonts";
+import React, { useEffect, useState } from "react";
-import GradientButton from "../../components/GradientButton";
+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>
+          </Pressable>
-          <EditInput label="Pseudo" placeholder="Pseudo" value={pseudo} setValue={setPseudo} />
+          <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}>
+                <Text style={styles.value}>{followers}</Text>
-                  {currentUserData?.followBy?.length || 0}
-                </Text>
                 <Text style={styles.label}>abonnés</Text>
               </View>
               <View style={{ flex: 1, alignItems: "center" }}>
-                <Text style={styles.value}>
+                <Text style={styles.value}>{following}</Text>
-                  {currentUserData?.following?.length || 0}
-                </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";

src/services/follows.js

@@ -13,7 +13,7 @@ export const getFollowingCount = async (userId) => {
 };
 
 export const unfollowUser = async ({ followerId, followeeId }) => {
-  if (!followerId || !followeeId) throw new Error("Missing followerId/followeeId");
+  if (!followerId || !followeeId) throw new Error("Erreur lors du unfollow");
   const id = `${followerId}_${followeeId}`;
   await followsRef.doc(id).delete();
   return id;