Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6996 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6993 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { axios } from '../../utils'
6996 stevensc 3 
import { useDispatch } from 'react-redux'
6993 stevensc 4 
import { addNotification } from '../../redux/notification/notification.actions'
6996 stevensc 5 
import { Col, Container, FormControl, Row } from 'react-bootstrap'
6993 stevensc 6 
 
7 
import CapsulesList from '../../components/marketplace/CapsulesList'
8 
 
9 
const MarketPlacePage = () => {
10 
  const [capsules, setCapsules] = useState([])
11 
  const [rewards, setRewards] = useState([])
12 
  const [categories, setCategories] = useState([])
13 
  const [searchParams, setSearchParams] = useState({
14 
    search: '',
15 
    category: 'capsules',
16 
  })
17 
  const dispatch = useDispatch()
18 
 
19 
  const handleChange = ({ target }) => {
20 
    setSearchParams({ ...searchParams, [target.name]: target.value })
21 
  }
22 
 
23 
  const load = async (
24 
    _search = searchParams.search,
25 
    _entity = searchParams.category
26 
  ) => {
27 
    axios
28 
      .get(`/marketplace?search=${_search}&entity=${_entity}`)
29 
      .then((response) => {
30 
        const { success, data } = response.data
31 
 
32 
        if (!success) {
33 
          dispatch(addNotification({ style: 'danger', msg: data }))
34 
          return
35 
        }
36 
 
37 
        _entity === 'capsules' ? setCapsules(data) : setRewards(data)
38 
      })
39 
      .catch((error) => {
40 
        console.log('>>: error > ', error)
41 
        dispatch(addNotification({ style: 'danger', msg: error }))
42 
        throw new Error(error)
43 
      })
44 
  }
45 
 
46 
  const getCategories = async () => {
47 
    const categories = await axios.get('/marketplace/categories')
48 
    if (categories.data.data) {
49 
      const _categories = Object.keys(categories.data.data).map((element) => {
50 
        return {
51 
          label: categories.data.data[element],
52 
          value: element,
53 
        }
54 
      })
55 
      setCategories(_categories)
56 
    }
57 
  }
58 
 
59 
  const checkParams = () => {
60 
    const url = window.location.href
61 
    const hasEntity = url.includes('?entity=')
62 
    if (hasEntity) {
63 
      const value = url.split('?entity=')[1]
64 
      if (value) {
65 
        setSearchParams({ ...searchParams, category: value })
66 
      }
67 
    }
68 
  }
69 
 
70 
  useEffect(() => {
71 
    getCategories()
72 
    checkParams()
73 
  }, [])
74 
 
75 
  useEffect(() => {
76 
    load(searchParams.search, searchParams.category)
77 
  }, [searchParams])
78 
 
79 
  return (
80 
    <Container>
6995 stevensc 81 
      <Row className="justify-content-end">
82 
        <Col md="3">
6996 stevensc 83 
          <FormControl
84 
            as="select"
6997 stevensc 85 
            name="category"
6996 stevensc 86 
            onChange={(e) => handleChange(e)}
6997 stevensc 87 
            value={searchParams.category}
6996 stevensc 88 
          >
89 
            {categories.map((element, i) => (
90 
              <option value={element.value} key={i}>
91 
                {element.label}
6993 stevensc 92 
              </option>
6996 stevensc 93 
            ))}
94 
          </FormControl>
6995 stevensc 95 
        </Col>
96 
        <Col md="3">
6996 stevensc 97 
          <FormControl
98 
            type="text"
99 
            name="search"
100 
            onChange={(e) => handleChange(e)}
101 
            value={searchParams.search}
102 
          />
6995 stevensc 103 
        </Col>
6993 stevensc 104 
      </Row>
6995 stevensc 105 
      <h2 className="mt-3 font-bold">
6993 stevensc 106 
        {searchParams.category === 'capsules' ? 'Cápsulas' : 'Recompensas'} de
107 
        Microaprendizaje
6995 stevensc 108 
      </h2>
6993 stevensc 109 
      <CapsulesList
110 
        capsules={searchParams.category === 'capsules' ? capsules : rewards}
111 
        onEnroll={load}
112 
      />
113 
    </Container>
114 
  )
115 
}
116 
 
117 
export default MarketPlacePage