WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/marketplace/marketplace/Marketplace.js

 import React from 'react'
 import { axios } from '../../utils'
 import Slider from "react-slick";
 import styled from 'styled-components';
-const StyledSlider = styled(Slider)`c
+const StyledSlider = styled(Slider)`
     .slick-list {
         padding: 0 !important;
+    }
     .slick-slide {
             grid-row: 1;
+        }
+    }
 `;
-const SampleNextArrow = (props) => {
-    const { className, style, onClick } = props;
+const SampleNextArrow = ({ className, style, onClick }) => {
     return (
         <div
             className={className}
             style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
             onClick={onClick}
         />
     );
-}
+}
 const SamplePrevArrow = (props) => {
-    const { className, style, onClick } = props;
+const SamplePrevArrow = ({ className, style, onClick }) => {
     return (
         <div
             className={className}
             style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
             onClick={onClick}
         />
     );
+}
+const MarketPlace = ({
+    backendVars,
+    labels = {
+        title: 'Cápsulas de Microaprendizaje'
+    }
-const MarketPlace = props => {
-    const [categories, setCategories] = React.useState([])
+}) => {
-    const [category, setCategory] = React.useState('capsules')
+    const [categories, setCategories] = React.useState([])
+    const [capsules, setCapsules] = React.useState([])
+    const [searchParams, setSearchParams] = React.useState({
+        search: '',
+        category: 'capsules'
+    })
-    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
-    const [capsules, setCapsules] = React.useState([])
+    const handleChange = ({ target },) => setSearchParams({ ...searchParams, [target.name]: target.value })
-    const [search, setSearch] = React.useState('')
-    const load = async (_search = search, _entity = category) => {
-        try {
+    const load = async (_search = searchParams.search, _entity = searchParams.category) => {
-            const res = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
-            if (res.data.success) {
+        try {
-                setCapsules(res.data.data)
+            const { data } = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
             if (data.success) setCapsules(data.data)
         } catch (error) {
+            console.log('>>: error > ', error)
             console.log('>>: error > ', error)
+    }
     const getCategories = async () => {
         const categories = await axios.get('/marketplace/categories')
+                }
             })
             setCategories(_categories)
+        }
+    }
     const checkParams = () => {
         const url = window.location.href
         const hasEntity = url.includes('?entity=')
         if (hasEntity) {
             const value = url.split('?entity=')[1]
             if (value)
-                setCategory(value)
+                setSearchParams({ ...searchParams, category: value })
+        }
+    }
     React.useEffect(() => {
-        load()
         getCategories()
         checkParams()
     }, [])
+    React.useEffect(() => {
+        load(searchParams)
+    }, [searchParams])
     const enroll = async url => {
         try {
             await axios.post(url)
             load()
         } catch (error) {
             console.log('>>: error > ', error)
+        }
+    }
     const settings = {
         // dots: true,
         infinite: true,
         speed: 1500,
                                     <input
                                         type="text"
                                         name="search"
                                         id="search"
                                         className="form-control"
-                                        onChange={e => {
+                                        onChange={e => handleChange(e)}
-                                            const value = e.target.value
-                                            setSearch(value)
-                                            load(value)
-                                        }}
-                                        value={search}
+                                        value={searchParams.search}
                                         placeholder="Realiza una busqueda"
                                     />
                                     <button className='search-btn'>
                                         Buscar
                                     </button>
                                 </div>
                                 <div className="form-group search_categories">
                                     <select
                                         name="select"
                                         className="form-control"
-                                        value={category}
+                                        value={searchParams.category}
-                                        onChange={e => {
+                                        onChange={e => handleChange(e)}
-                                            setCategory(e.target.value)
-                                            load(search, e.target.value)
-                                        }}
+                                    >
                                         <option value="">Seleccione una categoria</option>
                                         {categories.map((element, i) =>
                                             <option value={element.value} key={i.toString()}>
                                                 {element.label}
                                 </div>
                             </div>
                         </form>
                     </div>
                     <div className="list-col">
-                        <h3 className="p-2" style={{ fontWeight: '700' }}>{title}</h3>
+                        <h3 className="p-2" style={{ fontWeight: '700' }}>{labels.title}</h3>
                         <StyledSlider {...settings}>
                             {capsules.map((element) =>
-                                <div className="w-100" key={element.name}>
+                                <div className="w-100" style={{ maxWidth: '215px' }} key={element.name}>
                                     <div className="marketplace_card">
                                         <div className="microlearning-up-info">
                                             <img src={element.image} alt={element.name} />
                                             <h3>{element.name}</h3>
-                                            <h4>{props.backendVars.labelStatus} : {element.status}</h4>
+                                            <h4>{backendVars.labelStatus} : {element.status}</h4>
                                             {element.link_enroll &&
                                                 <ul>
                                                     <li>
-                                                        <a
+                                                        <button
-                                                            href='#'
-                                                            onClick={(e) => {
-                                                                e.preventDefault()
-                                                                enroll(element.link_enroll)
+                                                            onClick={() => enroll(element.link_enroll)}
-                                                            }}
                                                             title={'Seleccionar: ' + element.name}
                                                             className="btn btn-primary cursor-pointer">
-                                                            {props.backendVars.labelEnroll}
+                                                            {backendVars.labelEnroll}
-                                                        </a>
+                                                        </button>
                                                     </li>
                                                 </ul>
+                                            }
                                         </div>
                                     </div>

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/marketplace/marketplace/Marketplace.js – Rev 3572 → 3753