Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from 'react'

import { axios } from '../../utils'

import { Container, Row } from 'react-bootstrap'

import { addNotification } from '../../redux/notification/notification.actions'

import { useDispatch, useSelector } from 'react-redux'

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 labels = useSelector(({ intl }) => intl.labels)

  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>

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

      </Row>

      <h3 className="mt-3">

        {searchParams.category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de

        Microaprendizaje

      </h3>

      <CapsulesList

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

        onEnroll={load}

      />

    </Container>

  )

}

export default MarketPlacePage