Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { IconButton, styled } from '@mui/material'
import { ExpandLess, ExpandMore } from '@mui/icons-material'

import { axios } from '@utils'

import Widget from '@components/UI/Widget'
import List from '@components/UI/List'

const HelperItem = styled('div')`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
`

const GroupsWidget = () => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <Widget>
      <Widget.Body>
        <GroupsWidget.Item url='/helpers/my-groups' title={labels.my_groups} />
        <GroupsWidget.Item
          url='/helpers/groups-suggestion'
          title={labels.suggest_groups}
        />
      </Widget.Body>
    </Widget>
  )
}

const Item = ({
  url = '/helpers/my-groups',
  title = 'Mis grupos',
  display = false
}) => {
  const [widgetData, setWidgetData] = useState([])
  const [displayMenu, setDisplayMenu] = useState(display)
  const [lookMore, setLookMore] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const getData = () => {
    axios.get(url).then((response) => {
      const { success, data } = response.data

      if (success) {
        setWidgetData(data.sort((a, b) => a.priority - b.priority).reverse())
      }
    })
  }

  const toggleMenu = () => {
    setDisplayMenu(!displayMenu)
  }

  const dataSlice = () => {
    let infoFollows = [...widgetData]
    if (!lookMore) {
      infoFollows = infoFollows.slice(0, 3)
    }
    return infoFollows
  }

  useEffect(() => {
    getData()
  }, [])

  return (
    <>
      <HelperItem>
        <span>{title}</span>
        <IconButton onClick={toggleMenu}>
          {displayMenu ? <ExpandLess /> : <ExpandMore />}
        </IconButton>
      </HelperItem>

      <List styles={{ width: '100%', height: displayMenu ? 'auto' : 0 }}>
        {dataSlice().map(({ id, name, profile, image }) => (
          <List.Item key={id} image={image} title={name} url={profile} />
        ))}

        {widgetData.length > 3 && (
          <List.Item
            title={lookMore ? labels.view_less : labels.view_more}
            onClick={() => setLookMore(!lookMore)}
          />
        )}
      </List>
    </>
  )
}

GroupsWidget.Item = Item

export default GroupsWidget