Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect, useCallback } 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,
  edit
}) => {
  const [isConnecting, setIsConnecting] = useState(false);
  const [isAdded, setIsAdded] = useState(!requestConnection);
  const [connectionUrl, setConnectionUrl] = useState(linkRequest || linkCancel || '');
  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  const toggleConfirmationModal = () => setShowConfirmationModal(!showConfirmationModal);

  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 (showConfirmationModal) {
          toggleConfirmationModal();
        }
        fetchConnectionUrls();
      }
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: `Error: ${error.message}` }));
    } finally {
      setIsConnecting(false);
    }
  }, [connectionUrl, isAdded, dispatch, showConfirmationModal, fetchConnectionUrls]);

  return (
    <Widget>
      <Cover cover={cover} sizes={coverSize} uploadUrl={coverUrl} edit={edit} />

      <Widget.Body>
        <Box sx={{ alignItems: 'center', mt: '-40px' }}>
          <Avatar
            src={avatar}
            alt={name}
            size={avatarSize}
            uploadUrl={avatarUrl}
            badgeStyles={{ mt: '-75px' }}
            styles={{ width: 150, height: 150 }}
            edit={edit}
          />
        </Box>
        <Typography variant='h2'>{name}</Typography>
        <Typography>{parse(description)}</Typography>
        <Typography>{address}</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={toggleConfirmationModal} 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
        show={false}
        fullName={name}
        facebook={facebook}
        twitter={twitter}
        instagram={instagram}
        following={following}
        formatted_address={address}
        overview={description}
        total_connections={totalConnections}
      />
      <ConfirmModal
        show={showConfirmationModal}
        onClose={toggleConfirmationModal}
        onAccept={handleConnect}
        isLoading={isConnecting}
      />
    </Widget>
  );
};

export default ProfileCard;