Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2929 | Rev 3506 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React, { useEffect, useState } from "react";
2885 stevensc 2 
import { useDispatch } from "react-redux";
3 
import { addNotification } from "../../../redux/notification/notification.actions";
2232 stevensc 4 
import { axios } from "../../../utils";
1 www 5 
 
6 
import styles from "./peopleYouMayKnow.module.scss";
7 
 
8 
const PeopleYouMayKnow = () => {
9 
  // states
10 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
11 
  const [error, setError] = useState("");
2885 stevensc 12 
  const dispatch = useDispatch()
1 www 13 
 
2885 stevensc 14 
  const handleConnect = (url) => {
15 
    axios.post(url)
16 
      .then(({ data }) => {
17 
        if (!data.success) {
18 
          return dispatch(addNotification({
19 
            style: 'danger',
20 
            msg: typeof data.data === 'string'
21 
              ? data.data
22 
              : 'Ha ocurrido un error'
23 
          }))
24 
        }
25 
 
2888 stevensc 26 
        dispatch(addNotification({
2885 stevensc 27 
          style: 'success',
28 
          msg: data.data
29 
        }))
2888 stevensc 30 
        return getSuggestion()
2885 stevensc 31 
      })
32 
  }
33 
 
2888 stevensc 34 
  const getSuggestion = (url) => {
2910 stevensc 35 
    axios.get(`/helpers/people-you-may-know`)
36 
      .then(({ data }) => {
2911 stevensc 37 
        const resData = [...data.data].slice(0, 3);
2910 stevensc 38 
        if (data.success) {
39 
          setPeopleYouMayKnow(resData);
40 
        } else {
41 
          // alert error
42 
        }
43 
      });
2888 stevensc 44 
  }
45 
 
46 
  useEffect(() => {
47 
    getSuggestion()
48 
  }, []);
49 
 
1 www 50 
  return (
2883 stevensc 51 
    <div className={styles.peopleYouMayKnow} id="suggestions-list-people-you-may-know">
2890 stevensc 52 
      <div className="sd-title d-flex align-items-center justify-content-between">
53 
        <h3>Conecta con:</h3>
1 www 54 
        {
55 
          !error && (
2890 stevensc 56 
            <a href="/connection/people-you-may-know" target="_blank">
57 
              Ver más
58 
            </a>
1 www 59 
          )
60 
        }
2890 stevensc 61 
      </div>
62 
      <div className={styles.suggestionList}>
63 
        {peopleYouMayKnow.length ? (
64 
          <React.Fragment>
65 
            {error ? (
66 
              <div className="suggestion-usd"> Ha ocurrido un error :( </div>
67 
            ) : (
68 
              peopleYouMayKnow.map(({ id, image, link_cancel, link_request, name, profile, relation }) => (
69 
                <div className={styles.user} key={id}>
70 
                  <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
71 
                    <a href={profile} target="_blank">
72 
                      <img src={image} alt={`${name} profile image`} />
73 
                    </a>
74 
                    <h4>{name}</h4>
75 
                  </div>
2931 stevensc 76 
                  <div className="w-100 d-flex align-items-center justify-content-start" style={{ gap: '.5rem' }}>
2890 stevensc 77 
                    {
78 
                      link_request
79 
                      &&
80 
                      <button
81 
                        className="btn btn-primary"
82 
                        onClick={() => handleConnect(link_request)}
83 
                      >
84 
                        Conectar
85 
                      </button>
86 
                    }
87 
                    {
88 
                      link_cancel
89 
                      &&
90 
                      <button
91 
                        className="btn btn-secondary"
92 
                        onClick={() => handleConnect(link_cancel)}
93 
                      >
94 
                        Cancelar
95 
                      </button>
96 
                    }
97 
                  </div>
98 
                </div>
99 
              ))
100 
            )}
101 
 
102 
          </React.Fragment>
103 
        ) : (
104 
          <div className="view-more">Sin sugerencias</div>
105 
        )}
106 
      </div>
2885 stevensc 107 
    </div >
1 www 108 
  );
109 
};
110 
 
111 
export default PeopleYouMayKnow;