Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import { useDispatch } from "react-redux";
import useFetchHelper from "../../../hooks/useFetchHelper";
import { addNotification } from "../../../redux/notification/notification.actions";
import { axios } from "../../../utils";

const PeopleYouMayKnow = ({ url = `/helpers/people-you-may-know` }) => {

  const { data: peopleYouMayKnow } = useFetchHelper(url)
  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
      })
  }

  return (
    <div className='peopleYouMayKnow'>
      <div className="sd-title d-flex align-items-center justify-content-between">
        <h3>Conecta con:</h3>
        <a href="/connection/people-you-may-know" target="_blank">
          Ver más
        </a>
      </div>
      <div className='suggest-list'>
        {peopleYouMayKnow
          ? peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile }) =>
            <div className='user' key={id}>
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
                <a href={profile} target="_blank" rel="noreferrer">
                  <img src={image} alt={`${name} profile image`} />
                </a>
                <h4>{name}</h4>
              </div>
              <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
                {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>
          )
          : <div className="view-more">Sin sugerencias</div>
        }
      </div>
    </div >
  );
};

export default PeopleYouMayKnow;