Add pagination for issue search results

funidata · Jun 25, 2024 · 6422e5e · 6422e5e
1 parent 4cbd50e
commit 6422e5e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/web/src/jira/components/JiraIssueComboBox.tsx b/web/src/jira/components/JiraIssueComboBox.tsx
@@ -36,26 +36,28 @@ const JiraIssueComboBox = <T extends FieldValues>({
     isLoading: pagesLoading,
   } = useGetIssues({ issueKeys: options, enabled: !loading });
 
-  const { data: searchedIssueData, isLoading: searchLoading } = useSearchIssues({
+  const {
+    data: searchedIssueData,
+    isLoading: searchLoading,
+    fetchNextPage: searchFetchNext,
+    hasNextPage: searchHasNext,
+  } = useSearchIssues({
     issueKeys: options,
     searchFilter: issueFilter,
   });
 
   const [sentryRef, { rootRef }] = useInfiniteScroll({
-    loading: pagesLoading,
-    hasNextPage,
+    loading: pagesLoading || searchLoading,
+    hasNextPage: issueFilter ? searchHasNext : hasNextPage,
     disabled: !!error,
-    onLoadMore: fetchNextPage,
+    onLoadMore: issueFilter ? searchFetchNext : fetchNextPage,
     delayInMs: 0,
   });
 
   useEffect(() => {
-    const queriedKeys = [
-      ...(dataPages?.pages || []),
-      ...(searchedIssueData ? [searchedIssueData] : []),
-    ];
+    const queriedKeys = [...(dataPages?.pages || []), ...(searchedIssueData?.pages || [])];
     setKeyToSummary((prev) => ({ ...prev, ...issueKeyToSummary(queriedKeys) }));
-  }, [dataPages?.pages, searchedIssueData]);
+  }, [dataPages?.pages, searchedIssueData?.pages]);
 
   useEffect(() => {
     if (issueFilter) setDebounceLoading(false);
@@ -71,7 +73,10 @@ const JiraIssueComboBox = <T extends FieldValues>({
       autoCompleteProps={{
         options: options.map((text) => ({ label: text, type: "option" })),
         renderOption: (props, option, state) => {
-          const maxIndex = (dataPages?.pageParams.length || 1) * jiraQueryMaxResults - 1;
+          const maxIndex =
+            ((issueFilter ? searchedIssueData : dataPages)?.pageParams.length || 1) *
+              jiraQueryMaxResults -
+            1;
           const shouldLoadMore = (state.index + 1) % jiraQueryMaxResults === 0 && state.index > 0;
           if (option.type === "loader")
             return (

diff --git a/web/src/jira/jiraApi.ts b/web/src/jira/jiraApi.ts
@@ -3,7 +3,6 @@ import {
   useQuery,
   useInfiniteQuery,
   UseInfiniteQueryResult,
-  keepPreviousData,
 } from "@tanstack/react-query";
 import { axiosJira, axiosKeijo } from "./axiosInstance";
 import { jiraQueryMaxResults } from "./jiraConfig";
@@ -92,26 +91,35 @@ export const useGetIssues = ({
 export const useSearchIssues = ({
   issueKeys,
   searchFilter,
-}: UseSearchIssuesProps): UseQueryResult<JiraIssueResult> => {
+}: UseSearchIssuesProps): UseInfiniteQueryResult<{
+  pages: JiraIssueResults;
+  pageParams: Array<number>;
+}> => {
   const { data: tokenData } = useGetAccessToken();
-
   const filteredKeys = issueKeys.filter((option) =>
     option.toLowerCase().trim().includes(searchFilter.toLowerCase().trim()),
   );
-  return useQuery({
+  return useInfiniteQuery({
     queryKey: ["issueSearch", searchFilter],
     staleTime: Infinity,
-    queryFn: async () => {
+    queryFn: async ({ pageParam }) => {
       return await getIssues(
         `${filteredKeys.length ? `key in (${filteredKeys.map((key) => `'${key}'`).join(", ")}) OR ` : ""}key in (${issueKeys
           .map((key) => `'${key}'`)
-          .join(", ")}) ${searchFilter ? `AND summary ~ '${searchFilter.trim()}*'` : ""}`,
+          .join(
+            ", ",
+          )}) ${searchFilter ? `AND summary ~ '${searchFilter.trim()}*'` : ""} ORDER BY key ASC`,
         tokenData?.access_token || "",
-        0,
+        pageParam,
       );
     },
     enabled: !!searchFilter,
-    placeholderData: keepPreviousData,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
+      const nextPageStartIndex = lastPageParam + jiraQueryMaxResults;
+      if (nextPageStartIndex >= lastPage.total) return;
+      return nextPageStartIndex;
+    },
   });
 };