Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import {axios} from '../../utils'
import Slider from "react-slick";
// import "slick-carousel/slick/slick.css"; 
// import "slick-carousel/slick/slick-theme.css";

const  SampleNextArrow = (props) => {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", backgroundColor: "transparent" }}
            onClick={onClick}
        />
    );
}

const  SamplePrevArrow = (props) => {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", backgroundColor: "transparent" }}
            onClick={onClick}
        />
    );
}

export default props => {
    const [categories, setCategories] = React.useState([])
    const [category, setCategory] = React.useState('capsules')
    const [title, setTitle] = React.useState('Cápsulas de Microaprendizaje')
    const [capsules, setCapsules] = React.useState([])
    const [search, setSearch] = React.useState('')
    const load = async (_search = search, _entity = category) => {
        try {
            const res = await axios.get('/marketplace?search='+_search+'&entity='+_entity)
            if(res.data.success){
                setCapsules(res.data.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)
                setCategory(value)
        }
    }
    React.useEffect(() => {
        load()
        getCategories()
        checkParams()
    }, [])

    const enroll = async url => {
        try {
            const res = await axios.post(url)
            load()
        } catch (error) {
            console.log('>>: error > ', error)
        }
    }
    const settings = {
        // dots: true,
        infinite: true,
        speed: 1500,
        slidesToShow: capsules.length < 4 ? 1 : 4,
        slidesToScroll: 1,
        nextArrow: <SampleNextArrow />,
        prevArrow: <SamplePrevArrow />,
        responsive: [{
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
              initialSlide: 2
            }
        }]
    };
    return (
        <React.Fragment>
            <section
                className="companies-info"
            >
                <div className="container">
                    <div className="company-title">
                        <div className="section_admin_title_buttons">
                        <div className="">
                            <div className="">
                                <form name="form-capsule-search" id="form-capsule-search">
                                    <div
                                        className="row"
                                    >
                                        <div
                                            className="col-12 col-md-8 col-sm-12"
                                        >
                                            <div className="form-group">
                                                <input
                                                    type="text"
                                                    name="search"
                                                    id="search"
                                                    className="form-control"
                                                    onChange={e => {
                                                        const value = e.target.value
                                                        setSearch(value)
                                                        load(value)
                                                    }}
                                                    value={search}
                                                    placeholder="Realiza una busqueda"
                                                />
                                            </div>
                                        </div>
                                        <div
                                            className="col-12 col-md-4 col-sm-12"
                                        >
                                            <div className="form-group">
                                                <select
                                                    name="select"
                                                    className="form-control"
                                                    id="select"
                                                    value={category}
                                                    onChange={e => {
                                                        const value = e.target.value
                                                        setCategory(value)
                                                        load(search, value)
                                                    }}
                                                >
                                                    <option value="" disabled selected>Seleccione una categoria</option>
                                                    {
                                                        categories.map((element, i) => {
                                                            return(
                                                                <option
                                                                    value={element.value}
                                                                    key={i.toString()}
                                                                >
                                                                    {
                                                                        element.label
                                                                    }
                                                                </option>
                                                            )
                                                        })
                                                    }
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div className="companies-list">
                        <h3 className="text-primary p-2"> {title} </h3>
                        <Slider {...settings}>
                            {
                                capsules.map((element, i) => {
                                    return(
                                        <div className="w-100" key={element.name}>
                                            <div className="company_profile_info">
                                                <div className="microlearning-up-info">
                                                    <img src={element.image} alt={element.name} />
                                                    <h3>{element.name}</h3>
                                                    <h4>{props.backendVars.labelStatus} : {element.status}</h4>
                                                </div>
                                                {
                                                    element.link_enroll && (
                                                        <ul>
                                                            <li>
                                                                <a
                                                                    onClick={() => enroll(element.link_enroll)}
                                                                    title={'Seleccionar: '+element.name}
                                                                    className="view-more-pro btn-capsule-enroll cursor-pointer"
                                                                >
                                                                    {props.backendVars.labelEnroll}
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    )
                                                }
                                            </div> 
                                        </div>
                                    )
                                })
                            }
                        </Slider>
                    </div>
                </div>  
            </section>  
        </React.Fragment>
    );
}