Filters & Search

Migratie & Index

-- migrations/0025_pg_trgm.sql
CREATE EXTENSION IF NOT EXISTS pg_trgm;

-- GIN index voor snelle trigram search
CREATE INDEX idx_users_name_trgm
  ON users USING GIN (display_name gin_trgm_ops);

CREATE INDEX idx_users_bio_trgm
  ON users USING GIN (bio gin_trgm_ops);

-- Gecombineerde zoekkolom (voor één index-scan)
ALTER TABLE users
  ADD COLUMN search_vector tsvector
  GENERATED ALWAYS AS (
    to_tsvector('dutch', coalesce(display_name,'') || ' '
      || coalesce(bio,'') || ' '
      || coalesce(location_city,''))
  ) STORED;

CREATE INDEX idx_users_fts ON users USING GIN (search_vector);

Fastify 5 query

// GET /api/users?q=lena&role=creator
fastify.get('/users', async (req) => {
  const { q, role, mood, radius, page=1, limit=20 } = req.query;
  let query = db.select().from(users);

  if (q) {
    query = query.where(
      sql`search_vector @@ plainto_tsquery('dutch', ${q})
          OR display_name % ${q}`  // trigram fuzzy fallback
    ).orderBy(
      sql`ts_rank(search_vector,
            plainto_tsquery('dutch', ${q})) DESC`
    );
  }
  if (role)   query = query.where(eq(users.role, role));
  if (mood)   query = query.where(eq(users.currentMood, mood));

  const offset = (page - 1) * limit;
  return query.limit(limit).offset(offset);
});

useFilteredUsers hook

// hooks/useFilteredUsers.ts
import { useQuery } from '@tanstack/react-query';
import { useDebounce } from '@teezu/ui';

export function useFilteredUsers(filters: FilterState) {
  // Debounce alle filter-changes (300 ms)
  const debouncedFilters = useDebounce(filters, 300);

  return useQuery({
    queryKey: ['users', 'filtered', debouncedFilters],
    queryFn: () => fetchUsers(debouncedFilters),
    placeholderData: keepPreviousData,   // v5 API
    staleTime: 60_000,
  });
}

function fetchUsers(f: FilterState) {
  const params = new URLSearchParams(
    Object.entries(f).filter(([,v]) => v != null) as any
  );
  return fetch(`/api/users?${params}`).then(r => r.json());
}

URL State — filter shareability

// hooks/useFilterURLSync.ts
import { useSearchParams } from 'react-router-dom';

export function useFilterURLSync() {
  const [params, setParams] = useSearchParams();

  const filters = {
    role:         params.get('role') ?? undefined,
    gender:       params.get('gender') ?? undefined,
    mood:         params.get('mood') ?? undefined,
    consentLevel: params.get('consent') ?? undefined,
    radius:       Number(params.get('radius')) || 50,
    memberTier:   params.get('tier') ?? undefined,
    aiUsage:      params.get('ai') ?? undefined,
  };

  const setFilter = (key: string, value: string | null) => {
    setParams(prev => {
      const next = new URLSearchParams(prev);
      value ? next.set(key, value) : next.delete(key);
      return next;
    }, { replace: true }); // geen history-entry per filter-klik
  };

  return { filters, setFilter };
}

URL voorbeeld: /discover?role=creator&mood=spicy&radius=25&consent=18%2B+soft