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

}) => {

  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} />

      <Widget.Body>

        <Box sx={{ alignItems: 'center', mt: -40 }}>

          <Avatar

            src={avatar}

            alt={name}

            size={avatarSize}

            uploadUrl={avatarUrl}

            badgeStyles={{ mt: -75 }}

            styles={{ width: 150, height: 150 }}

          />

        </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={() => 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 ProfileCard;