Proyectos de Subversion LeadersLinked - SPA

Rev

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