Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2951 | Rev 2953 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2922 stevensc 1 
import React, { useMemo, useState } from 'react'
5 stevensc 2 
import { useSelector } from 'react-redux'
2947 stevensc 3 
import {
4 
  Accordion,
5 
  AccordionDetails,
6 
  AccordionSummary,
7 
  Avatar,
8 
  List,
2952 stevensc 9 
  ListItem,
2947 stevensc 10 
  ListItemAvatar,
11 
  ListItemButton,
12 
  ListItemText
13 
} from '@mui/material'
14 
import { ExpandMore } from '@mui/icons-material'
5 stevensc 15 
 
2922 stevensc 16 
import { useFetch } from '@hooks'
5 stevensc 17 
 
2921 stevensc 18 
import Widget from '@components/UI/Widget'
2947 stevensc 19 
import { Link } from 'react-router-dom'
853 stevensc 20 
 
1774 stevensc 21 
const GroupsWidget = () => {
5 stevensc 22 
  const labels = useSelector(({ intl }) => intl.labels)
23 
 
24 
  return (
2921 stevensc 25 
    <Widget>
26 
      <Widget.Body>
27 
        <GroupsWidget.Item url='/helpers/my-groups' title={labels.my_groups} />
28 
        <GroupsWidget.Item
29 
          url='/helpers/groups-suggestion'
30 
          title={labels.suggest_groups}
31 
        />
32 
      </Widget.Body>
33 
    </Widget>
5 stevensc 34 
  )
35 
}
36 
 
2922 stevensc 37 
const Item = ({ url = '/helpers/my-groups', title = 'Mis grupos' }) => {
2947 stevensc 38 
  const labels = useSelector(({ intl }) => intl.labels)
854 stevensc 39 
  const [lookMore, setLookMore] = useState(false)
5 stevensc 40 
 
2942 stevensc 41 
  const { data } = useFetch(url, [])
5 stevensc 42 
 
2942 stevensc 43 
  const items = useMemo(() => {
44 
    if (!lookMore) return [...data].slice(0, 3)
45 
    return data
2945 stevensc 46 
  }, [lookMore, data])
2942 stevensc 47 
 
5 stevensc 48 
  return (
2947 stevensc 49 
    <Accordion>
50 
      <AccordionSummary expandIcon={<ExpandMore />}>{title}</AccordionSummary>
51 
      <AccordionDetails>
52 
        <List>
53 
          {items.map(({ id, name, profile, image }) => (
2952 stevensc 54 
            <ListItem key={id}>
55 
              <ListItemButton to={profile} LinkComponent={Link}>
56 
                <ListItemAvatar>
57 
                  <Avatar src={image} />
58 
                </ListItemAvatar>
2942 stevensc 59 
 
2952 stevensc 60 
                <ListItemText primary={name} />
61 
              </ListItemButton>
62 
            </ListItem>
2947 stevensc 63 
          ))}
5 stevensc 64 
 
2947 stevensc 65 
          {data.length > 3 && (
2952 stevensc 66 
            <ListItem>
67 
              <ListItemButton
68 
                sx={{ textAlign: 'center' }}
69 
                onClick={() => setLookMore(!lookMore)}
70 
              >
71 
                {lookMore ? labels.view_less : labels.view_more}
72 
              </ListItemButton>
73 
            </ListItem>
2947 stevensc 74 
          )}
75 
        </List>
76 
      </AccordionDetails>
77 
    </Accordion>
5 stevensc 78 
  )
79 
}
80 
 
1774 stevensc 81 
GroupsWidget.Item = Item
5 stevensc 82 
 
1774 stevensc 83 
export default GroupsWidget