Wyszukiwarka z filtrami w Next.js — searchParams, debounce, URL state i UX

// app/blog/page.tsx
import { Suspense } from 'react'
import { ActiveFilters } from '@/components/active-filters'
import { SearchBar } from '@/components/search-bar'
import { FilterSidebar } from '@/components/filter-sidebar'
import { PostGrid } from '@/components/post-grid'
import { PostGridSkeleton } from '@/components/skeletons'
 
type SortOption = 'newest' | 'oldest' | 'popular'
 
interface SearchParams {
  q?: string
  tag?: string | string[]
  sort?: string
  page?: string
}
 
interface NormalizedFilters {
  query: string
  tags: string[]
  sort: SortOption
  page: number
}
 
const SORT_OPTIONS = ['newest', 'oldest', 'popular'] as const
 
function normalizeSearchParams(params: SearchParams): NormalizedFilters {
  const tags = Array.isArray(params.tag)
    ? params.tag
    : params.tag
      ? [params.tag]
      : []
 
  const sort = SORT_OPTIONS.includes(params.sort as SortOption)
    ? (params.sort as SortOption)
    : 'newest'
 
  const page = Number.parseInt(params.page ?? '1', 10)
 
  return {
    query: (params.q ?? '').trim(),
    tags: tags.map((tag) => tag.trim()).filter(Boolean),
    sort,
    page: Number.isFinite(page) && page > 0 ? page : 1,
  }
}
 
export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<SearchParams>
}) {
  const rawParams = await searchParams
  const filters = normalizeSearchParams(rawParams)
  const resultsKey = JSON.stringify(filters)
 
  return (
    <main className="mx-auto max-w-6xl py-8">
      <h1 className="mb-6 text-3xl font-bold">Blog</h1>
 
      <Suspense fallback={<div className="h-12" />}>
        <SearchBar defaultValue={filters.query} />
      </Suspense>
 
      <div className="mt-6 grid grid-cols-4 gap-8">
        <aside className="col-span-1">
          <Suspense fallback={null}>
            <FilterSidebar
              currentTags={filters.tags}
              currentSort={filters.sort}
            />
          </Suspense>
        </aside>
 
        <div className="col-span-3">
          <Suspense fallback={null}>
            <ActiveFilters />
          </Suspense>
 
          {/* Suspense resetuje fallback przy każdej zmianie znormalizowanych filtrów */}
          <Suspense key={resultsKey} fallback={<PostGridSkeleton />}>
            <FilteredPosts filters={filters} />
          </Suspense>
        </div>
      </div>
    </main>
  )
}
 
async function FilteredPosts({ filters }: { filters: NormalizedFilters }) {
  const posts = await getFilteredPosts(filters)
 
  if (posts.length === 0) {
    return (
      <p className="py-12 text-center text-gray-500">
        Brak wyników dla podanych filtrów.
      </p>
    )
  }
 
  return <PostGrid posts={posts} />
}

// components/search-bar.tsx
'use client'
 
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { useEffect, useState, useTransition } from 'react'
 
export function SearchBar({ defaultValue }: { defaultValue?: string }) {
  const [query, setQuery] = useState(defaultValue || '')
  const [isPending, startTransition] = useTransition()
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const queryFromUrl = searchParams.get('q') ?? ''
 
  useEffect(() => {
    setQuery(queryFromUrl)
  }, [queryFromUrl])
 
  // Debounce — aktualizuj URL po 300 ms od ostatniego naciśnięcia klawisza
  useEffect(() => {
    const timer = setTimeout(() => {
      const nextQuery = query.trim()
      if (nextQuery === queryFromUrl) return
 
      const params = new URLSearchParams(searchParams.toString())
 
      if (nextQuery) {
        params.set('q', nextQuery)
      } else {
        params.delete('q')
      }
      params.delete('page')
 
      const queryString = params.toString()
      const href = queryString ? `${pathname}?${queryString}` : pathname
 
      startTransition(() => {
        router.replace(href, { scroll: false })
      })
    }, 300)
 
    return () => clearTimeout(timer)
  }, [query, queryFromUrl, router, pathname, searchParams, startTransition])
 
  return (
    <div className="relative">
      <input
        type="search"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Szukaj artykułów..."
        aria-label="Szukaj artykułów"
        className="w-full rounded-xl border px-5 py-3 pr-12"
      />
      {isPending && (
        <div className="absolute right-4 top-1/2 -translate-y-1/2">
          <span className="sr-only">Aktualizowanie wyników</span>
          <div className="h-5 w-5 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
        </div>
      )}
    </div>
  )
}

// components/filter-sidebar.tsx
'use client'
 
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { useCallback } from 'react'
 
const TAGS = [
  'React',
  'Next.js',
  'TypeScript',
  'SEO',
  'Tailwind CSS',
  'Testing',
]
const SORT_OPTIONS = [
  { value: 'newest', label: 'Najnowsze' },
  { value: 'oldest', label: 'Najstarsze' },
  { value: 'popular', label: 'Najpopularniejsze' },
]
 
