Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2723 | Rev 3753 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3572 stevensc 1 
/* eslint-disable react/prop-types */
1 www 2 
import React from 'react'
2616 stevensc 3 
import { axios } from '../../utils'
1 www 4 
import Slider from "react-slick";
2621 stevensc 5 
import styled from 'styled-components';
1 www 6 
 
2627 stevensc 7 
const StyledSlider = styled(Slider)`c
2622 stevensc 8 
    .slick-list {
9 
        padding: 0 !important;
10 
    }
11 
    .slick-slide {
12 
        margin: 0 27px;
13 
    }
14 
    .slick-track {
15 
        display: flex;
16 
    }
2623 stevensc 17 
    .slick-prev:before, .slick-next:before {
2624 stevensc 18 
        color: #FBFBFB !important;
19 
        font-size: 24px;
2623 stevensc 20 
    }
2624 stevensc 21 
    .slick-prev, .slick-next {
22 
        width: 24px;
2627 stevensc 23 
        height: 22px;
2625 stevensc 24 
        position: relative;
2624 stevensc 25 
    }
2721 stevensc 26 
    @media (max-width:768px) {
27 
        .slick-prev{
28 
            left: auto;
29 
            margin-left: auto;
30 
            margin-right: .5rem;
2722 stevensc 31 
            grid-row: 1;
2721 stevensc 32 
        }
33 
        .slick-next {
34 
            right: 0;
2722 stevensc 35 
            grid-row: 1;
2721 stevensc 36 
        }
37 
    }
2620 stevensc 38 
`;
39 
 
2616 stevensc 40 
const SampleNextArrow = (props) => {
1 www 41 
    const { className, style, onClick } = props;
42 
    return (
43 
        <div
44 
            className={className}
2625 stevensc 45 
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
1 www 46 
            onClick={onClick}
47 
        />
48 
    );
49 
}
50 
 
2616 stevensc 51 
const SamplePrevArrow = (props) => {
1 www 52 
    const { className, style, onClick } = props;
53 
    return (
54 
        <div
55 
            className={className}
2625 stevensc 56 
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
1 www 57 
            onClick={onClick}
58 
        />
59 
    );
60 
}
61 
 
