Fix setter name filter bug and add multiselect autocomplete with route counts (#297)

* Fix setter name filter bug and add multiselect autocomplete with route counts

**Bug Fix:**
- Fixed setter name filter not actually filtering climbs
- The parameter was flowing through UI → URL → API but never used in SQL WHERE clause
- Added setterNameCondition to create-climb-filters.ts using inArray()

**Enhancements:**
- Changed setter filter from single text input to multiselect autocomplete
- Added route count display next to each setter name (e.g., "John Doe (42)")
- Created new API endpoint: /api/v1/[board]/[layout]/[size]/[sets]/[angle]/setters
- Uses AntD Select component with mode="multiple" for better UX

**Type Changes:**
- Updated SearchRequest.settername from string to string[]
- Updated URL parameter handling to support comma-separated values
- Fixed analytics tracking to check array length

**Technical Details:**
- New query: app/lib/db/queries/climbs/setter-stats.ts
- New component: app/components/search-drawer/setter-name-select.tsx
- Uses SWR for data fetching with client-side search filtering
- Maintains AntD design system best practices

* Remove unused useEffect import from setter-name-select component

* Fix module import error - use usePathname to construct API URL instead of non-existent board-details-context

* Fix TypeScript errors - update settername from string to string[] across tests and fix setter-stats query

* Fix parsedRouteSearchParamsToSearchParams to handle settername string->array conversion from URL query params

* Use usePathname hook instead of window.location.pathname for better client-side navigation

* Add fallback for usePathname to prevent errors in test environments

* Fix React hooks rules violation - call usePathname unconditionally

* Add usePathname mock to queue-context tests

* Add usePathname mock to all beforeEach blocks in queue-context tests

* Fix TypeScript error - add type assertion for settername in parsedRouteSearchParamsToSearchParams

* Address code review: use URL utilities, implement lazy loading for setter search

- Replace manual pathname regex parsing with constructSetterStatsUrl utility
- Add parsedParams to QueueContext for better component access
- Implement progressive loading: only fetch when user types 2+ characters
- Add search query parameter support to setter-stats API
- Use server-side filtering with ILIKE for better performance
- Add 50-result limit to setter stats query
- Improve UX with helpful placeholder and notFoundContent messages

* Show top setters when dropdown is opened without typing

- Track dropdown open state with onDropdownVisibleChange
- Fetch top setters when dropdown opens (before user types)
- Switch to search mode when user types 2+ characters
- Improves UX by showing popular setters immediately

---------

Co-authored-by: Claude <[email protected]>

Author: marcodejongh

app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/setters/route.ts

@@ -0,0 +1,26 @@
+import { getSetterStats, SetterStat } from '@/app/lib/db/queries/climbs/setter-stats';
+import { BoardRouteParameters, ErrorResponse } from '@/app/lib/types';
+import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
+import { NextResponse } from 'next/server';
+
+export async function GET(
+  req: Request,
+  props: { params: Promise<BoardRouteParameters> },
+): Promise<NextResponse<SetterStat[] | ErrorResponse>> {
+  const params = await props.params;
+
+  try {
+    const parsedParams = await parseBoardRouteParamsWithSlugs(params);
+
+    // Extract search query parameter
+    const url = new URL(req.url);
+    const searchQuery = url.searchParams.get('search') || undefined;
+
+    const setterStats = await getSetterStats(parsedParams, searchQuery);
+
+    return NextResponse.json(setterStats);
+  } catch (error) {
+    console.error('Error fetching setter stats:', error);
+    return NextResponse.json({ error: 'Failed to fetch setter stats' }, { status: 500 });
+  }
+}

app/components/queue-control/__tests__/hooks/use-queue-data-fetching.test.tsx

@@ -75,7 +75,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
   hideAttempted: false,

app/components/queue-control/__tests__/queue-context.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import React from 'react';
 import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { QueueProvider, useQueueContext } from '../queue-context';
 import { ParsedBoardRouteParameters, Climb } from '@/app/lib/types';
 import { ClimbQueueItem } from '../types';
@@ -11,7 +11,8 @@ import { useConnection } from '../../connection-manager/use-connection';
 // Mock dependencies
 vi.mock('next/navigation', () => ({
   useSearchParams: vi.fn(),
-  useRouter: vi.fn()
+  useRouter: vi.fn(),
+  usePathname: vi.fn()
 }));
 
 vi.mock('@/app/lib/url-utils', () => ({
@@ -76,6 +77,7 @@ const mockSearchParams = new URLSearchParams();
 const mockRouter = {
   replace: vi.fn()
 };
+const mockPathname = '/test/path';
 
 const mockUseConnection = vi.mocked(useConnection);
 
@@ -144,6 +146,7 @@ describe('QueueProvider', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
     mockUseConnection.mockReturnValue({
       sendData: vi.fn(),
       peerId: 'test-peer-id',
@@ -249,7 +252,8 @@ describe('QueueProvider with peer functionality', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
-    
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
+
     // Mock peer context with host
     mockSubscribeToData.mockReturnValue(vi.fn()); // Return unsubscribe function
     mockUseConnection.mockReturnValue({
@@ -364,6 +368,7 @@ describe('QueueProvider utility functions', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
     mockUseConnection.mockReturnValue({
       sendData: vi.fn(),
       peerId: 'test-peer-id',

app/components/queue-control/__tests__/reducer.test.ts

@@ -41,7 +41,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
   hideAttempted: false,
@@ -286,7 +286,7 @@ describe('queueReducer', () => {
         sortOrder: 'asc',
         name: '',
         onlyClassics: false,
-        settername: '',
+        settername: [],
         setternameSuggestion: '',
         holdsFilter: {},
         hideAttempted: false,

app/components/queue-control/queue-context.tsx

@@ -2,7 +2,7 @@
 'use client';
 
 import React, { useContext, createContext, ReactNode, useEffect, useCallback } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { v4 as uuidv4 } from 'uuid';
 import { useConnection } from '../connection-manager/use-connection';
 import { useQueueReducer } from './reducer';
@@ -29,10 +29,11 @@ const QueueContext = createContext<QueueContextType | undefined>(undefined);
 export const QueueProvider = ({ parsedParams, children }: QueueContextProps) => {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const pathname = usePathname();
   const initialSearchParams = urlParamsToSearchParams(searchParams);
   const [state, dispatch] = useQueueReducer(initialSearchParams);
   const connection = useConnection();
-  
+
   // Check if we're in controller mode
   const controllerUrl = searchParams.get('controllerUrl');
   const isControllerMode = !!controllerUrl;
@@ -171,6 +172,7 @@ export const QueueProvider = ({ parsedParams, children }: QueueContextProps) =>
     isFetchingClimbs,
     hasDoneFirstFetch: state.hasDoneFirstFetch,
     viewOnlyMode: isControllerMode ? false : (hostId ? !state.initialQueueDataReceivedFromPeers : false),
+    parsedParams,
     // Actions
     addToQueue: (climb: Climb) => {
       const newItem = createClimbQueueItem(climb, peerId);
@@ -246,8 +248,9 @@ export const QueueProvider = ({ parsedParams, children }: QueueContextProps) =>
 
       // Update URL with new search parameters
       const urlParams = searchParamsToUrlParams(params);
-      const currentPath = window.location.pathname;
-      router.replace(`${currentPath}?${urlParams.toString()}`);
+      const queryString = urlParams.toString();
+      const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
+      router.replace(newUrl, { scroll: false });
     },
 
     mirrorClimb: () => {

app/components/queue-control/types.ts

@@ -1,4 +1,4 @@
-import { Climb, SearchRequestPagination } from '@/app/lib/types';
+import { Climb, SearchRequestPagination, ParsedBoardRouteParameters } from '@/app/lib/types';
 
 export type PeerId = string | null;
 export type UserName = PeerId;
@@ -51,6 +51,7 @@ export interface QueueContextType {
   isFetchingClimbs: boolean;
   hasDoneFirstFetch: boolean;
   viewOnlyMode: boolean;
+  parsedParams: ParsedBoardRouteParameters;
   addToQueue: (climb: Climb) => void;
   removeFromQueue: (item: ClimbQueueItem) => void;
   setCurrentClimb: (climb: Climb) => void;

app/components/queue-control/ui-searchparams-provider.tsx

@@ -34,7 +34,7 @@ export const UISearchParamsProvider: React.FC<{ children: React.ReactNode }> = (
     if (uiSearchParams.minRating) activeFilters.push('minRating');
     if (uiSearchParams.onlyClassics) activeFilters.push('classics');
     if (uiSearchParams.gradeAccuracy) activeFilters.push('gradeAccuracy');
-    if (uiSearchParams.settername) activeFilters.push('setter');
+    if (uiSearchParams.settername.length > 0) activeFilters.push('setter');
     if (uiSearchParams.holdsFilter && Object.entries(uiSearchParams.holdsFilter).length > 0)
       activeFilters.push('holds');
     if (uiSearchParams.hideAttempted) activeFilters.push('hideAttempted');

app/components/search-drawer/basic-search-form.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import React from 'react';
-import { Form, InputNumber, Row, Col, Select, Input, Switch, Alert, Typography } from 'antd';
+import { Form, InputNumber, Row, Col, Select, Switch, Alert, Typography } from 'antd';
 import { TENSION_KILTER_GRADES } from '@/app/lib/board-data';
 import { useUISearchParams } from '@/app/components/queue-control/ui-searchparams-provider';
 import { useBoardProvider } from '@/app/components/board-provider/board-provider-context';
 import SearchClimbNameInput from './search-climb-name-input';
+import SetterNameSelect from './setter-name-select';
 
 const { Title } = Typography;
 
@@ -191,7 +192,7 @@ const BasicSearchForm: React.FC = () => {
       </Form.Item>
 
       <Form.Item label="Setter Name">
-        <Input value={uiSearchParams.settername} onChange={(e) => updateFilters({ settername: e.target.value })} />
+        <SetterNameSelect />
       </Form.Item>
 
       <Form.Item>

app/components/search-drawer/constants.ts

@@ -12,7 +12,7 @@ export const defaultClimbSearchParameters: SearchRequestPagination = {
   minRating: 1.0,
   onlyClassics: false,
   gradeAccuracy: 1,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   //@ts-expect-error TODO fix later
   holdsFilter: '',

app/components/search-drawer/setter-name-select.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Select } from 'antd';
+import { useUISearchParams } from '../queue-control/ui-searchparams-provider';
+import { useQueueContext } from '../queue-control/queue-context';
+import useSWR from 'swr';
+import { constructSetterStatsUrl } from '@/app/lib/url-utils';
+
+interface SetterStat {
+  setter_username: string;
+  climb_count: number;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const MIN_SEARCH_LENGTH = 2; // Only search when user has typed at least 2 characters
+
+const SetterNameSelect = () => {
+  const { uiSearchParams, updateFilters } = useUISearchParams();
+  const { parsedParams } = useQueueContext();
+  const [searchValue, setSearchValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Fetch top setters when dropdown is open OR when user is searching
+  const shouldFetch = isOpen || searchValue.length >= MIN_SEARCH_LENGTH;
+  const isSearching = searchValue.length >= MIN_SEARCH_LENGTH;
+
+  // Build API URL - with search query if searching, without if just showing top setters
+  const apiUrl = shouldFetch
+    ? constructSetterStatsUrl(parsedParams, isSearching ? searchValue : undefined)
+    : null;
+
+  // Fetch setter stats from the API
+  const { data: setterStats, isLoading } = useSWR<SetterStat[]>(
+    apiUrl,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      keepPreviousData: true,
+    }
+  );
+
+  // Map setter stats to Select options
+  const options = React.useMemo(() => {
+    if (!setterStats) return [];
+
+    return setterStats.map(stat => ({
+      value: stat.setter_username,
+      label: `${stat.setter_username} (${stat.climb_count})`,
+      count: stat.climb_count,
+    }));
+  }, [setterStats]);
+
+  return (
+    <Select
+      mode="multiple"
+      placeholder="Select setters..."
+      value={uiSearchParams.settername}
+      onChange={(value) => updateFilters({ settername: value })}
+      onSearch={setSearchValue}
+      onDropdownVisibleChange={setIsOpen}
+      loading={isLoading}
+      showSearch
+      filterOption={false} // Server-side filtering
+      options={options}
+      style={{ width: '100%' }}
+      maxTagCount="responsive"
+      notFoundContent={
+        isLoading
+          ? 'Loading...'
+          : !isOpen && searchValue.length === 0
+          ? 'Open dropdown to see setters'
+          : 'No setters found'
+      }
+    />
+  );
+};
+
+export default SetterNameSelect;