Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2955 | Rev 2957 | 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 
 
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>
54 
        <List>
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>
2956 stevensc 69 
              <ListItemButton
70 
                sx={{ justifyContent: 'center' }}
71 
                onClick={toggleList}
72 
              >
73 
                <ListItemText
74 
                  primary={lookMore ? labels.view_less : labels.view_more}
75 
                />
2952 stevensc 76 
              </ListItemButton>
77 
            </ListItem>
2947 stevensc 78 
          )}
79 
        </List>
80 
      </AccordionDetails>
81 
    </Accordion>
5 stevensc 82 
  )
83 
}
84 
 
1774 stevensc 85 
GroupsWidget.Item = Item
5 stevensc 86 
 
1774 stevensc 87 
export default GroupsWidget