export function FilterSidebar({
  currentTags,
  currentSort,
}: {
  currentTags: string[]
  currentSort?: string
}) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  const updateTags = useCallback(
    (tag: string) => {
      const params = new URLSearchParams(searchParams.toString())
 
      const nextTags = currentTags.includes(tag)
        ? currentTags.filter((currentTag) => currentTag !== tag)
        : [...currentTags, tag]
 
      params.delete('tag')
      nextTags.forEach((nextTag) => params.append('tag', nextTag))
      params.delete('page')
 
      const queryString = params.toString()
      router.push(queryString ? `${pathname}?${queryString}` : pathname, {
        scroll: false,
      })
    },
    [router, pathname, searchParams, currentTags],
  )
 
  const updateSort = useCallback(
    (value: string) => {
      const params = new URLSearchParams(searchParams.toString())
 
      if (value === 'newest') {
        params.delete('sort')
      } else {
        params.set('sort', value)
      }
      params.delete('page')
 
      const queryString = params.toString()
      router.push(queryString ? `${pathname}?${queryString}` : pathname, {
        scroll: false,
      })
    },
    [router, pathname, searchParams],
  )
 
  const clearFilters = useCallback(() => {
    const params = new URLSearchParams(searchParams.toString())
    params.delete('tag')
    params.delete('sort')
    params.delete('page')
 
    const queryString = params.toString()
    router.push(queryString ? `${pathname}?${queryString}` : pathname, {
      scroll: false,
    })
  }, [router, pathname, searchParams])
 
  const hasActiveFilters =
    currentTags.length > 0 || (currentSort && currentSort !== 'newest')
 
  const clearAll = useCallback(() => {
    router.push(pathname, { scroll: false })
  }, [router, pathname])
 
  return (
    <div className="space-y-6">
      {/* Tagi */}
      <div>
        <h3 className="mb-3 font-semibold">Kategorie</h3>
        <div className="space-y-1">
          {TAGS.map((tag) => (
            <button
              key={tag}
              type="button"
              aria-pressed={currentTags.includes(tag)}
              onClick={() => updateTags(tag)}
              className={`block w-full rounded-lg px-3 py-2 text-left text-sm ${
                currentTags.includes(tag)
                  ? 'bg-blue-100 font-medium text-blue-700'
                  : 'text-gray-600 hover:bg-gray-100'
              }`}
            >
              {tag}
            </button>
          ))}
        </div>
      </div>
 
      {/* Sortowanie */}
      <div>
        <h3 className="mb-3 font-semibold">Sortowanie</h3>
        <select
          value={currentSort || 'newest'}
          onChange={(e) => updateSort(e.target.value)}
          className="w-full rounded-lg border p-2 text-sm"
        >
          {SORT_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
 
      {/* Reset */}
      {hasActiveFilters && (
        <button
          type="button"
          onClick={clearFilters}
          className="text-sm text-red-500 hover:underline"
        >
          Wyczyść filtry
        </button>
      )}
 
      {searchParams.toString() && (
        <button
          type="button"
          onClick={clearAll}
          className="text-sm text-gray-500 hover:underline"
        >
          Wyczyść wszystko
        </button>
      )}
    </div>
  )
}

// components/active-filters.tsx
'use client'
 
import { useRouter, usePathname, useSearchParams } from 'next/navigation'
 
export function ActiveFilters() {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const query = searchParams.get('q')
  const sort = searchParams.get('sort')
  const tags = searchParams.getAll('tag')
 
  const activeFilters = [
    query ? { key: 'q', value: query, label: `"${query}"` } : null,
    ...tags.map((tag) => ({ key: 'tag', value: tag, label: tag })),
    sort && sort !== 'newest'
      ? { key: 'sort', value: sort, label: sort }
      : null,
  ].filter(Boolean) as Array<{ key: string; value: string; label: string }>
 
  if (activeFilters.length === 0) return null
 
  function removeFilter(key: string, value: string) {
    const params = new URLSearchParams(searchParams.toString())
 
    if (key === 'tag') {
      const nextTags = params.getAll('tag').filter((tag) => tag !== value)
      params.delete('tag')
      nextTags.forEach((tag) => params.append('tag', tag))
    } else {
      params.delete(key)
    }
 
    params.delete('page')
 
    const queryString = params.toString()
    router.push(queryString ? `${pathname}?${queryString}` : pathname, {
      scroll: false,
    })
  }
 
  return (
    <div className="mb-4 flex flex-wrap gap-2">
      {activeFilters.map(({ key, value, label }) => (
        <span
          key={`${key}:${value}`}
          className="flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-700"
        >
          {label}
          <button
            type="button"
            aria-label={`Usuń filtr ${label}`}
            onClick={() => removeFilter(key, value)}
            className="ml-1 hover:text-blue-900"
          >
            ✕
          </button>
        </span>
      ))}
    </div>
  )
}

// lib/queries.ts
import type { Prisma } from '@prisma/client'
 
type SortOption = 'newest' | 'oldest' | 'popular'
 
interface PostFilters {
  query?: string
  tags?: string[]
  sort?: SortOption
  page?: number
  perPage?: number
}
 
export async function getFilteredPosts(filters: PostFilters) {
  const { query, tags = [], sort = 'newest', page = 1, perPage = 12 } = filters
 
  const safePage = Math.max(1, page)
  const safePerPage = Math.min(Math.max(perPage, 1), 48)
  const normalizedQuery = query?.trim()
  const where: Prisma.PostWhereInput = { published: true }
 
  if (normalizedQuery && normalizedQuery.length >= 2) {
    where.OR = [
      { title: { contains: normalizedQuery, mode: 'insensitive' } },
      { content: { contains: normalizedQuery, mode: 'insensitive' } },
      { excerpt: { contains: normalizedQuery, mode: 'insensitive' } },
    ]
  }
 
  if (tags.length > 0) {
    where.tags = { hasEvery: tags }
  }
 
  const orderBy =
    sort === 'oldest'
      ? { createdAt: 'asc' as const }
      : sort === 'popular'
        ? { views: 'desc' as const }
        : { createdAt: 'desc' as const }
 
  return db.post.findMany({
    where,
    orderBy,
    skip: (safePage - 1) * safePerPage,
    take: safePerPage,
  })
}

/blog?tag=react
/blog?tag=react&sort=popular
/blog?tag=react&tag=nextjs&sort=oldest
/blog?q=react&tag=nextjs&page=7