Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 949 | Ir a la última revisión | | Ultima modificación | Ver Log |

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