Search Page - DevJobs

The Search Page displays job listings based on user search criteria, providing advanced filtering, pagination, and real-time results updates.

Route

Path: /search
Component: SearchPage
File: source/src/pages/Search.jsx

Purpose

The search page is the primary job discovery interface, allowing users to:

View job listings matching their criteria
Filter jobs by technology, location, and experience level
Navigate through paginated results
Perform text-based searches

URL Parameters

The search page reads and manages multiple URL query parameters:

Parameter	Description	Example
`text`	Free-text search query	`?text=react`
`technology`	Technology filter	`?technology=javascript`
`type`	Location/work type filter	`?type=remoto`
`level`	Experience level filter	`?level=senior`
`page`	Current page number	`?page=2`

Example URL: /search?text=frontend&technology=react&type=remoto&level=mid&page=2

Key Features

Provides multiple filter options:

Text Search: Free-form search across titles, skills, and companies
Technology Filter: Dropdown for specific technologies
Location Filter: Remote/city options
Experience Level: Junior, Mid, Senior, Lead

2. Dynamic Results

Real-time job listings that:

Update automatically when filters change
Show loading skeleton during fetch
Display total count and current page in title
Render job cards with key information

3. Pagination

Navigate through results:

4 jobs per page (configurable via RESULTS_PER_PAGE)
Previous/Next navigation
Direct page number selection
URL synchronized with current page

Components Used

The search page integrates several key components:

SearchFormSection

<SearchFormSection 
  initialTextInput={textToFilter} 
  onSearch={handleSearch} 
  onTextFilter={handleTextFilter} 
/>

Props:

initialTextInput: Pre-fills search text from URL
onSearch: Callback for filter changes
onTextFilter: Callback for text input changes

JobListings

<JobListings jobs={jobs} />

Props:

jobs: Array of job objects to display

JobCardSkeleton

<JobCardSkeleton count={5} />

Props:

count: Number of skeleton cards to show

Pagination

<Pagination 
  currentPage={currentPage} 
  totalPages={totalPages} 
  onPageChange={handlePageChange} 
/>

Props:

currentPage: Active page number
totalPages: Total number of pages
onPageChange: Callback when page changes

Hooks and State Management

useFilters Hook

The search page relies entirely on the useFilters custom hook for state management:

const {
  jobs,              // Job listings array
  loading,           // Loading state boolean
  total,             // Total number of results
  totalPages,        // Calculated total pages
  currentPage,       // Active page number
  textToFilter,      // Current text search query
  handlePageChange,  // Navigate to different page
  handleSearch,      // Apply filter changes
  handleTextFilter,  // Update text search
} = useFilters()

Key Features:

URL Synchronization: Reads and updates URL parameters automatically
API Integration: Fetches jobs from backend API with filters
Pagination Logic: Calculates offset and limit for API calls
State Persistence: Maintains filters across page reloads

Code Example

Complete Search Page Implementation

import { Pagination, SearchFormSection, JobListings, JobCardSkeleton } 
  from '@/components'
import { useFilters } from '@/hooks/useFilters.js'

function SearchPage() {
  const {
    jobs,
    loading,
    total,
    totalPages,
    currentPage,
    textToFilter,
    handlePageChange,
    handleSearch,
    handleTextFilter,
  } = useFilters()

  const title = loading 
    ? 'Cargando...' 
    : `Resultados: ${total} , Pagina: ${currentPage} - DevJobs`

  return (
    <>
      <title>{title}</title>

      <main>
        <SearchFormSection 
          initialTextInput={textToFilter} 
          onSearch={handleSearch} 
          onTextFilter={handleTextFilter} 
        />

        <section>
          <h2 style={{ textAlign: 'center' }}>
            Resultados de búsqueda
          </h2>
          {loading 
            ? <JobCardSkeleton count={5} /> 
            : <JobListings jobs={jobs} />
          }
          <Pagination 
            currentPage={currentPage} 
            totalPages={totalPages} 
            onPageChange={handlePageChange} 
          />
        </section>
      </main>
    </>
  )
}

export default SearchPage

Dynamic Title Generation

const title = loading 
  ? 'Cargando...' 
  : `Resultados: ${total} , Pagina: ${currentPage} - DevJobs`

The page title updates dynamically to show:

Loading state while fetching
Total results and current page number when loaded

User Flows

Initial Search Flow

User arrives from home page with ?text=react parameter
useFilters hook reads URL parameters
API request is made with search criteria
Loading skeleton is displayed
Job listings render when data arrives

Filter Interaction Flow

User changes filter (e.g., selects “Senior” level)
handleSearch callback is triggered
useFilters updates state and URL parameters
Page resets to 1 (when filters change)
API re-fetches with new criteria
Results update automatically

Pagination Flow

User clicks page number or Next button
handlePageChange callback is triggered
useFilters updates currentPage state
URL updates with ?page={n} parameter
API fetches new page of results
Job listings update with new page data

Text Search Flow

User types in search input
handleTextFilter callback is triggered
useFilters updates textToFilter state
URL updates with ?text={query} parameter
Page resets to 1 (new search)
Results refresh with matching jobs

API Integration

The search page interacts with the backend API through the useFilters hook:

API Endpoint

https://jscamp-api.vercel.app/api/jobs

Query Parameters

