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()

  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 = (url) => {

    axios.get(`/helpers/people-you-may-know`).then((response) => {

      const resData = response.data;

      if (resData.success) {

        setPeopleYouMayKnow(resData.data);

      } else {

        // alert error

      }

    });

  }

  useEffect(() => {

    getSuggestion()

  }, []);

  return (

    <div className={styles.peopleYouMayKnow} id="suggestions-list-people-you-may-know">

      <div className="sd-title d-flex align-items-center justify-content-between">

        <h3>Conecta con:</h3>

        {

          !error && (

            <a href="/connection/people-you-may-know" target="_blank">

              Ver más

            </a>

          )

        }

      </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" style={{ gap: '.5rem' }}>

                    <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" 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>

              ))

            )}

          </React.Fragment>

        ) : (

          <div className="view-more">Sin sugerencias</div>

        )}

      </div>

    </div >

  );

};

export default PeopleYouMayKnow;