Skip to main content
The filtering system enables users to narrow down camera products by multiple attributes. The FilterCamara component manages filter state, URL synchronization, and conditional rendering.

​
FilterCamara

The main filtering component that coordinates between URL parameters, Redux state, and the display components.

​
Component Code

filtercamaras.js
const FilterCamara = () => {
    const {useEffect, useState} = React
    const {useSelector, useDispatch} = ReactRedux
    const {useLocation} = ReactRouterDOM
    const dispatch = useDispatch()
    const {filter} = useParams()
    const location = useLocation()
    const [filtrado, setFiltrado] = useState(false)
    const camaras = useSelector((state) => state.camaras)
    let filtros_aplicados = filterArray(filter)
    
    useEffect(() => {
        dispatch(filterCamarasAside(filtros_aplicados))
        setFiltrado(true)
    }, [location.pathname])

    return(
        (camaras.length && filtrado) ?
        <div className="col-12">
            <div className="container">
                <div className="row">
                    <NavbarAside camaras={camaras}/>
                    <ListCam camaras={camaras} resultados={filtrado}/>
                    <WhatsappIcon />
                </div>
            </div>
        </div> :
        camaras.length 
        ?  <OnLoad />
        :   <NotFound />
    )
}

​
How It Works

1

Extract URL Parameters

Reads the filter parameter from the URL using useParams()Example URL: /productos/camaras/filtro/interior-1080p
2

Parse Filters

Converts the URL filter string into an array using filterArray(filter)
// "interior-1080p" → ["interior", "1080p"]
let filtros_aplicados = filterArray(filter)
3

Dispatch Redux Action

Applies filters to the Redux store on component mount and URL changes
useEffect(() => {
    dispatch(filterCamarasAside(filtros_aplicados))
    setFiltrado(true)
}, [location.pathname])
4

Conditional Rendering

Displays different content based on filter state:
  • Filtered results with sidebar
  • Loading state
  • Not found page

​
State Management

​
Local State

​
filtrado
boolean
default:false
Tracks whether filters have been applied. Set to true after dispatch completes.

​
Redux State

const camaras = useSelector((state) => state.camaras)
The component reads the filtered camera array from Redux state. The filterCamarasAside action updates this state based on active filters.

​
Conditional Rendering Logic

filtercamaras.js:18
return(
    (camaras.length && filtrado) ?
    // Show filtered results
    <div className="col-12">
        <div className="container">
            <div className="row">
                <NavbarAside camaras={camaras}/>
                <ListCam camaras={camaras} resultados={filtrado}/>
                <WhatsappIcon />
            </div>
        </div>
    </div> :
    // Show loading or not found
    camaras.length 
    ?  <OnLoad />      // Loading state
    :   <NotFound />   // No results found
)
Rendering Conditions:
camaras.lengthfiltradoRendered Component
> 0trueFilteredResults (NavbarAside + ListCam)
> 0falseOnLoad (Loading)
0anyNotFound
The component re-runs the filter effect whenever location.pathname changes, ensuring filters stay synchronized with URL navigation.

​
Filter URL Structure

Filters are encoded in the URL path for shareable, bookmarkable filter states.

​
URL Format

/productos/camaras/filtro/{filter-string}

​
Filter String Examples

/productos/camaras/filtro/interior

// Filters: diseño = "interior"

​
Filter Array Parsing

The filterArray() utility function converts URL strings to filter arrays: 
// Example implementation
function filterArray(filterString) {
  if (!filterString) return []
  return filterString.split('-')
}

// Usage
filterArray('interior-1080p-wifi')
// Returns: ['interior', '1080p', 'wifi']

​
Integration with NavbarAside

The FilterCamara component works closely with NavbarAside to provide an interactive filtering experience.

​
Filter Flow Diagram

┌─────────────────┐
│   User clicks   │
│ filter option   │
│  in NavbarAside │
└────────┬────────┘
         │
         ▼
┌─────────────────────────┐
│  Dispatch Redux action  │
│  filterCamarasAside()   │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│   Update URL with       │
│   navigate()            │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  FilterCamara detects   │
│  pathname change        │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Parse new filters      │
│  from URL               │
└────────┬────────────────┘
         │
         ▼
┌─────────────────────────┐
│  Redux state updates    │
│  ListCam re-renders     │
└─────────────────────────┘
When a user clicks a filter option in the sidebar:
navbarAside.js:20
<button className="btn btn-link"
    onClick = {()=> {
        dispatch(filterCamarasAside([key]))
        let url = urlFiltro(key, location)
        navigate(`/productos/camaras/filtro/${url}`)
    }}
>{key}</button>
This triggers:
  1. Redux dispatch to update filtered cameras
  2. URL navigation with new filter parameters
  3. FilterCamara useEffect hook fires
  4. Filtered results display

​
Filter Removal

Users can remove active filters by clicking the X badge in NavbarAside:
navbarAside.js:52
<span className="badge badge-light filtro" style={{"cursor":"pointer"}}
    onClick={()=> {
        let resultado = createSlug(createUrlFilter(filter, filtro))
        if(!resultado){
            navigate('/productos', {state:{text:['reset']}})
        }
        else{
            navigate(`/productos/camaras/filtro/${resultado}`, {replace:true})
            dispatch(backToInitialState([filtro]))
        }
    }}
>X</span>

​
Remove Filter Logic

When removing one filter from multiple active filters:
  1. Call createUrlFilter(filter, filtro) to remove the specific filter
  2. Convert to URL slug with createSlug()
  3. Navigate to updated URL
  4. Dispatch backToInitialState([filtro]) to update Redux

​
Redux Actions

The filtering system relies on these Redux actions:

​
filterCamarasAside

dispatch(filterCamarasAside([filtros]))
Applies an array of filter values to the camera list. Parameters:
  • filtros (array): Filter values to apply (e.g., ["interior", "1080p"])

​
backToInitialState

dispatch(backToInitialState([filtro]))
Removes specific filters and updates the camera list. Parameters:
  • filtro (array): Filter values to remove

​
Usage Example

import { FilterCamara } from './components/filtercamaras'
import { Route } from 'react-router-dom'

// In your router configuration
<Route path="/productos/camaras/filtro/:filter" element={<FilterCamara />} />

NavbarAside

Sidebar with dynamic filter options

ListCam

Displays filtered camera results

Product Cards

Individual camera card components
Ensure your Redux store is properly configured with the filterCamarasAside and backToInitialState actions before using FilterCamara.

Build docs developers (and LLMs) love

Get started for freeTalk to us