Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2957 | Rev 3694 | 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'
2959 stevensc 2 
import { Link } from 'react-router-dom'
5 stevensc 3 
import { useSelector } from 'react-redux'
2947 stevensc 4 
import {
5 
  Accordion,
6 
  AccordionDetails,
7 
  AccordionSummary,
8 
  Avatar,
9 
  List,
2952 stevensc 10 
  ListItem,
2947 stevensc 11 
  ListItemAvatar,
12 
  ListItemButton,
13 
  ListItemText
14 
} from '@mui/material'
15 
import { ExpandMore } from '@mui/icons-material'
5 stevensc 16 
 
2922 stevensc 17 
import { useFetch } from '@hooks'
5 stevensc 18 
 
2921 stevensc 19 
import Widget from '@components/UI/Widget'
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 
 
2953 stevensc 43 
  const items = useMemo(
44 
    () => (lookMore ? data : data.slice(0, 3)),
45 
    [lookMore, data]
46 
  )
2942 stevensc 47 
 
2953 stevensc 48 
  const toggleList = () => setLookMore(!lookMore)
49 
 
5 stevensc 50 
  return (
2947 stevensc 51 
    <Accordion>
52 
      <AccordionSummary expandIcon={<ExpandMore />}>{title}</AccordionSummary>
53 
      <AccordionDetails>
2959 stevensc 54 
        <List sx={{ maxHeight: 225, overflow: 'auto' }}>
2947 stevensc 55 
          {items.map(({ id, name, profile, image }) => (
2952 stevensc 56 
            <ListItem key={id}>
57 
              <ListItemButton to={profile} LinkComponent={Link}>
58 
                <ListItemAvatar>
59 
                  <Avatar src={image} />
60 
                </ListItemAvatar>
2942 stevensc 61 
 
2952 stevensc 62 
                <ListItemText primary={name} />
63 
              </ListItemButton>
64 
            </ListItem>
2947 stevensc 65 
          ))}
5 stevensc 66 
 
2947 stevensc 67 
          {data.length > 3 && (
2952 stevensc 68 
            <ListItem>
2957 stevensc 69 
              <ListItemButton onClick={toggleList}>
2956 stevensc 70 
                <ListItemText
2957 stevensc 71 
                  sx={{ textAlign: 'center' }}
2956 stevensc 72 
                  primary={lookMore ? labels.view_less : labels.view_more}
73 
                />
2952 stevensc 74 
              </ListItemButton>
75 
            </ListItem>
2947 stevensc 76 
          )}
77 
        </List>
78 
      </AccordionDetails>
79 
    </Accordion>
5 stevensc 80 
  )
81 
}
82 
 
1774 stevensc 83 
GroupsWidget.Item = Item
5 stevensc 84 
 
1774 stevensc 85 
export default GroupsWidget