Proyectos de Subversion LeadersLinked - SPA

Rev

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

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