Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect, useCallback, memo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { Box, Button, Typography } from '@mui/material';

import { axios, parse } from '@utils';
import { addNotification } from '@store/notification/notification.actions';

import Row from '@components/common/Row';
import Cover from '@components/UI/cover/Cover';
import Widget from '@components/UI/Widget';
import Avatar from '@components/common/avatar';
import ProfileModal from './ProfileModal';
import ConfirmModal from '@components/modals/ConfirmModal';

const ProfileCard = ({
  cover,
  avatar,
  name,
  description,
  address,
  coverUrl,
  avatarUrl,
  coverSize,
  avatarSize,
  requestConnection,
  linkRequest,
  linkCancel,
  linkInmail,
  following,
  totalConnections,
  facebook,
  twitter,
  instagram
}) => {
  const [isConnecting, setIsConnecting] = useState(false);
  const [isAdded, setIsAdded] = useState(!requestConnection);
  const [connectionUrl, setConnectionUrl] = useState(linkRequest || linkCancel || '');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  const fetchConnectionUrls = useCallback(async () => {
    try {
      const response = await axios.get(pathname);
      const { link_request, link_cancel } = response.data;
      setConnectionUrl(link_request || link_cancel || '');
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
    }
  }, [pathname, dispatch]);

  useEffect(() => {
    if (!linkRequest && !linkCancel) {
      fetchConnectionUrls();
    }
  }, [fetchConnectionUrls, linkRequest, linkCancel]);

  const handleConnect = useCallback(async () => {
    setIsConnecting(true);
    try {
      const response = await axios.post(connectionUrl);
      const { data, success } = response.data;

      if (!success) {
        dispatch(addNotification({ style: 'danger', msg: data }));
      } else {
        dispatch(addNotification({ style: 'success', msg: data }));
        setIsAdded(!isAdded);
        if (isModalOpen) {
          setIsModalOpen(false);
        }
        fetchConnectionUrls();
      }
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
    } finally {
      setIsConnecting(false);
    }
  }, [connectionUrl, isAdded, dispatch, isModalOpen, fetchConnectionUrls]);

  return (
    <Widget>
      <Cover cover={cover} size={coverSize} url={coverUrl} />

      <Box sx={{ alignItems: 'center', mt: '-40px' }}>
        <Avatar src={avatar} size={avatarSize} url={avatarUrl} />
      </Box>

      <Widget.Body>
        <Typography variant='h2'>{name}</Typography>
        <Typography>{parse(description)}</Typography>
        <Typography>{address}</Typography>
        <Typography variant='overline'> - </Typography>
        <Typography variant='overline'>{labels.personal_info}</Typography>
        <Row>
          {totalConnections && (
            <Link to='/connection/my-connections'>
              <Typography variant='overline'>{`${totalConnections} conexiones`}</Typography>
            </Link>
          )}
          {following && (
            <Link onClick={(e) => e.preventDefault()}>
              <Typography variant='overline'>{`${following} siguiendo`}</Typography>
            </Link>
          )}
        </Row>
        <Row>
          {connectionUrl && isAdded && (
            <Button color='primary' onClick={() => setIsModalOpen(true)} disabled={isConnecting}>
              {labels.cancel}
            </Button>
          )}
          {connectionUrl && !isAdded && (
            <Button color='primary' onClick={handleConnect} disabled={isConnecting}>
              {labels.connect}
            </Button>
          )}
          {linkInmail && (
            <Button to={linkInmail} LinkComponent={Link} color='secondary'>
              {labels.message}
            </Button>
          )}
        </Row>
      </Widget.Body>

      <ProfileModal
        closeModal={() => setIsModalOpen(false)}
        fullName={name}
        facebook={facebook}
        twitter={twitter}
        instagram={instagram}
        following={following}
        formatted_address={address}
        overview={description}
        total_connections={totalConnections}
      />
      <ConfirmModal
        show={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onAccept={handleConnect}
        isLoading={isConnecting}
      />
    </Widget>
  );
};

export default memo(ProfileCard, (prevProps, nextProps) => {
  return (
    prevProps.cover === nextProps.cover &&
    prevProps.avatar === nextProps.avatar &&
    prevProps.name === nextProps.name &&
    prevProps.description === nextProps.description &&
    prevProps.address === nextProps.address &&
    prevProps.coverUrl === nextProps.coverUrl &&
    prevProps.avatarUrl === nextProps.avatarUrl &&
    prevProps.coverSize === nextProps.coverSize &&
    prevProps.avatarSize === nextProps.avatarSize &&
    prevProps.requestConnection === nextProps.requestConnection &&
    prevProps.linkRequest === nextProps.linkRequest &&
    prevProps.linkCancel === nextProps.linkCancel &&
    prevProps.linkInmail === nextProps.linkInmail &&
    prevProps.following === nextProps.following &&
    prevProps.totalConnections === nextProps.totalConnections &&
    prevProps.facebook === nextProps.facebook &&
    prevProps.twitter === nextProps.twitter &&
    prevProps.instagram === nextProps.instagram
  );
});