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>

            {/* <div className="container">

                <ul

                    className="breadcrumb text-center"

                    style={{

                        background: 'transparent',

                        width: '100%',

                        display: 'flex',

                        justifyContent: 'center'

                    }}

                >

                    <li> {props.backendVars.labelMarketplace} </li>

                </ul>

            </div>       */}

            <section

                className="companies-info"

                style={{

                    backgroundColor: '#fbfaf1'

                }}

            >

                <div className="container">

                    <div className="company-title">

                        <div className="section_admin_title_buttons">

                            <div className="text-center">

                                {/* <h2 className="title">{title || props.backendVars.labelCapsules}</h2> */}

                                <h1 className="title">

                                    Programas, Desarrollo, Contenido, Capacitación Transformación de Personas, Líderes y Empresas

                                </h1>

                            </div>

                        </div>

                    </div>

                    <div className="company-title">

                        <div className="section_admin_title_buttons">

                        <div className="card">

                            <div className="card-body">

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

                                                <label htmlFor="search" className="p-2">Buscar</label>

                                                <input

                                                    type="text"

                                                    name="search"

                                                    id="search"

                                                    className="form-control"

                                                    onChange={e => {

                                                        const value = e.target.value

                                                        setSearch(value)

                                                        load(value)

                                                    }}

                                                    value={search}

                                                    placeholder="Buscar"

                                                />

                                            </div>

                                        </div>

                                        <div

                                            className="col-12 col-md-4 col-sm-12"

                                        >

                                            <div className="form-group">

                                                <label htmlFor="select" className="p-2">Categorías</label>

                                                <select

                                                    name="select"

                                                    className="form-control"

                                                    id="select"

                                                    value={category}

                                                    onChange={e => {

                                                        const value = e.target.value

                                                        setCategory(value)

                                                        load(search, value)

                                                    }}

                                                >

                                                    {

                                                        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>

    );

}