Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo, useState } from 'react'

import { useSelector } from 'react-redux'

import {

  Accordion,

  AccordionDetails,

  AccordionSummary,

  Avatar,

  List,

  ListItemAvatar,

  ListItemButton,

  ListItemText

} from '@mui/material'

import { ExpandMore } from '@mui/icons-material'

import { useFetch } from '@hooks'

import Widget from '@components/UI/Widget'

import { Link } from 'react-router-dom'

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' }) => {

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

  const [lookMore, setLookMore] = useState(false)

  const { data } = useFetch(url, [])

  const items = useMemo(() => {

    if (!lookMore) return [...data].slice(0, 3)

    return data

  }, [lookMore, data])

  return (

    <Accordion>

      <AccordionSummary expandIcon={<ExpandMore />}>{title}</AccordionSummary>

      <AccordionDetails>

        <List>

          {items.map(({ id, name, profile, image }) => (

            <ListItemButton key={id} to={profile} LinkComponent={Link}>

              <ListItemAvatar>

                <Avatar src={image} />

              </ListItemAvatar>

              <ListItemText primary={name} />

            </ListItemButton>

          ))}

          {data.length > 3 && (

            <ListItemButton

              sx={{ textAlign: 'center' }}

              onClick={() => setLookMore(!lookMore)}

            >

              {lookMore ? labels.view_less : labels.view_more}

            </ListItemButton>

          )}

        </List>

      </AccordionDetails>

    </Accordion>

  )

}

GroupsWidget.Item = Item

export default GroupsWidget