Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3432 Rev 3596
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 
  Avatar,
 5 
  Avatar,
6 
  Button,
 6 
  Button,
7 
  List,
 7 
  List,
8 
  ListItem,
 8 
  ListItem,
9 
  ListItemAvatar,
 9 
  ListItemAvatar,
10 
  ListItemButton,
 10 
  ListItemButton,
11 
  ListItemText
 11 
  ListItemText
12 
} from '@mui/material'
 12 
} from '@mui/material';
Línea 13... Línea 13...
13 
 
 13 
 
14 
import { useFetch } from '@hooks'
 14 
import { useFetch } from '@hooks';
Línea 15... Línea 15...
15 
import colors from '@styles/colors'
 15 
import colors from '@styles/config/colors';
16 
 
 16 
 
17 
import Widget from '@components/UI/Widget'
 17 
import Widget from '@components/UI/Widget';
Línea 18... Línea 18...
18 
import Spinner from '@components/UI/Spinner'
 18 
import Spinner from '@components/UI/Spinner';
19 
import EmptySection from '@components/UI/EmptySection'
 19 
import EmptySection from '@components/UI/EmptySection';
20 
 
 20 
 
21 
const SuggestWidget = ({ title, url }) => {
 21 
const SuggestWidget = ({ title, url }) => {
22 
  const { data, isLoading } = useFetch(url, [])
 22 
  const { data, isLoading } = useFetch(url, []);
23 
  const [lookMore, setLookMore] = useState(false)
 - 
 
24 
  const labels = useSelector(({ intl }) => intl.labels)
 23 
  const [lookMore, setLookMore] = useState(false);
25 
 
 - 
 
26 
  const items = useMemo(
 - 
 
Línea 27... Línea 24...
27 
    () => (lookMore ? data : [...data].slice(0, 3)),
 24 
  const labels = useSelector(({ intl }) => intl.labels);
28 
    [lookMore, data]
 25 
 
29 
  )
 26 
  const items = useMemo(() => (lookMore ? data : [...data].slice(0, 3)), [lookMore, data]);
30 
 
 27 
 
31 
  return (
 28 
  return (
32 
    <Widget>
 29 
    <Widget>
Línea 33... Línea 30...
33 
      <Widget.Header
 30 
      <Widget.Header
34 
        title={title}
 31 
        title={title}
35 
        renderAction={() => {
 32 
        renderAction={() => {
36 
          if (data.length <= 3) return null
 33 
          if (data.length <= 3) return null;
37 
 
 34 
 
38 
          return (
 35 
          return (
39 
            <Button onClick={() => setLookMore(!lookMore)}>
 36 
            <Button onClick={() => setLookMore(!lookMore)}>
40 
              {lookMore ? labels.view_less : labels.view_more}
 37 
              {lookMore ? labels.view_less : labels.view_more}
41 
            </Button>
 38 
            </Button>
Línea 42... Línea 39...
42 
          )
 39 
          );
43 
        }}
 40 
        }}
44 
      />
 41 
      />
45 
      <Widget.Body styles={data.length > 0 && { padding: '0 !important' }}>
 42 
      <Widget.Body styles={data.length > 0 && { padding: '0 !important' }}>
46 
        {isLoading && <Spinner />}
 43 
        {isLoading && <Spinner />}
47 
 
 - 
 
48 
        {!isLoading && data.length === 0 ? (
 - 
 
49 
          <EmptySection message={labels?.datatable_empty} />
 44 
 
50 
        ) : (
 - 
 
51 
          <List sx={{ maxHeight: '225px', overflow: 'auto' }}>
 45 
        {!isLoading && data.length === 0 ? (
52 
            {items.map(({ name, profile, image, id }) => (
 46 
          <EmptySection message={labels?.datatable_empty} />
53 
              <ListItem
 47 
        ) : (
54 
                key={id}
 48 
          <List sx={{ maxHeight: '225px', overflow: 'auto' }}>
Línea 65... Línea 59...
65 
            ))}
 59 
            ))}
66 
          </List>
 60 
          </List>
67 
        )}
 61 
        )}
68 
      </Widget.Body>
 62 
      </Widget.Body>
69 
    </Widget>
 63 
    </Widget>
70 
  )
 64 
  );
71 
}
 65 
};
Línea 72... Línea 66...
72 
 
 66