Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
3286 stevensc 1
/* eslint-disable react/prop-types */
5173 stevensc 2
import React, { useEffect, useState } from 'react'
3
import { axios } from '../../../utils'
1 www 4
 
3609 stevensc 5
const SuggestedGroupsHelper = ({ suggestedClassname }) => {
5173 stevensc 6
  const [suggestedGroups, setSuggestedGroups] = useState([])
7
  const [lookMore, setLookMore] = useState(false)
1 www 8
 
9
  useEffect(() => {
2950 stevensc 10
    const url = '/helpers/groups-suggestion'
2925 stevensc 11
 
2924 stevensc 12
    axios.get(url)
3506 stevensc 13
      .then(({ data }) =>
14
        data.success &&
15
        setSuggestedGroups(data.data.sort((a, b) => parseInt(a.priority) - parseInt(b.priority)).reverse())
16
      )
5173 stevensc 17
  }, [])
1773 steven 18
 
19
  const getData = () => {
20
    let infoFollows = [...suggestedGroups]
2248 stevensc 21
    if (!lookMore) {
5173 stevensc 22
      infoFollows = infoFollows.slice(0, 3)
1773 steven 23
    }
24
    return infoFollows
25
  }
1 www 26
  return (
3892 stevensc 27
    <div className={`${suggestedClassname || ''} peopleYouMayKnow`}>
2931 stevensc 28
      <div className="sd-title d-flex align-items-center justify-content-between">
2926 stevensc 29
        <h3>Grupos:</h3>
3506 stevensc 30
        {suggestedGroups.length >= 3 &&
2926 stevensc 31
          <a
32
            href="#"
33
            onClick={(e) => {
34
              e.preventDefault()
35
              setLookMore(!lookMore)
36
            }}
37
          >
38
            {lookMore ? 'Ver menos' : 'Ver mas'}
39
          </a>
40
        }
2248 stevensc 41
      </div>
3837 stevensc 42
      <div className="suggest-list">
3506 stevensc 43
        {suggestedGroups.length
44
          ? getData().map(({ id, name, image, profile }) =>
45
            <div className='user' key={id}>
2925 stevensc 46
              <div className="w-100 d-flex align-items-center" style={{ gap: '.5rem' }}>
3286 stevensc 47
                <a href={profile} target="_blank" rel="noreferrer">
2925 stevensc 48
                  <img src={image} alt={`${name} profile image`} />
49
                </a>
50
                <h4>{name}</h4>
51
              </div>
2927 stevensc 52
              <div className="w-100 d-flex align-items-center justify-content-end" style={{ gap: '.5rem' }}>
2925 stevensc 53
                <a
54
                  className="btn btn-primary"
55
                  href={profile}
1 www 56
                >
3050 stevensc 57
                  Ver Grupo
2925 stevensc 58
                </a>
1 www 59
              </div>
60
            </div>
3506 stevensc 61
          )
62
          : <div className="view-more">Sin sugerencias</div>
63
        }
1 www 64
      </div>
2248 stevensc 65
    </div>
5173 stevensc 66
  )
67
}
1 www 68
 
5173 stevensc 69
export default SuggestedGroupsHelper