Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6545 | | Comparar con el anterior | Ultima modificación | Ver Log |

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