Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
1516 stevensc 1 
import React, { useMemo, useState } from 'react'
2 
import { useDispatch, useSelector } from 'react-redux'
3 
import {
4 
  Avatar,
5 
  Box,
6 
  List,
7 
  ListItem,
8 
  ListItemAvatar,
9 
  ListItemButton,
10 
  ListItemText,
1523 stevensc 11 
  Typography,
12 
  styled
1516 stevensc 13 
} from '@mui/material'
14 
 
1567 stevensc 15 
import { axios } from '@app/utils'
16 
import { addNotification } from '@app/redux/notification/notification.actions'
17 
import useFetch from '@app/hooks/useFetch'
5 stevensc 18 
 
1567 stevensc 19 
import Button from '@app/components/UI/buttons/Buttons'
1516 stevensc 20 
import WidgetWrapper from '../WidgetLayout'
5 stevensc 21 
 
1523 stevensc 22 
const Header = styled(Box)(({ theme }) => ({
23 
  display: 'flex',
24 
  alignItems: 'baseline',
25 
  justifyContent: 'space-between',
26 
  padding: theme.spacing(1),
27 
  span: {
28 
    cursor: 'pointer'
29 
  }
30 
}))
31 
 
5 stevensc 32 
const PeopleYouMayKnow = () => {
1516 stevensc 33 
  const { data: peopleYouMayKnow, refetch } = useFetch(
34 
    '/helpers/people-you-may-know',
35 
    []
36 
  )
875 stevensc 37 
  const [lookMore, setLookMore] = useState(false)
38 
  const labels = useSelector(({ intl }) => intl.labels)
39 
  const dispatch = useDispatch()
5 stevensc 40 
 
1516 stevensc 41 
  const users = useMemo(
42 
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
1521 stevensc 43 
    [peopleYouMayKnow, lookMore]
1516 stevensc 44 
  )
45 
 
5 stevensc 46 
  const handleConnect = (url) => {
47 
    axios.post(url).then(({ data }) => {
48 
      if (!data.success) {
205 stevensc 49 
        dispatch(
5 stevensc 50 
          addNotification({
875 stevensc 51 
            style: 'danger',
5 stevensc 52 
            msg:
875 stevensc 53 
              typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
5 stevensc 54 
          })
875 stevensc 55 
        )
56 
        return
5 stevensc 57 
      }
58 
 
59 
      dispatch(
60 
        addNotification({
875 stevensc 61 
          style: 'success',
62 
          msg: data.data
5 stevensc 63 
        })
875 stevensc 64 
      )
1516 stevensc 65 
      refetch()
875 stevensc 66 
    })
67 
  }
5 stevensc 68 
 
1516 stevensc 69 
  return (
70 
    <WidgetWrapper>
1523 stevensc 71 
      <Header>
1516 stevensc 72 
        <Typography variant='h3'>{`${labels.connect_with}:`}</Typography>
5 stevensc 73 
 
74 
        {peopleYouMayKnow.length >= 4 && (
1523 stevensc 75 
          <Typography variant='body2' onClick={() => setLookMore(!lookMore)}>
5 stevensc 76 
            {lookMore ? labels.view_less : labels.view_more}
1523 stevensc 77 
          </Typography>
5 stevensc 78 
        )}
1523 stevensc 79 
      </Header>
1516 stevensc 80 
 
1518 stevensc 81 
      {!users.length ? (
1560 stevensc 82 
        <Typography variant='body1' px={1}>
83 
          {labels.datatable_empty}
84 
        </Typography>
1518 stevensc 85 
      ) : (
1529 stevensc 86 
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
1518 stevensc 87 
          {users.map(
88 
            ({ id, image, link_cancel, link_request, name, profile }) => (
1519 stevensc 89 
              <ListItem key={id} disablePadding disableRipple>
90 
                <ListItemButton disableRipple>
91 
                  <ListItemAvatar>
92 
                    <Avatar alt={`${name} image`} src={image} />
93 
                  </ListItemAvatar>
94 
 
95 
                  <ListItemText primary={name} />
96 
 
1521 stevensc 97 
                  {link_request && (
1567 stevensc 98 
                    <Button
99 
                      variant='primary'
1521 stevensc 100 
                      onClick={() => handleConnect(link_request)}
1567 stevensc 101 
                    >
102 
                      {labels.connect}
103 
                    </Button>
1521 stevensc 104 
                  )}
105 
                  {link_cancel && (
1567 stevensc 106 
                    <Button
107 
                      variant='secondary'
1521 stevensc 108 
                      onClick={() => handleConnect(link_cancel)}
1567 stevensc 109 
                    >
110 
                      {labels.cancel}
111 
                    </Button>
1521 stevensc 112 
                  )}
1516 stevensc 113 
                </ListItemButton>
114 
              </ListItem>
5 stevensc 115 
            )
1518 stevensc 116 
          )}
117 
        </List>
118 
      )}
1516 stevensc 119 
    </WidgetWrapper>
875 stevensc 120 
  )
121 
}
5 stevensc 122 
 
875 stevensc 123 
export default PeopleYouMayKnow