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)`
    .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 = ({ className, style, onClick }) => {
    return (
        <div
            className={className}
            style={{ ...style, display: "block", backgroundColor: "#D9D9D9", borderRadius: '100px' }}
            onClick={onClick}
        />
    );
}

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 [categories, setCategories] = React.useState([])
    const [capsules, setCapsules] = React.useState([])
    const [searchParams, setSearchParams] = React.useState({
        search: '',
        category: 'capsules'
    })

    const handleChange = ({ target },) => setSearchParams({ ...searchParams, [target.name]: target.value })

    const load = async (_search = searchParams.search, _entity = searchParams.category) => {
        try {
            const { data } = await axios.get('/marketplace?search=' + _search + '&entity=' + _entity)
            if (data.success) setCapsules(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)
                setSearchParams({ ...searchParams, category: value })
        }
    }

    React.useEffect(() => {
        getCategories()
        checkParams()
    }, [])

    React.useEffect(() => {
        load(searchParams.search, searchParams.category)
    }, [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,
        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 => handleChange(e)}
                                        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={searchParams.category}
                                        onChange={e => handleChange(e)}
                                    >
                                        <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' }}>{labels.title}</h3>
                        <StyledSlider {...settings}>
                            {capsules.map((element) =>
                                <div className="marketplace_card" key={element.name}>
                                    <div className="microlearning-up-info">
                                        <img src={element.image} alt={element.name} />
                                        <h3>{element.name}</h3>
                                        <h4>{backendVars.labelStatus} : {element.status}</h4>
                                        {element.link_enroll &&
                                            <ul>
                                                <li>
                                                    <button
                                                        onClick={() => enroll(element.link_enroll)}
                                                        title={'Seleccionar: ' + element.name}
                                                        className="btn btn-primary cursor-pointer">
                                                        {backendVars.labelEnroll}
                                                    </button>
                                                </li>
                                            </ul>
                                        }
                                    </div>
                                </div>
                            )}
                        </StyledSlider>
                    </div>
                </div>
            </section>
        </React.Fragment>
    );
}

export default MarketPlace;