fix users list

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -1,7 +1,7 @@
 import { type FC, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
-import { useGetUsers } from "../../../users/hooks/useUserData";
+import { useGetUsersInfinite } from "../../../users/hooks/useUserData";
 import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
 import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
 import { parseApiDate, toApiDate } from "./date/utils";
@@ -35,7 +35,16 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
   const createTaskAttachment = useCreateTaskAttachment();
   const singleUpload = useSingleUpload();
   const updateTask = useUpdateTask();
-  const getUsers = useGetUsers("");
+  const isUsersOpen = activeTab === "users";
+  const [userSearch, setUserSearch] = useState("");
+  const [debouncedUserSearch, setDebouncedUserSearch] = useState("");
+  const {
+    data: usersData,
+    isPending: isUsersPending,
+    isFetchingNextPage: isFetchingNextUsersPage,
+    fetchNextPage: fetchNextUsersPage,
+    hasNextPage: hasNextUsersPage,
+  } = useGetUsersInfinite(debouncedUserSearch, undefined, isUsersOpen);
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>([]);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set());
@@ -43,6 +52,14 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
   const [startDate, setStartDate] = useState<DateObject | null>(null);
   const [endDate, setEndDate] = useState<DateObject | null>(null);
 
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedUserSearch(userSearch.trim());
+    }, 300);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [userSearch]);
+
   useEffect(() => {
     if (!taskDetail) return;
 
@@ -69,10 +86,13 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
   const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
   const users = useMemo((): TaskUser[] => {
     const apiUsers: TaskUser[] =
-      getUsers.data?.data?.users?.map((user: UserItemType) => ({
-        id: user.id,
-        name: `${user.firstName} ${user.lastName}`.trim(),
-      })) ?? [];
+      usersData?.pages.flatMap(
+        (page) =>
+          page.data?.users?.map((user: UserItemType) => ({
+            id: user.id,
+            name: `${user.firstName} ${user.lastName}`.trim(),
+          })) ?? [],
+      ) ?? [];
     const taskUsers: TaskUser[] =
       taskDetail?.users?.map((user) => ({
         id: user.id,
@@ -87,10 +107,20 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     });
 
     return Array.from(userMap.values());
-  }, [getUsers.data, taskDetail?.users]);
+  }, [usersData?.pages, taskDetail?.users]);
+  const listUsers = useMemo((): TaskUser[] => {
+    return (
+      usersData?.pages.flatMap(
+        (page) =>
+          page.data?.users?.map((user: UserItemType) => ({
+            id: user.id,
+            name: `${user.firstName} ${user.lastName}`.trim(),
+          })) ?? [],
+      ) ?? []
+    );
+  }, [usersData?.pages]);
   const selectedUsers = users.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
-  const isUsersOpen = activeTab === "users";
   const isChecklistOpen = activeTab === "checklist";
   const isAttachmentOpen = activeTab === "attachment";
   const isDateOpen = activeTab === "date";
@@ -305,11 +335,18 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
         usersPopover={
           isUsersOpen ? (
             <TaskDetailUsersPopover
-              users={users}
+              users={listUsers}
               selectedIds={selectedUserIds}
               onToggle={handleUserToggle}
-              isLoading={getUsers.isPending}
+              isLoading={isUsersPending}
               isSubmitting={updateTask.isPending}
+              hasNextPage={hasNextUsersPage}
+              isFetchingNextPage={isFetchingNextUsersPage}
+              onLoadMore={() => {
+                void fetchNextUsersPage();
+              }}
+              search={userSearch}
+              onSearchChange={setUserSearch}
             />
           ) : null
         }