3572 stevensc 62 
const MarketPlace = props => {
1 www 63 
    const [categories, setCategories] = React.useState([])
64 
    const [category, setCategory] = React.useState('capsules')
65 
    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
66 
    const [capsules, setCapsules] = React.useState([])
67 
    const [search, setSearch] = React.useState('')
68 
    const load = async (_search = search, _entity = category) => {
69 
        try {
2616 stevensc 70 
            const res = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
71 
            if (res.data.success) {
1 www 72 
                setCapsules(res.data.data)
73 
            }
74 
        } catch (error) {
75 
            console.log('>>: error > ', error)
76 
        }
77 
    }
78 
    const getCategories = async () => {
79 
        const categories = await axios.get('/marketplace/categories')
2616 stevensc 80 
        if (categories.data.data) {
1 www 81 
            const _categories = Object.keys(categories.data.data).map(element => {
82 
                return {
83 
                    label: categories.data.data[element],
84 
                    value: element
85 
                }
86 
            })
87 
            setCategories(_categories)
88 
        }
89 
    }
90 
    const checkParams = () => {
91 
        const url = window.location.href
92 
        const hasEntity = url.includes('?entity=')
2616 stevensc 93 
        if (hasEntity) {
1 www 94 
            const value = url.split('?entity=')[1]
2616 stevensc 95 
            if (value)
1 www 96 
                setCategory(value)
97 
        }
98 
    }
99 
    React.useEffect(() => {
100 
        load()
101 
        getCategories()
102 
        checkParams()
103 
    }, [])
104 
 
105 
    const enroll = async url => {
106 
        try {
3572 stevensc 107 
            await axios.post(url)
1 www 108 
            load()
109 
        } catch (error) {
110 
            console.log('>>: error > ', error)
111 
        }
112 
    }
113 
    const settings = {
114 
        // dots: true,
115 
        infinite: true,
116 
        speed: 1500,
117 
        slidesToShow: capsules.length < 4 ? 1 : 4,
118 
        slidesToScroll: 1,
119 
        nextArrow: <SampleNextArrow />,
120 
        prevArrow: <SamplePrevArrow />,
2627 stevensc 121 
        responsive: [
122 
            {
123 
                breakpoint: 768,
124 
                settings: {
125 
                    slidesToShow: 2,
126 
                    slidesToScroll: 2,
127 
                    initialSlide: 0
128 
                }
129 
            },
130 
            {
131 
                breakpoint: 1024,
132 
                settings: {
133 
                    slidesToShow: 3,
134 
                    slidesToScroll: 3,
135 
                    initialSlide: 0
136 
                }
1 www 137 
            }
2627 stevensc 138 
        ]
1 www 139 
    };
140 
    return (
141 
        <React.Fragment>
2616 stevensc 142 
            <section className="companies-info">
1 www 143 
                <div className="container">
144 
                    <div className="company-title">
2618 stevensc 145 
                        <form name="form-capsule-search">
2654 stevensc 146 
                            <div className="market_admin_title_buttons">
2619 stevensc 147 
                                <div className="form-group search_input">
2616 stevensc 148 
                                    <input
149 
                                        type="text"
150 
                                        name="search"
151 
                                        id="search"
152 
                                        className="form-control"
153 
                                        onChange={e => {
154 
                                            const value = e.target.value
155 
                                            setSearch(value)
156 
                                            load(value)
157 
                                        }}
158 
                                        value={search}
159 
                                        placeholder="Realiza una busqueda"
160 
                                    />
2723 stevensc 161 
                                    <button className='search-btn'>
162 
                                        Buscar
163 
                                    </button>
2616 stevensc 164 
                                </div>
2619 stevensc 165 
                                <div className="form-group search_categories">
2616 stevensc 166 
                                    <select
167 
                                        name="select"
168 
                                        className="form-control"
169 
                                        value={category}
170 
                                        onChange={e => {
171 
                                            setCategory(e.target.value)
172 
                                            load(search, e.target.value)
173 
                                        }}
1 www 174 
                                    >
2723 stevensc 175 
                                        <option value="">Seleccione una categoria</option>
3572 stevensc 176 
                                        {categories.map((element, i) =>
177 
                                            <option value={element.value} key={i.toString()}>
178 
                                                {element.label}
179 
                                            </option>
180 
                                        )}
2616 stevensc 181 
                                    </select>
182 
                                </div>
2618 stevensc 183 
                            </div>
184 
                        </form>
1 www 185 
                    </div>
2501 stevensc 186 
                    <div className="list-col">
2623 stevensc 187 
                        <h3 className="p-2" style={{ fontWeight: '700' }}>{title}</h3>
2621 stevensc 188 
                        <StyledSlider {...settings}>
3572 stevensc 189 
                            {capsules.map((element) =>
190 
                                <div className="w-100" key={element.name}>
191 
                                    <div className="marketplace_card">
192 
                                        <div className="microlearning-up-info">
193 
                                            <img src={element.image} alt={element.name} />
194 
                                            <h3>{element.name}</h3>
195 
                                            <h4>{props.backendVars.labelStatus} : {element.status}</h4>
196 
                                            {element.link_enroll &&
197 
                                                <ul>
198 
                                                    <li>
199 
                                                        <a
200 
                                                            href='#'
201 
                                                            onClick={(e) => {
202 
                                                                e.preventDefault()
203 
                                                                enroll(element.link_enroll)
204 
                                                            }}
205 
                                                            title={'Seleccionar: ' + element.name}
206 
                                                            className="btn btn-primary cursor-pointer">
207 
                                                            {props.backendVars.labelEnroll}
208 
                                                        </a>
209 
                                                    </li>
210 
                                                </ul>
211 
                                            }
1 www 212 
                                        </div>
3572 stevensc 213 
                                    </div>
214 
                                </div>
215 
                            )}
2621 stevensc 216 
                        </StyledSlider>
1 www 217 
                    </div>
2616 stevensc 218 
                </div>
219 
            </section>
1 www 220 
        </React.Fragment>
221 
    );
3572 stevensc 222 
}
223 
 
224 
export default MarketPlace;