follow users

src/screens/Library/Research.js

@@ -1,29 +1,49 @@
-import {
-  View,
-  Text,
-  StyleSheet,
-  Pressable,
-  ScrollView,
-  Image,
-} from "react-native";
-import React, { useState } from "react";
-import Page from "../../layouts/Page";
+import React, { useMemo, useState } from "react";
+import { Image, Pressable, ScrollView, Text, View } from "react-native";
 import { background, img } from "../../assets";
-import { gutters, Palette, Style } from "../../styles";
-import SearchBar from "../../components/SearchBar";
-import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import BorderGradient from "../../components/BorderGradient/BorderGradient";
-import { BlurView } from "expo-blur";
-import ResearchHeader from "./components/ResearchHeader";
-import MusicCard from "./components/MusicCard";
 import MoreMenu from "../../components/MoreMenu";
-import { size } from "../../styles/Style";
-import { navigate } from "../../navigation/NavigationService";
+import { usersRef } from "../../config/firebase";
+import useDataFromRef from "../../hooks/useDataFromRef";
+import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
+import { navigate } from "../../navigation/NavigationService";
+import { gutters, Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { size } from "../../styles/Style";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import MusicCard from "./components/MusicCard";
+import ResearchHeader from "./components/ResearchHeader";
 
 const Research = () => {
   const [selected, setSelected] = useState(null);
+  const [search, setSearch] = useState("");
+  const queryText = useMemo(() => search.trim(), [search]);
+
+  const usersQueryRef = useMemo(() => {
+    if (!queryText) return null;
+    try {
+      return usersRef
+        .orderBy("userName")
+        .startAt(queryText)
+        .endAt(queryText + "\uf8ff");
+    } catch (e) {
+      return null;
+    }
+  }, [queryText]);
+
+  const {
+    data: userResults = [],
+    loading: usersLoading,
+    loadMore: loadMoreUsers,
+  } = useDataFromRef({
+    ref: usersQueryRef,
+    simpleRef: false,
+    listener: false,
+    condition: !!usersQueryRef && queryText.length > 0,
+    refreshArray: [queryText],
+    usePagination: true,
+    batchSize: 5,
+  });
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
@@ -49,6 +69,8 @@ const Research = () => {
         <ResearchHeader
           onPress={(item) => onPressMenu(item)}
           selected={selected}
+          searchValue={search}
+          onChangeSearch={setSearch}
         />
         <View style={{ flex: 1 }}>
           <ScrollView contentContainerStyle={{ paddingTop: 2 }}>
@@ -113,33 +135,66 @@ const Research = () => {
             {(!selected || selected === "Profils") && (
               <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
                 <CreateLyricsHeader
-                  gradientProps={{
-                    start: { x: 0, y: 0 },
-                    end: { x: 0, y: 1 },
-                  }}
+                  gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
                 >
                   <View style={{ gap: 8 }}>
-                    {Array.from({ length: 2 }).map((_, index) => (
-                      <Pressable
-                        style={{ gap: 14, ...Style.containerRow }}
-                        key={index}
-                        onPress={() => navigate(Routes.SingerProfile)}
+                    {queryText.length === 0 && (
+                      <Text
+                        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}
+                          onPress={() =>
+                            navigate(Routes.SingerProfile, { userId: u.id })
+                          }
+                        >
+                          <Image
+                            source={
+                              u?.photoURL ? { uri: u.photoURL } : img.profile
+                            }
+                            style={{ ...size({ size: 60 }), borderRadius: 100 }}
+                          />
+                          <Text
+                            style={{
+                              fontSize: 12,
+                              color: Palette.white,
+                              fontFamily: FONT_FAMILY.InterRegular,
+                            }}
+                          >
+                            {u?.userName || "Utilisateur"}
+                          </Text>
+                        </Pressable>
+                      ))}
+
+                    {queryText.length > 0 && userResults.length > 0 && (
+                      <Pressable
+                        onPress={loadMoreUsers}
+                        style={{ alignSelf: "center", marginTop: 6 }}
                       >
-                        <Image
-                          source={img.profile}
-                          style={{ ...size({ size: 60 }), borderRadius: 100 }}
-                        />
                         <Text
                           style={{
                             fontSize: 12,
                             color: Palette.white,
                             fontFamily: FONT_FAMILY.InterRegular,
+                            opacity: usersLoading ? 0.6 : 1,
                           }}
                         >
-                          ReggaetonLil
+                          {usersLoading ? "Chargement…" : "Charger plus"}
                         </Text>
                       </Pressable>
-                    ))}
+                    )}
                   </View>
                 </CreateLyricsHeader>
               </View>

src/screens/Library/components/ResearchHeader.js

@@ -6,10 +6,15 @@ import BorderGradient from "../../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 
-const ResearchHeader = ({ onPress, selected }) => {
+const ResearchHeader = ({ onPress, selected, searchValue = "", onChangeSearch = () => {} }) => {
   return (
     <View style={{ gap: 12 }}>
-      <SearchBar />
+      <SearchBar
+        textInputProps={{
+          value: searchValue,
+          onChangeText: onChangeSearch,
+        }}
+      />
       <View
         style={{
           ...Style.containerRow,