Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from 'react'
import { axios } from '../../utils'
import Slider from "react-slick";
import styled from 'styled-components';

const StyledSlider = styled(Slider)`c
    .slick-list {
        padding: 0 !important;
    }
    .slick-slide {
        margin: 0 27px;
    }
    .slick-track {
        display: flex;
    }
    .slick-prev:before, .slick-next:before {
        color: #FBFBFB !important;
        font-size: 24px;
    }
    .slick-prev, .slick-next {
        width: 24px;
        height: 22px;
        position: relative;
    }
    @media (max-width:768px) {
        .slick-prev{
            left: auto;
            margin-left: auto;
            margin-right: .5rem;
            grid-row: 1;
        }
        .slick-next {
            right: 0;
            grid-row: 1;
        }
    }
`;

const SampleNextArrow = (props) => {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
            onClick={onClick}
        />
    );
}

const SamplePrevArrow = (props) => {
    const { className, style, onClick } = props;
    return (
        <div
            className={className}
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
            onClick={onClick}
        />
    );
}

const MarketPlace = 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 {
            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: 768,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    initialSlide: 0
                }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    initialSlide: 0
                }
            }
        ]
    };
    return (
        <React.Fragment>
            <section className="companies-info">
                <div className="container">
                    <div className="company-title">
                        <form name="form-capsule-search">
                            <div className="market_admin_title_buttons">
                                <div className="form-group search_input">
                                    <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"
                                    />
                                    <button className='search-btn'>
                                        Buscar
                                    </button>
                                </div>
                                <div className="form-group search_categories">
                                    <select
                                        name="select"
                                        className="form-control"
                                        value={category}
                                        onChange={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}
                                            </option>
                                        )}
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div className="list-col">
                        <h3 className="p-2" style={{ fontWeight: '700' }}>{title}</h3>
                        <StyledSlider {...settings}>
                            {capsules.map((element) =>
                                <div className="w-100" 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>
                                            {element.link_enroll &&
                                                <ul>
                                                    <li>
                                                        <a
                                                            href='#'
                                                            onClick={(e) => {
                                                                e.preventDefault()
                                                                enroll(element.link_enroll)
                                                            }}
                                                            title={'Seleccionar: ' + element.name}
                                                            className="btn btn-primary cursor-pointer">
                                                            {props.backendVars.labelEnroll}
                                                        </a>
                                                    </li>
                                                </ul>
                                            }
                                        </div>
                                    </div>
                                </div>
                            )}
                        </StyledSlider>
                    </div>
                </div>
            </section>
        </React.Fragment>
    );
}

export default MarketPlace;