Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";
import { axios } from "../../../../utils";
import { useDispatch } from "react-redux";
import { addNotification } from "../../../../redux/notification/notification.actions";
import EastIcon from '@mui/icons-material/East';
import EmptySection from "../../../../shared/empty-section/EmptySection";
import './Widget.scss'

const PeopleYouMayKnow = () => {

    const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
    const dispatch = useDispatch()

    const handleConnect = (url) => {
        axios.post(url)
            .then(({ data }) => {
                if (!data.success) {
                    return dispatch(addNotification({
                        style: 'danger',
                        msg: typeof data.data === 'string'
                            ? data.data
                            : 'Ha ocurrido un error'
                    }))
                }

                dispatch(addNotification({
                    style: 'success',
                    msg: data.data
                }))
                return getSuggestion()
            })
    }

    const getSuggestion = async (url = `/helpers/people-you-may-know`) => {
        try {
            const { data: response } = await axios.get(url)
            if (response.success) setPeopleYouMayKnow(response.data.slice(0, 3));
        } catch (error) {
            console.log(error);
        }
    }

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

    return (
        <div className='linked__widget'>
            <div className="linked__widget-header">
                <h3>Conecta con:</h3>
            </div>
            <div className='linked__widget-list'>
                {peopleYouMayKnow.length
                    ? peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, 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>
                                    {link_request &&
                                        <button
                                            className="btn btn-primary"
                                            onClick={() => handleConnect(link_request)}
                                        >
                                            Conectar
                                        </button>
                                    }
                                    {link_cancel &&
                                        <button
                                            className="btn btn-secondary"
                                            onClick={() => handleConnect(link_cancel)}
                                        >
                                            Cancelar
                                        </button>
                                    }
                                </div>
                            </div>
                        )
                    })
                    : <EmptySection message="Sin sugerencias" />
                }
            </div>
            <a href="/connection/people-you-may-know" target='_blank' >
                Ver todas las recomendaciones
                <EastIcon className="ml-2" />
            </a>
        </div >
    );
};

export default PeopleYouMayKnow;