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