edit profile

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
-        .orderBy("userName")
-        .startAt(queryText)
-        .endAt(queryText + "\uf8ff");
+      if (queryText) {
+        return usersRef
+          .orderBy("userName")
+          .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 && (
-                      <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) => (
+                    {Array.isArray(filteredUsers) &&
+                      filteredUsers.slice(0, 5).map((u) => (
                         <Pressable
                           style={{ gap: 14, ...Style.containerRow }}
                           key={u.id}
@@ -177,8 +186,7 @@ const Research = () => {
                           </Text>
                         </Pressable>
                       ))}
-
-                    {queryText.length > 0 && userResults.length > 0 && (
+                    {(filteredUsers.length >= 5 || usersLoading) && (
                       <Pressable
                         onPress={loadMoreUsers}
                         style={{ alignSelf: "center", marginTop: 6 }}