feat: add load more for user segment dropdown in targeting

Author: steveninhle

ui/dashboard/src/@queries/user-segments.ts

@@ -2,7 +2,12 @@ import {
   userSegmentsFetcher,
   UserSegmentsFetcherParams
 } from '@api/user-segment';
-import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  QueryClient,
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient
+} from '@tanstack/react-query';
 import type { UserSegmentCollection, QueryOptionsRespond } from '@types';
 
 type QueryOptions = QueryOptionsRespond<UserSegmentCollection> & {
@@ -48,3 +53,25 @@ export const prefetchUserSegments = (
     ...queryOptions
   });
 };
+
+type InfiniteQueryOptions = {
+  params?: Omit<UserSegmentsFetcherParams, 'cursor'>;
+  enabled?: boolean;
+};
+
+export const useInfiniteQueryUserSegments = ({
+  params,
+  enabled = true
+}: InfiniteQueryOptions = {}) =>
+  useInfiniteQuery({
+    queryKey: [USER_SEGMENTS_QUERY_KEY, 'infinite', params],
+    queryFn: ({ pageParam = '0' }) =>
+      userSegmentsFetcher({ ...params, cursor: pageParam as string }),
+    initialPageParam: '0',
+    getNextPageParam: (lastPage: UserSegmentCollection) => {
+      const nextCursor = Number(lastPage.cursor);
+      const total = Number(lastPage.totalCount);
+      return nextCursor < total ? String(nextCursor) : undefined;
+    },
+    enabled
+  });

ui/dashboard/src/elements/dropdown-with-search/index.tsx

@@ -36,6 +36,7 @@ export interface DropdownMenuWithSearchProps {
   itemClassName?: string;
   isExpand?: boolean;
   disabled?: boolean;
+  hideSearchInput?: boolean;
   trigger?: ReactNode;
   showArrow?: boolean;
   showClear?: boolean;
@@ -84,6 +85,7 @@ const DropdownMenuWithSearch = ({
   itemClassName,
   isExpand,
   disabled,
+  hideSearchInput,
   trigger,
   showArrow,
   showClear,
@@ -129,11 +131,14 @@ const DropdownMenuWithSearch = ({
     [options, searchValue, onSearchChange]
   );
 
-  let timerId: NodeJS.Timeout | null = null;
-  if (timerId) clearTimeout(timerId);
-  timerId = setTimeout(() => inputSearchRef?.current?.focus(), 50);
   const handleFocusSearchInput = useCallback(() => {}, []);
 
+  useEffect(() => {
+    if (hideSearchInput || !isOpen) return;
+    const timerId = setTimeout(() => inputSearchRef?.current?.focus(), 50);
+    return () => clearTimeout(timerId);
+  }, [hideSearchInput, isOpen]);
+
   const onClearSearchValue = useCallback(() => {
     setSearchValue('');
     onSearchChange?.('');
@@ -185,28 +190,30 @@ const DropdownMenuWithSearch = ({
             : {}
         }
       >
-        <DropdownMenuSearch
-          ref={inputSearchRef}
-          value={searchValue}
-          placeholder={inputPlaceholder}
-          onChange={value => {
-            contentRef.current?.scrollTo({
-              top: 0,
-              behavior: 'smooth'
-            });
-            setSearchValue(value);
-            onSearchChange?.(value);
-            handleFocusSearchInput();
-          }}
-          onKeyDown={event =>
-            onKeyDown?.({
-              event,
-              searchValue,
-              matchOptions: dropdownOptions,
-              onClearSearchValue
-            })
-          }
-        />
+        {!hideSearchInput && (
+          <DropdownMenuSearch
+            ref={inputSearchRef}
+            value={searchValue}
+            placeholder={inputPlaceholder}
+            onChange={value => {
+              contentRef.current?.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+              });
+              setSearchValue(value);
+              onSearchChange?.(value);
+              handleFocusSearchInput();
+            }}
+            onKeyDown={event =>
+              onKeyDown?.({
+                event,
+                searchValue,
+                matchOptions: dropdownOptions,
+                onClearSearchValue
+              })
+            }
+          />
+        )}
         {dropdownOptions?.length > 0 ? (
           <>
             <DropdownList