Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import { axios } from '../../utils'
import CapsulesList from './CapsulesList'

const MarketPlace = () => {
  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) => {
    try {
      const { data: response } = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)

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

      if (_entity === 'capsules') {
        setCapsules(response.data)
      }
      if (_entity === 'rewards') {
        setRewards(response.data)
      }
    } catch (error) {
      console.log('>>: 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 (
    <section className="container">
      <div className="market_admin_title_buttons">
        <div className="form-group search_input">
          <input
            type="text"
            name="search"
            className="form-control"
            onChange={e => handleChange(e)}
            value={searchParams.search}
          />
          <button className='search-btn'>{LABELS.SEARCH}</button>
        </div>
        <div className="form-group search_categories">
          <select
            name="category"
            className="form-control"
            value={searchParams.category}
            onChange={e => handleChange(e)}
          >
            <option disabled value="">{LABELS.SELECT_CATEGORY}</option>
            {categories.map((element, i) =>
              <option value={element.value} key={i}>{element.label}</option>
            )}
          </select>
        </div>
      </div>
      <CapsulesList
        category={searchParams.category}
        capsules={searchParams.category === 'capsules' ? capsules : rewards}
        onEnroll={load}
      />
    </section>
  )
}

export default MarketPlace