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