Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";
import { axios } from "../../../utils";

import styles from "./peopleYouMayKnow.module.scss";

const PeopleYouMayKnow = () => {
  // states
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
  const [error, setError] = useState("");
  const dispatch = useDispatch()

  useEffect(() => {
    axios.get(`/helpers/people-you-may-know`).then((response) => {
      const resData = response.data;
      if (resData.success) {
        setPeopleYouMayKnow(resData.data);
      } else {
        // alert error
      }
    });
  }, []);

  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'
          }))
        }

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

  return (
    <div className={styles.peopleYouMayKnow} id="suggestions-list-people-you-may-know">
      <div className="sd-title">
        <h3>Personas que puede conocer</h3>
      </div>
      <>
        <div className={styles.suggestionList}>
          {peopleYouMayKnow.length ? (
            <React.Fragment>
              {error ? (
                <div className="suggestion-usd"> Ha ocurrido un error :( </div>
              ) : (
                peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile, relation }) => (
                  <div className={styles.user} key={id}>
                    <div className="w-100 d-flex align-items-center">
                      <a href={profile} target="_blank">
                        <img src={image} alt={`${name} profile image`} />
                      </a>
                      <h4>{name}</h4>
                    </div>
                    <div className="w-100 d-flex align-items-center justify-content-center">
                      {
                        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>
                ))
              )}

            </React.Fragment>
          ) : (
            <div className="view-more">Sin sugerencias</div>
          )}
        </div>
        {
          !error && (
            <div className={styles.viewMore}>
              <a href="/connection/people-you-may-know" target="_blank">
                <button
                  className="btn btn-primary"
                  type="button"
                  style={{ padding: '2px 10px' }}
                >
                  Ver más
                </button>
              </a>
            </div>
          )
        }
      </>
    </div >
  );
};

export default PeopleYouMayKnow;