Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4323 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4322 stevensc 1 
import React, { useEffect, useState } from "react";
2 
import { useDispatch } from "react-redux";
3 
import { addNotification } from "../../../../redux/notification/notification.actions";
4 
import { axios } from "../../../../utils/axios";
5 
 
6 
const PeopleYouMayKnow = () => {
7 
 
8 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
9 
  const [lookMore, setLookMore] = useState(false);
10 
  const dispatch = useDispatch()
11 
 
12 
  const handleConnect = (url) => {
13 
    axios.post(url)
14 
      .then(({ data }) => {
15 
        if (!data.success) {
16 
          return dispatch(addNotification({
17 
            style: 'danger',
18 
            msg: typeof data.data === 'string'
19 
              ? data.data
20 
              : 'Ha ocurrido un error'
21 
          }))
22 
        }
23 
 
24 
        dispatch(addNotification({
25 
          style: 'success',
26 
          msg: data.data
27 
        }))
28 
        return getSuggestion()
29 
      })
30 
  }
31 
 
32 
  const getSuggestion = async (url = `/helpers/people-you-may-know`) => {
33 
    try {
34 
      const { data: response } = await axios.get(url)
35 
      if (response.success) setPeopleYouMayKnow(response.data);
36 
    } catch (error) {
37 
      console.log(error);
38 
    }
39 
  }
40 
 
41 
  useEffect(() => {
42 
    getSuggestion()
43 
  }, []);
44 
 
45 
  const dataSlice = () => {
46 
    let infoFollows = [...peopleYouMayKnow]
47 
    if (!lookMore) {
48 
      infoFollows = infoFollows.slice(0, 3)
49 
    }
50 
    return infoFollows
51 
  }
52 
 
53 
  return (
54 
    <div className='peopleYouMayKnow'>
55 
      <div className="sd-title d-flex align-items-center justify-content-between">
56 
        <h3>Conecta con:</h3>
57 
        {
58 
          peopleYouMayKnow.length >= 4 &&
59 
          <label onClick={() => setLookMore(!lookMore)}>
60 
            {lookMore ? 'Ver menos' : 'Ver mas'}
61 
          </label>
62 
        }
63 
      </div>
64 
      <div className='suggest-list'>
65 
        {peopleYouMayKnow.length
66 
          ? dataSlice().map(({ id, image, link_cancel, link_request, name, profile }) =>
67 
            <div className='user' key={id}>
68 
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
69 
                <a href={profile} target="_blank" rel="noreferrer">
70 
                  <img src={image} alt={`${name} profile image`} />
71 
                </a>
72 
                <h4 className="break-ellipsis">{name}</h4>
73 
              </div>
74 
              {link_request &&
75 
                <button
76 
                  className="btn btn-primary"
77 
                  onClick={() => handleConnect(link_request)}
78 
                >
79 
                  Conectar
80 
                </button>
81 
              }
82 
              {link_cancel &&
83 
                <button
84 
                  className="btn btn-secondary"
85 
                  onClick={() => handleConnect(link_cancel)}
86 
                >
87 
                  Cancelar
88 
                </button>
89 
              }
90 
            </div>
91 
          )
92 
          : <div className="view-more">Sin sugerencias</div>
93 
        }
94 
      </div>
95 
    </div >
96 
  );
97 
};
98 
 
99 
export default PeopleYouMayKnow;