sample.jsx

import React from 'react';
import ReactDOM from 'react-dom'
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import { getRequest, createQueryString } from 'utils/getRequest'
import useScrollPosition from 'hooks/useScrollPosition'

const urlParams = new window.URLSearchParams(window.location.search)
const defaultFilters = {
  role_kinds: urlParams.get('role_kinds') ? urlParams.get('role_kinds').split(',') : []
}

const sortBy = [
  {'value': 'featured', 'name': 'Deadline'},
]


const SearchRoutes = (props) => (
  <BrowserRouter>
    <Switch>
      <Route {...props} path="/" render={(routeProps) => <SearchIndex {...props} {...routeProps} />} />
    </Switch>
  </BrowserRouter>
)

export default SearchRoutes

function SearchIndex (props) {
  const { filterOptions } = props
  const [state, setState] = useReducer(
    (state, newState) => (
      {...state, ...newState}),
      {
        projects: props.projects.projects,
        results: props.projects.meta.total_entries,
        page: parseInt(urlParams.get('page'), 10) || 1,
        meta: props.projects.meta
      }
    )
  const { projects, favorites, page, meta, results, isFetching } = state
  const [ curFilters, setCurFilters ] = useState(defaultFilters)
  useScrollPosition(projects)
  const isComponentMounted = useRef(false)
  window.currentUserId = currentUserId

  useEffect(() => {
    if (!isComponentMounted.current) {
       isComponentMounted.current = true
       window.scroll(0,0)
     } else {
       window.scroll(0,0)
       fetchData(page)
     }
  }, [curFilters, orderBy])

  const handleSortChange = (event) => {
    event.persist()
    setOrderBy(event.target.value)
  }

  const handleCardChange = (event) => {
    event.persist()
    window.localStorage.setItem('ccc-card', event.target.value)
    setCard(event.target.value)
  }

  const fetchData = (newPage = false) => {
    newPage = newPage ? newPage : page
    const data = { ...curFilters, page: newPage, order_by: orderBy }
    let USER_URI = `/api/v1/search?${createQueryString(data)}`
    props.history.push(USER_URI.replace("/api/v1/",''))
    setState({isFetching: true})

    getRequest(USER_URI, {}, (err, jsonData) => {
      if (err) {
        setState({ isFetching: false })
        UIkit.notification(err, {status: 'danger'})
        return
      }

      setState(
        {
          page: newPage,
          isFetching: false,
          meta: jsonData['meta'],
          results: jsonData['meta']['total_entries'],
          projects: jsonData['projects']
        }
      )
    })
  }

  return <div>{stuff}</div>
)