Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5407 stevensc 1 
/* eslint-disable react/prop-types */
2 
import axios from 'axios'
3 
import React, { useEffect, useState } from 'react'
4 
import EmptySection from '../../empty-section/EmptySection'
5 
import { useSelector } from 'react-redux'
6 
 
7 
const SuggestWidget = ({
8 
  title = 'Mis Grupos:',
5415 stevensc 9 
  url = '/helpers/my-groups',
5793 stevensc 10 
  btnLabelAccept = 'Ver',
5407 stevensc 11 
}) => {
12 
  const [widgetData, setWidgetData] = useState([])
13 
  const [lookMore, setLookMore] = useState(false)
5793 stevensc 14 
  const labels = useSelector((state) => state.labels)
5407 stevensc 15 
 
16 
  const getData = () => {
5793 stevensc 17 
    axios.get(url).then(({ data: response }) => {
18 
      const { success, data } = response
19 
      if (success) {
20 
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
21 
      }
22 
    })
5407 stevensc 23 
  }
24 
 
25 
  useEffect(() => {
26 
    getData()
27 
  }, [])
28 
 
29 
  const dataSlice = () => {
30 
    let infoFollows = [...widgetData]
5415 stevensc 31 
 
5431 stevensc 32 
    if (!lookMore) {
5435 stevensc 33 
      infoFollows = infoFollows.slice(0, 3)
5431 stevensc 34 
    }
5415 stevensc 35 
 
5407 stevensc 36 
    return infoFollows
37 
  }
38 
 
39 
  return (
5793 stevensc 40 
    <div className="suggests_widget">
5407 stevensc 41 
      <div className="suggests_widget-header">
42 
        <h3>{title}</h3>
5793 stevensc 43 
        {widgetData.length >= 3 && (
5407 stevensc 44 
          <span onClick={() => setLookMore(!lookMore)}>
45 
            {lookMore ? labels.VIEW_LESS : labels.VIEW_MORE}
5793 stevensc 46 
          </span>
47 
        )}
5407 stevensc 48 
      </div>
49 
      <div className="suggest-list">
5793 stevensc 50 
        {widgetData.length ? (
51 
          dataSlice().map((suggest) => (
52 
            <SuggestWidget.Item
53 
              key={suggest.id}
54 
              suggest={suggest}
55 
              btnLabelAccept={btnLabelAccept}
56 
            />
57 
          ))
58 
        ) : (
59 
          <EmptySection align="left" message={labels.DATATABLE_EMPTY} />
60 
        )}
5407 stevensc 61 
      </div>
62 
    </div>
63 
  )
64 
}
65 
 
5415 stevensc 66 
const Item = ({ suggest, btnLabelAccept }) => {
67 
  return (
5793 stevensc 68 
    <div className="user">
5415 stevensc 69 
      <div className="d-inline-flex align-items-center">
70 
        <a href={suggest.profile} target="_blank" rel="noreferrer">
71 
          <img src={suggest.image} alt={`${suggest.name} profile image`} />
72 
        </a>
5793 stevensc 73 
        <h4 className="break-ellipsis">{suggest.name}</h4>
5415 stevensc 74 
      </div>
75 
      <a className="btn btn-primary ml-auto" href={suggest.profile}>
76 
        {btnLabelAccept}
77 
      </a>
78 
    </div>
79 
  )
80 
}
81 
 
82 
SuggestWidget.Item = Item
83 
 
5407 stevensc 84 
export default SuggestWidget