Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from 'react'
import { axios } from '../../utils';
import EmptySection from '../empty-section/EmptySection';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import './Widgets.scss'

const SuggestionWidget = ({ url, title }) => {
    const [suggestData, setSuggestData] = useState([]);
    const [lookMore, setLookMore] = useState(false);

    const getData = () => {
        axios.get(url)
            .then(({ data: response }) => {
                const { success, data } = response
                if (success) {
                    setSuggestData(data.sort((a, b) => a.priority - b.priority).reverse());
                }
            });
    }

    useEffect(() => {
        getData()
    }, []);

    const dataSlice = () => {
        let infoFollows = [...suggestData]
        if (!lookMore) {
            infoFollows = infoFollows.slice(0, 3)
        }
        return infoFollows
    }

    return (
        <div className='suggest__widget'>
            <div className="linked__widget-header">
                <h3>{title}</h3>
            </div>
            <div className='linked__widget-list'>
                {suggestData.length
                    ? dataSlice().map(({ id, name, image, profile }) => {
                        return (
                            <div className="linked__widget-content" key={id}>
                                <a href={profile} target="_blank" rel="noreferrer">
                                    <img src={image} alt={`${name} profile image`} />
                                </a>
                                <div className="linked__widget-info">
                                    <h4>{name}</h4>
                                    <a className='btn btn-primary' href={profile} target="_blank" rel="noreferrer">
                                        Ver perfil
                                    </a>
                                </div>
                            </div>
                        )
                    })
                    : <EmptySection message="Sin sugerencias" />
                }
            </div>
            <div className="load__suggest" onClick={() => setLookMore(!lookMore)}>
                <span>{lookMore ? 'Ver menos' : 'Ver más'}</span>
                <ExpandMoreIcon />
            </div>
        </div >
    )
}

export default SuggestionWidget