Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import { Col, Container, FormControl, Row } from 'react-bootstrap'

import CapsulesList from '../../components/marketplace/CapsulesList'

const MarketPlacePage = () => {
  const [capsules, setCapsules] = useState([])
  const [rewards, setRewards] = useState([])
  const [categories, setCategories] = useState([])
  const [searchParams, setSearchParams] = useState({
    search: '',
    category: 'capsules',
  })
  const dispatch = useDispatch()

  const handleChange = ({ target }) => {
    setSearchParams({ ...searchParams, [target.name]: target.value })
  }

  const load = async (
    _search = searchParams.search,
    _entity = searchParams.category
  ) => {
    axios
      .get(`/marketplace?search=${_search}&entity=${_entity}`)
      .then((response) => {
        const { success, data } = response.data

        if (!success) {
          dispatch(addNotification({ style: 'danger', msg: data }))
          return
        }

        _entity === 'capsules' ? setCapsules(data) : setRewards(data)
      })
      .catch((error) => {
        console.log('>>: error > ', error)
        dispatch(addNotification({ style: 'danger', msg: error }))
        throw new Error(error)
      })
  }

  const getCategories = async () => {
    const categories = await axios.get('/marketplace/categories')
    if (categories.data.data) {
      const _categories = Object.keys(categories.data.data).map((element) => {
        return {
          label: categories.data.data[element],
          value: element,
        }
      })
      setCategories(_categories)
    }
  }

  const checkParams = () => {
    const url = window.location.href
    const hasEntity = url.includes('?entity=')
    if (hasEntity) {
      const value = url.split('?entity=')[1]
      if (value) {
        setSearchParams({ ...searchParams, category: value })
      }
    }
  }

  useEffect(() => {
    getCategories()
    checkParams()
  }, [])

  useEffect(() => {
    load(searchParams.search, searchParams.category)
  }, [searchParams])

  return (
    <Container>
      <Row className="justify-content-end">
        <Col md="3">
          <FormControl
            as="select"
            name="category"
            onChange={(e) => handleChange(e)}
            value={searchParams.category}
          >
            {categories.map((element, i) => (
              <option value={element.value} key={i}>
                {element.label}
              </option>
            ))}
          </FormControl>
        </Col>
        <Col md="3">
          <FormControl
            type="text"
            name="search"
            onChange={(e) => handleChange(e)}
            value={searchParams.search}
          />
        </Col>
      </Row>
      <h2 className="mt-3 font-bold">
        {searchParams.category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de
        Microaprendizaje
      </h2>
      <CapsulesList
        capsules={searchParams.category === 'capsules' ? capsules : rewards}
        onEnroll={load}
      />
    </Container>
  )
}

export default MarketPlacePage