search by music name

src/screens/Library/Research.js

@@ -2,7 +2,7 @@ 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 { usersRef, projectsRef } from "../../config/firebase";
 import useDataFromRef from "../../hooks/useDataFromRef";
 import { useGlobal } from "reactn";
 import Page from "../../layouts/Page";
@@ -36,6 +36,20 @@ const Research = () => {
     }
   }, [queryText]);
 
+  const projectsQueryRef = useMemo(() => {
+    try {
+      if (queryText) {
+        return projectsRef
+          .orderBy("title")
+          .startAt(queryText)
+          .endAt(queryText + "\uf8ff");
+      }
+      return projectsRef.orderBy("updatedAt", "desc");
+    } catch (e) {
+      return null;
+    }
+  }, [queryText]);
+
   const {
     data: userResults = [],
     loading: usersLoading,
@@ -51,9 +65,35 @@ const Research = () => {
   });
   const filteredUsers = useMemo(() => {
     const arr = Array.isArray(userResults) ? userResults : [];
-    return arr.filter((u) => u?.id !== currentUID && u?.userID !== currentUID);
+    const seen = new Set();
+    const unique = [];
+    for (const u of arr) {
+      const id = u?.id;
+      if (!id || seen.has(id)) continue;
+      if (id === currentUID || u?.userID === currentUID) continue;
+      seen.add(id);
+      unique.push(u);
+    }
+    return unique;
   }, [JSON.stringify(userResults), currentUID]);
 
+  const {
+    data: projectResults = [],
+    loading: projectsLoading,
+    loadMore: loadMoreProjects,
+  } = useDataFromRef({
+    ref: projectsQueryRef,
+    simpleRef: false,
+    listener: false,
+    condition: !!projectsQueryRef,
+    refreshArray: [queryText],
+    usePagination: true,
+    batchSize: 6,
+  });
+  const filteredProjects = useMemo(() => {
+    return Array.isArray(projectResults) ? projectResults : [];
+  }, [JSON.stringify(projectResults)]);
+
   useEffect(() => {
     setAutoLoads(0);
   }, [queryText]);
@@ -65,7 +105,13 @@ const Research = () => {
         loadMoreUsers();
       }
     }
-  }, [filteredUsers.length, usersLoading, usersQueryRef, autoLoads, loadMoreUsers]);
+  }, [
+    filteredUsers.length,
+    usersLoading,
+    usersQueryRef,
+    autoLoads,
+    loadMoreUsers,
+  ]);
   const [menuTop, setMenuTop] = useState(0);
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
@@ -105,17 +151,42 @@ const Research = () => {
                   }}
                 >
                   <View style={{ gap: 10 }}>
-                    {Array.from({ length: 3 }).map((_, index) => (
-                      <MusicCard
-                        key={index}
-                        onPress={() => navigate(Routes.MusicDetails)}
-                        onPressMore={(posTop) => {
-                          setSelectedProjectId(null);
-                          setMenuTop(posTop);
-                          setShowMenu((prev) => !prev || posTop !== menuTop);
-                        }}
-                      />
-                    ))}
+                    {Array.isArray(filteredProjects) &&
+                      filteredProjects.slice(0, 6).map((p) => (
+                        <MusicCard
+                          key={p.id}
+                          title={p?.title || "Sans titre"}
+                          subtitle={"MusicLand"}
+                          imageUri={p?.coverUrl || null}
+                          projectId={p?.id}
+                          likedBy={p?.likedBy || []}
+                          onPress={() =>
+                            navigate(Routes.MusicDetails, { projectId: p.id })
+                          }
+                          onPressMore={(posTop) => {
+                            setSelectedProjectId(p.id);
+                            setMenuTop(posTop);
+                            setShowMenu((prev) => !prev || posTop !== menuTop);
+                          }}
+                        />
+                      ))}
+                    {(filteredProjects.length >= 6 || projectsLoading) && (
+                      <Pressable
+                        onPress={loadMoreProjects}
+                        style={{ alignSelf: "center", marginTop: 6 }}
+                      >
+                        <Text
+                          style={{
+                            fontSize: 12,
+                            color: Palette.white,
+                            fontFamily: FONT_FAMILY.InterRegular,
+                            opacity: projectsLoading ? 0.6 : 1,
+                          }}
+                        >
+                          {projectsLoading ? "Chargement…" : "Charger plus"}
+                        </Text>
+                      </Pressable>
+                    )}
                   </View>
                 </CreateLyricsHeader>
               </View>
@@ -171,7 +242,14 @@ const Research = () => {
                         >
                           <Image
                             source={
-                              u?.photoURL ? { uri: u.photoURL } : img.profile
+                              u?.pictureUrl || u?.profilePictureURL || u?.photoURL
+                                ? {
+                                    uri:
+                                      u?.pictureUrl ||
+                                      u?.profilePictureURL ||
+                                      u?.photoURL,
+                                  }
+                                : img.profile
                             }
                             style={{ ...size({ size: 60 }), borderRadius: 100 }}
                           />