Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/ops-console/components/SearchAndFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ interface SearchAndFilterProps {
variantType?: 'outlined' | 'standard';
filterIconSrc?: string;
searchPlaceholder?: string;
debounceMs?: number;
}

const DEBOUNCE_MS = 800;
Expand All @@ -39,6 +40,7 @@ const SearchAndFilter: React.FC<SearchAndFilterProps> = ({
variantType,
filterIconSrc,
searchPlaceholder,
debounceMs = DEBOUNCE_MS,
}) => {
const { t } = useTranslation();
const isMobile = useMediaQuery('(max-width: 900px)');
Expand All @@ -61,9 +63,9 @@ const SearchAndFilter: React.FC<SearchAndFilterProps> = ({
target: { value: inputValue },
} as React.ChangeEvent<HTMLInputElement>);
}
}, DEBOUNCE_MS);
}, debounceMs);
return () => clearTimeout(handler);
}, [inputValue]);
}, [debounceMs, inputValue, onSearchChange, searchTerm]);

const [showMobileSearch, setShowMobileSearch] = useState(forceOpenSearch);

Expand Down
5 changes: 2 additions & 3 deletions src/ops-console/pages/CampaignListing.fetcher.ts
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ export const useCampaignListingPageState = (api: ServiceApi) => {
const [searchTerm, setSearchTerm] = useState(
() => queryParams.get('search') || '',
);
const debouncedSearchTerm = useDebouncedValue(searchTerm, 500);
const [page, setPage] = useState(() => {
const pageParam = Number.parseInt(queryParams.get('page') || '', 10);
return Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
Expand Down Expand Up @@ -186,8 +185,8 @@ export const useCampaignListingPageState = (api: ServiceApi) => {
pageSize: CAMPAIGN_LISTING_PAGE_SIZE,
orderBy: sortBy,
orderDir: sortOrder,
// Debounce keystrokes so the listing does not hit Supabase on every character typed.
searchTerm: debouncedSearchTerm,
// SearchAndFilter already debounces input, so send the settled value straight through.
searchTerm,
});

useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions src/ops-console/pages/CampaignListingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ const CampaignListingPage: React.FC = () => {
isFilter={false}
variantType="outlined"
searchPlaceholder={String(t('Search Campaigns'))}
debounceMs={250}
/>
</Box>
</Box>
Expand Down
Loading
Loading