Proyectos de Subversion LeadersLinked - SPA

Rev

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

import React, { useMemo, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
  Avatar,
  Box,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemText,
  Typography,
  styled
} from '@mui/material'

import { axios } from '@app/utils'
import { addNotification } from '@app/redux/notification/notification.actions'
import useFetch from '@app/hooks/useFetch'

import Button from '@app/components/UI/buttons/Buttons'
import WidgetWrapper from '../WidgetLayout'

const Header = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'baseline',
  justifyContent: 'space-between',
  padding: theme.spacing(1),
  span: {
    cursor: 'pointer'
  }
}))

const PeopleYouMayKnow = () => {
  const { data: peopleYouMayKnow, refetch } = useFetch(
    '/helpers/people-you-may-know',
    []
  )
  const [lookMore, setLookMore] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const users = useMemo(
    () => (lookMore ? peopleYouMayKnow : [...peopleYouMayKnow].slice(0, 3)),
    [peopleYouMayKnow, lookMore]
  )

  const handleConnect = (url) => {
    axios.post(url).then(({ data }) => {
      if (!data.success) {
        dispatch(
          addNotification({
            style: 'danger',
            msg:
              typeof data.data === 'string' ? data.data : 'Ha ocurrido un error'
          })
        )
        return
      }

      dispatch(
        addNotification({
          style: 'success',
          msg: data.data
        })
      )
      refetch()
    })
  }

  return (
    <WidgetWrapper>
      <Header>
        <Typography variant='h3'>{`${labels.connect_with}:`}</Typography>

        {peopleYouMayKnow.length >= 4 && (
          <Typography variant='body2' onClick={() => setLookMore(!lookMore)}>
            {lookMore ? labels.view_less : labels.view_more}
          </Typography>
        )}
      </Header>

      {!users.length ? (
        <Typography variant='body1' px={1}>
          {labels.datatable_empty}
        </Typography>
      ) : (
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
          {users.map(
            ({ id, image, link_cancel, link_request, name, profile }) => (
              <ListItem key={id} disablePadding disableRipple>
                <ListItemButton disableRipple>
                  <ListItemAvatar>
                    <Avatar alt={`${name} image`} src={image} />
                  </ListItemAvatar>

                  <ListItemText primary={name} />

                  {link_request && (
                    <Button
                      variant='primary'
                      onClick={() => handleConnect(link_request)}
                    >
                      {labels.connect}
                    </Button>
                  )}
                  {link_cancel && (
                    <Button
                      variant='secondary'
                      onClick={() => handleConnect(link_cancel)}
                    >
                      {labels.cancel}
                    </Button>
                  )}
                </ListItemButton>
              </ListItem>
            )
          )}
        </List>
      )}
    </WidgetWrapper>
  )
}

export default PeopleYouMayKnow