Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
4014 stevensc 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 
 
4014 stevensc 6 
const PeopleYouMayKnow = () => {
4006 stevensc 7 
 
4014 stevensc 8 
  const [peopleYouMayKnow, setPeopleYouMayKnow] = useState([]);
4110 stevensc 9 
  const [lookMore, setLookMore] = useState(false);
2885 stevensc 10 
  const dispatch = useDispatch()
1 www 11 
 
2885 stevensc 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 
 
4014 stevensc 24 
        dispatch(addNotification({
25 
          style: 'success',
26 
          msg: data.data
27 
        }))
28 
        return getSuggestion()
2885 stevensc 29 
      })
30 
  }
31 
 
4014 stevensc 32 
  const getSuggestion = async (url = `/helpers/people-you-may-know`) => {
33 
    try {
34 
      const { data } = await axios.get(url)
35 
      const resData = [...data.data].slice(0, 3);
36 
      if (data.success) setPeopleYouMayKnow(resData);
37 
    } catch (error) {
38 
      console.log(error);
39 
    }
40 
  }
41 
 
42 
  useEffect(() => {
43 
    getSuggestion()
44 
  }, []);
45 
 
4110 stevensc 46 
  const dataSlice = () => {
47 
    let infoFollows = [...peopleYouMayKnow]
48 
    if (!lookMore) {
49 
      infoFollows = infoFollows.slice(0, 3)
50 
    }
51 
    return infoFollows
52 
  }
53 
 
1 www 54 
  return (
3921 stevensc 55 
    <div className='peopleYouMayKnow'>
2890 stevensc 56 
      <div className="sd-title d-flex align-items-center justify-content-between">
57 
        <h3>Conecta con:</h3>
4110 stevensc 58 
        <label onClick={() => setLookMore(!lookMore)}>
3921 stevensc 59 
          Ver más
4110 stevensc 60 
        </label>
2890 stevensc 61 
      </div>
3837 stevensc 62 
      <div className='suggest-list'>
4014 stevensc 63 
        {peopleYouMayKnow.length
4110 stevensc 64 
          ? dataSlice().map(({ id, image, link_cancel, link_request, name, profile }) =>
4090 stevensc 65 
            <div className='user' key={id}>
3921 stevensc 66 
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
67 
                <a href={profile} target="_blank" rel="noreferrer">
68 
                  <img src={image} alt={`${name} profile image`} />
69 
                </a>
4090 stevensc 70 
                <h4 className="break-ellipsis">{name}</h4>
3921 stevensc 71 
              </div>
4091 stevensc 72 
              {link_request &&
73 
                <button
74 
                  className="btn btn-primary"
75 
                  onClick={() => handleConnect(link_request)}
76 
                >
77 
                  Conectar
78 
                </button>
79 
              }
80 
              {link_cancel &&
81 
                <button
82 
                  className="btn btn-secondary"
83 
                  onClick={() => handleConnect(link_cancel)}
84 
                >
85 
                  Cancelar
86 
                </button>
87 
              }
3921 stevensc 88 
            </div>
89 
          )
3506 stevensc 90 
          : <div className="view-more">Sin sugerencias</div>
91 
        }
2890 stevensc 92 
      </div>
2885 stevensc 93 
    </div >
1 www 94 
  );
95 
};
96 
 
97 
export default PeopleYouMayKnow;