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;