const params = new URLSearchParams()
if (textToFilter) params.append('text', textToFilter)
if (filters.technology) params.append('technology', filters.technology)
if (filters.location) params.append('type', filters.location)
if (filters.experienceLevel) params.append('level', filters.experienceLevel)

// Pagination
const offset = (currentPage - 1) * RESULTS_PER_PAGE
params.append('limit', RESULTS_PER_PAGE) // 4 per page
params.append('offset', offset)

Response Format

{
  "data": [
    {
      "id": "1",
      "titulo": "Senior React Developer",
      "empresa": "TechCorp",
      "ubicacion": "Remoto",
      "data": {
        "technology": ["react", "javascript"],
        "modalidad": "remoto",
        "nivel": "senior"
      }
    }
  ],
  "total": 42
}

State Synchronization

The useFilters hook maintains bidirectional synchronization:

URL → State

const [filters, setFilters] = useState(() => {
  return {
    technology: searchParams.get('technology') || '',
    location: searchParams.get('type') || '',
    experienceLevel: searchParams.get('level') || ''
  }
})

const [textToFilter, setTextToFilter] = useState(
  () => searchParams.get('text') || ''
)

const [currentPage, setCurrentPage] = useState(() => {
  const page = searchParams.get('page') || '1'
  const pageNumber = Number(page)
  return isNaN(pageNumber) || pageNumber < 1 ? 1 : pageNumber
})

State → URL

useEffect(() => {
  setSearchParams(() => {
    const params = new URLSearchParams()
    if (textToFilter) params.set('text', textToFilter)
    if (filters.technology) params.set('technology', filters.technology)
    if (filters.location) params.set('type', filters.location)
    if (filters.experienceLevel) params.set('level', filters.experienceLevel)
    if (currentPage > 1) params.set('page', currentPage)
    return params
  })
}, [filters, textToFilter, currentPage, setSearchParams])

Loading States

The page handles three loading states:

Initial Load: Shows skeleton when component first mounts
Filter Change: Shows skeleton when filters update
Pagination: Shows skeleton when changing pages

Skeleton vs. Results

{loading 
  ? <JobCardSkeleton count={5} /> 
  : <JobListings jobs={jobs} />
}

Structure

SearchPage
├── Dynamic Title
├── Main Section
│   ├── SearchFormSection
│   │   ├── Text Input
│   │   ├── Technology Select
│   │   ├── Location Select
│   │   └── Level Select
│   │
│   └── Results Section
│       ├── Heading ("Resultados de búsqueda")
│       ├── JobCardSkeleton (if loading)
│       ├── JobListings (if loaded)
│       │   └── JobCard[] (array of job cards)
│       └── Pagination
│           ├── Previous Button
│           ├── Page Numbers
│           └── Next Button

Integration Points

From Home Page

Receives ?text={query} parameter from home search
Pre-fills search input with query value
Displays filtered results immediately

To Detail Page

Each job card links to /jobs/{jobId}
Clicking a job navigates to detail view
User can return via breadcrumb navigation

Users can share URLs with filters:

/search?text=frontend&technology=react&type=remoto&level=senior&page=2

Recipient sees exact same filtered results.

Performance Considerations

Debouncing: Consider debouncing text input to reduce API calls
Skeleton Loading: Provides instant visual feedback during loads
URL State: Eliminates need for complex state management libraries
Pagination: Limits results to 4 per page for fast loading

Accessibility

Semantic HTML: Uses <main> and <section> appropriately
Dynamic Title: Updates for screen readers
Loading States: Clear indication of loading progress
Keyboard Navigation: All controls are keyboard accessible

Home Page - Entry point with search
Detail Page - Individual job details

SearchFormSection - Search and filter controls
JobListings - Results display
Pagination - Page navigation

useFilters - Complete filter and pagination logic

Get Started

Architecture

Components

Custom Hooks

Pages

Development

​Route

​Purpose

​URL Parameters

​Key Features

​1. Advanced Search Form

​2. Dynamic Results

​3. Pagination

​Components Used

​SearchFormSection

​JobListings

​JobCardSkeleton

​Pagination

​Hooks and State Management

​useFilters Hook

​Code Example

​Complete Search Page Implementation

​Dynamic Title Generation

​User Flows

​Initial Search Flow

​Filter Interaction Flow

​Pagination Flow

​Text Search Flow

​API Integration

​API Endpoint

​Query Parameters

​Response Format

​State Synchronization

​URL → State

​State → URL

​Loading States

​Skeleton vs. Results

​Structure

​Integration Points

​From Home Page

​To Detail Page

​URL Sharing

​Performance Considerations

​Accessibility

​Related Pages

​Related Components

​Related Hooks

Build docs developers (and LLMs) love

Route

Purpose

URL Parameters

Key Features

1. Advanced Search Form

2. Dynamic Results

3. Pagination

Components Used

SearchFormSection

JobListings

JobCardSkeleton

Pagination

Hooks and State Management

useFilters Hook

Code Example

Complete Search Page Implementation

Dynamic Title Generation

User Flows

Initial Search Flow

Filter Interaction Flow

Pagination Flow

Text Search Flow

API Integration

API Endpoint

Query Parameters

Response Format

State Synchronization

URL → State

State → URL

Loading States

Skeleton vs. Results

Structure

Integration Points

From Home Page

To Detail Page

URL Sharing

Performance Considerations

Accessibility

Related Pages

Related Components

Related Hooks