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_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 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>

      <CapsulesList

        category={searchParams.category}

        capsules={searchParams.category === 'capsules' ? capsules : rewards}

        onEnroll={load}

      />

    </section>

  )

}

export default MarketPlace