Persist queried summaries in state and style loading texts

funidata · Jun 19, 2024 · 3d5c98c · 3d5c98c
1 parent 2472bab
commit 3d5c98c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/web/src/components/entry-dialog/DimensionComboBox.tsx b/web/src/components/entry-dialog/DimensionComboBox.tsx
@@ -9,7 +9,8 @@ type DimensionComboBoxProps<T extends FieldValues> = {
   title: string;
   rules?: ControllerProps["rules"];
   autoCompleteProps?: Partial<
-    AutocompleteProps<string, boolean | undefined, boolean | undefined, boolean | undefined>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    AutocompleteProps<any, boolean | undefined, boolean | undefined, boolean | undefined>
   >;
 };
 

diff --git a/web/src/jira/components/JiraIssueComboBox.tsx b/web/src/jira/components/JiraIssueComboBox.tsx
@@ -1,4 +1,4 @@
-import { ListItem } from "@mui/material";
+import { ListItem, Typography } from "@mui/material";
 import { ControllerProps, FieldValues, UseFormReturn } from "react-hook-form";
 import { FindDimensionOptionsDocument } from "../../graphql/generated/graphql";
 import { useQuery } from "@apollo/client";
@@ -8,6 +8,7 @@ import { useDebounceValue } from "usehooks-ts";
 import { useGetIssues, useSearchIssues } from "../jiraApi";
 import { issueKeyToSummary } from "../jiraUtils";
 import { jiraQueryMaxResults } from "../jiraConfig";
+import { useEffect, useState } from "react";
 
 type JiraIssueComboBoxProps<T extends FieldValues> = {
   form: UseFormReturn<T>;
@@ -24,6 +25,9 @@ const JiraIssueComboBox = <T extends FieldValues>({
   const options = data?.findDimensionOptions[name] || [];
 
   const [issueFilter, setIssueFilter] = useDebounceValue("", 500);
+  const [debounceLoading, setDebounceLoading] = useState(false);
+
+  const [keyToSummary, setKeyToSummary] = useState<Record<string, string>>({});
   const {
     data: dataPages,
     error,
@@ -45,12 +49,17 @@ const JiraIssueComboBox = <T extends FieldValues>({
     delayInMs: 0,
   });
 
-  const pagedIssueData = dataPages?.pages;
-  const queriedKeys = [
-    ...(pagedIssueData || []),
-    ...(searchedIssueData ? [searchedIssueData] : []),
-  ];
-  const keyToSummary = issueKeyToSummary(queriedKeys);
+  useEffect(() => {
+    const queriedKeys = [
+      ...(dataPages?.pages || []),
+      ...(searchedIssueData ? [searchedIssueData] : []),
+    ];
+    setKeyToSummary((prev) => ({ ...prev, ...issueKeyToSummary(queriedKeys) }));
+  }, [dataPages?.pages, searchedIssueData]);
+
+  useEffect(() => {
+    if (issueFilter) setDebounceLoading(false);
+  }, [issueFilter]);
 
   const getOptionText = (option: string) =>
     keyToSummary[option] ? `${option}: ${keyToSummary[option]}` : option;
@@ -60,35 +69,47 @@ const JiraIssueComboBox = <T extends FieldValues>({
       {...params}
       name={name}
       autoCompleteProps={{
-        options: options,
+        options: options.map((text) => ({ label: text, type: "option" })),
         renderOption: (props, option, state) => {
+          const maxIndex = (dataPages?.pageParams.length || 1) * jiraQueryMaxResults - 1;
           const shouldLoadMore = (state.index + 1) % jiraQueryMaxResults === 0 && state.index > 0;
-          if (state.index + 1 > (dataPages?.pageParams.length || 1) * jiraQueryMaxResults)
-            return null;
+          if (option.type === "loader")
+            return (
+              <ListItem>
+                <Typography color="GrayText">{option.label}</Typography>
+              </ListItem>
+            );
+          if (state.index > maxIndex) return null;
           return (
             <ListItem {...props} ref={shouldLoadMore ? sentryRef : undefined}>
-              {getOptionText(option as string)}
-
-              {!keyToSummary[option] && searchLoading && " ..."}
+              {getOptionText(option.label)}
+              &nbsp;
+              {!keyToSummary[option.label] && (searchLoading || debounceLoading) && (
+                <Typography color="GrayText">...</Typography>
+              )}
             </ListItem>
           );
         },
         filterOptions: (options, state) => {
           const filtered = options.filter((option) =>
-            getOptionText(option as string)
+            getOptionText(option.label)
               .toLowerCase()
               .trim()
               .includes(state.inputValue.toLowerCase().trim()),
           );
+          if (searchLoading || debounceLoading || pagesLoading)
+            filtered.push({ label: "Loading...", type: "loader" });
           return filtered;
         },
         ListboxProps: {
           ref: rootRef,
         },
         onInputChange: (_, value, reason) => {
           if (reason === "input") {
+            setDebounceLoading(true);
             setIssueFilter(value);
           }
+          if (!value || value === issueFilter) setDebounceLoading(false);
         },
       }}
     />

diff --git a/web/src/jira/jiraApi.ts b/web/src/jira/jiraApi.ts
@@ -3,6 +3,7 @@ import {
   useQuery,
   useInfiniteQuery,
   UseInfiniteQueryResult,
+  keepPreviousData,
 } from "@tanstack/react-query";
 import { axiosJira, axiosKeijo } from "./axiosInstance";
 import { jiraQueryMaxResults } from "./jiraConfig";
@@ -99,6 +100,7 @@ export const useSearchIssues = ({
   );
   return useQuery({
     queryKey: ["issueSearch", searchFilter],
+    staleTime: Infinity,
     queryFn: async () => {
       return await getIssues(
         `${filteredKeys.length ? `key in (${filteredKeys.map((key) => `'${key}'`).join(", ")}) OR ` : ""}key in (${issueKeys
@@ -109,6 +111,7 @@ export const useSearchIssues = ({
       );
     },
     enabled: !!searchFilter,
+    placeholderData: keepPreviousData,
   });
 };