Proyectos de Subversion LeadersLinked - SPA

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

import { axios } from '@utils';
import { useFetch } from '@hooks';
import { addNotification } from '@store/notification/notification.actions';

import Widget from '@components/UI/Widget';
import Button from '@components/UI/buttons/Buttons';

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();
    });
  };

  if (!users.length) {
    return null;
  }

  return (
    <Widget>
      <Widget.Header
        title={labels.connect_with + ':'}
        renderAction={() =>
          peopleYouMayKnow.length > 4 && (
            <Button onClick={() => setLookMore(!lookMore)}>
              {lookMore ? labels.view_less : labels.view_more}
            </Button>
          )
        }
      />

      <Widget.Body>
        <List sx={{ width: '100%', maxHeight: 200, overflow: 'auto' }}>
          {users.map(({ id, image, link_cancel, link_request, name }) => (
            <ListItemButton key={id}>
              <ListItemAvatar>
                <Avatar alt={`${name} image`} src={image} />
              </ListItemAvatar>

              <ListItemText primary={name} />

              {link_request && (
                <Button color='primary' onClick={() => handleConnect(link_request)}>
                  {labels.connect}
                </Button>
              )}
              {link_cancel && (
                <Button color='secondary' onClick={() => handleConnect(link_cancel)}>
                  {labels.cancel}
                </Button>
              )}
            </ListItemButton>
          ))}
        </List>
      </Widget.Body>
    </Widget>
  );
};

export default PeopleYouMayKnow;