Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3156 | 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 
 
3379 stevensc 12 
import { axios } from '@utils'
2780 stevensc 13 
import { useFetch } from '@hooks'
3379 stevensc 14 
import { addNotification } from '@store/notification/notification.actions'
5 stevensc 15 
 
3379 stevensc 16 
import Widget from '@components/UI/Widget'
17 
import Button from '@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 
 
3379 stevensc 56 
  if (!users.length) {
57 
    return null
58 
  }
59 
 
1516 stevensc 60 
  return (
2276 stevensc 61 
    <Widget>
62 
      <Widget.Header
63 
        title={labels.connect_with + ':'}
2951 stevensc 64 
        renderAction={() =>
65 
          peopleYouMayKnow.length > 4 && (
2276 stevensc 66 
            <Button onClick={() => setLookMore(!lookMore)}>
67 
              {lookMore ? labels.view_less : labels.view_more}
68 
            </Button>
69 
          )
2951 stevensc 70 
        }
2276 stevensc 71 
      />
5 stevensc 72 
 
2276 stevensc 73 
      <Widget.Body>
3379 stevensc 74 
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
75 
          {users.map(
76 
            ({ id, image, link_cancel, link_request, name, profile }) => (
77 
              <ListItemButton key={id}>
78 
                <ListItemAvatar>
79 
                  <Avatar alt={`${name} image`} src={image} />
80 
                </ListItemAvatar>
1516 stevensc 81 
 
3379 stevensc 82 
                <ListItemText primary={name} />
1519 stevensc 83 
 
3379 stevensc 84 
                {link_request && (
85 
                  <Button
86 
                    color='primary'
87 
                    onClick={() => handleConnect(link_request)}
88 
                  >
89 
                    {labels.connect}
90 
                  </Button>
91 
                )}
92 
                {link_cancel && (
93 
                  <Button
94 
                    color='secondary'
95 
                    onClick={() => handleConnect(link_cancel)}
96 
                  >
97 
                    {labels.cancel}
98 
                  </Button>
99 
                )}
100 
              </ListItemButton>
101 
            )
102 
          )}
103 
        </List>
2276 stevensc 104 
      </Widget.Body>
105 
    </Widget>
875 stevensc 106 
  )
107 
}
5 stevensc 108 
 
875 stevensc 109 
export default PeopleYouMayKnow