Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2951 | Rev 3379 | 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
  List,
6
  ListItemAvatar,
7
  ListItemButton,
8
  ListItemText,
2276 stevensc 9
  Typography
1516 stevensc 10
} from '@mui/material'
11
 
1567 stevensc 12
import { axios } from '@app/utils'
13
import { addNotification } from '@app/redux/notification/notification.actions'
2780 stevensc 14
import { useFetch } from '@hooks'
5 stevensc 15
 
2276 stevensc 16
import Widget from '@app/components/UI/Widget'
1567 stevensc 17
import Button from '@app/components/UI/buttons/Buttons'
5 stevensc 18
 
19
const PeopleYouMayKnow = () => {
1516 stevensc 20
  const { data: peopleYouMayKnow, refetch } = useFetch(
21
    '/helpers/people-you-may-know',
22
    []
23
  )
875 stevensc 24
  const [lookMore, setLookMore] = useState(false)
25
  const labels = useSelector(({ intl }) => intl.labels)
26
  const dispatch = useDispatch()
5 stevensc 27
 
1516 stevensc 28
  const users = useMemo(
29
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
1521 stevensc 30
    [peopleYouMayKnow, lookMore]
1516 stevensc 31
  )
32
 
5 stevensc 33
  const handleConnect = (url) => {
34
    axios.post(url).then(({ data }) => {
35
      if (!data.success) {
205 stevensc 36
        dispatch(
5 stevensc 37
          addNotification({
875 stevensc 38
            style: 'danger',
5 stevensc 39
            msg:
875 stevensc 40
              typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
5 stevensc 41
          })
875 stevensc 42
        )
43
        return
5 stevensc 44
      }
45
 
46
      dispatch(
47
        addNotification({
875 stevensc 48
          style: 'success',
49
          msg: data.data
5 stevensc 50
        })
875 stevensc 51
      )
1516 stevensc 52
      refetch()
875 stevensc 53
    })
54
  }
5 stevensc 55
 
1516 stevensc 56
  return (
2276 stevensc 57
    <Widget>
58
      <Widget.Header
59
        title={labels.connect_with + ':'}
2951 stevensc 60
        renderAction={() =>
61
          peopleYouMayKnow.length > 4 && (
2276 stevensc 62
            <Button onClick={() => setLookMore(!lookMore)}>
63
              {lookMore ? labels.view_less : labels.view_more}
64
            </Button>
65
          )
2951 stevensc 66
        }
2276 stevensc 67
      />
5 stevensc 68
 
2276 stevensc 69
      <Widget.Body>
70
        {!users.length ? (
71
          <Typography variant='body1' px={1}>
72
            {labels.datatable_empty}
1523 stevensc 73
          </Typography>
2276 stevensc 74
        ) : (
75
          <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
76
            {users.map(
77
              ({ id, image, link_cancel, link_request, name, profile }) => (
2951 stevensc 78
                <ListItemButton key={id}>
79
                  <ListItemAvatar>
80
                    <Avatar alt={`${name} image`} src={image} />
81
                  </ListItemAvatar>
1516 stevensc 82
 
2951 stevensc 83
                  <ListItemText primary={name} />
1519 stevensc 84
 
2951 stevensc 85
                  {link_request && (
86
                    <Button
3156 stevensc 87
                      color='primary'
2951 stevensc 88
                      onClick={() => handleConnect(link_request)}
89
                    >
90
                      {labels.connect}
91
                    </Button>
92
                  )}
93
                  {link_cancel && (
94
                    <Button
3156 stevensc 95
                      color='secondary'
2951 stevensc 96
                      onClick={() => handleConnect(link_cancel)}
97
                    >
98
                      {labels.cancel}
99
                    </Button>
100
                  )}
101
                </ListItemButton>
2276 stevensc 102
              )
103
            )}
104
          </List>
105
        )}
106
      </Widget.Body>
107
    </Widget>
875 stevensc 108
  )
109
}
5 stevensc 110
 
875 stevensc 111
export default PeopleYouMayKnow