Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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