Proyectos de Subversion LeadersLinked - SPA

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

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

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

const ProfileCard = ({
  cover,
  facebook,
  following,
  formatted_address: formattedAddress,
  full_name: fullName,
  image,
  instagram,
  link_cancel: linkCancel,
  link_inmail: linkInmail,
  link_request: linkRequest,
  overview,
  request_connection: requestConnection,
  show_contact: showContact,
  sizes,
  total_connections: totalConnections,
  twitter,
  user_experiences: userExperiences = [],
  view_following: viewFollowing,
  view_total_connections: viewTotalConnections,
  edit,
}) => {
  const [isAdded, setIsAdded] = useState(false);
  const [connectionUrl, setConnectionUrl] = useState("");
  const [modalToShow, setModalToShow] = useState(null);
  const [settedOverview, setSettedOverview] = useState("");
  const [isModalShow, setIsModalShow] = useState(false);
  const labels = useSelector(({ intl }) => intl.labels);
  const { pathname } = useLocation();
  const dispatch = useDispatch();

  const displayModal = () => {
    setIsModalShow(!isModalShow);
  };

  const getProfileData = async () => {
    try {
      const response = await axios.get(pathname);
      const { link_request, link_cancel } = response.data;

      if (link_request) {
        setConnectionUrl(link_request);
        return;
      }

      setConnectionUrl(link_cancel);
    } catch (err) {
      dispatch(addNotification({ style: "danger", msg: err.message }));
    }
  };

  const connect = async () => {
    try {
      const response = await axios.post(connectionUrl);
      const { data, success } = response.data;

      if (!success) {
        return dispatch(addNotification({ style: "danger", msg: data }));
      }

      if (success && isModalShow) {
        displayModal();
      }

      await getProfileData();
      dispatch(addNotification({ style: "success", msg: data }));
      setIsAdded(!isAdded);
    } catch (error) {
      dispatch(addNotification({ style: "danger", msg: `Error: ${error}` }));
    }
  };

  const closeModal = () => {
    setModalToShow(null);
  };

  useEffect(() => {
    setIsAdded(!requestConnection);
    setSettedOverview(overview);
  }, [requestConnection, overview]);

  useEffect(() => {
    linkRequest ? setConnectionUrl(linkRequest) : setConnectionUrl(linkCancel);
  }, [linkRequest, linkCancel]);

  return (
    <Widget>
      <Cover cover={cover} edit={edit} />

      <Widget.Body>
        <Avatar
          src={image}
          alt={fullName}
          badgeStyles={{
            mt: { xs: "-50px", lg: "-75px" },
          }}
          styles={{
            width: { xs: "100px", lg: "150px" },
            height: { xs: "100px", lg: "150px" },
            border: `1px solid ${colors.border.primary}`,
          }}
          edit={edit}
        />

        <Typography variant="h2">{fullName}</Typography>
        <Typography>{parse(settedOverview)}</Typography>

        <Row>
          <Typography>{formattedAddress}</Typography>
          <Typography variant="overline"> - </Typography>
          <Typography variant="overline" onClick={() => setModalToShow("info")}>
            {labels.personal_info}
          </Typography>
        </Row>

        <Row>
          {viewTotalConnections ? (
            <Link to="/connection/my-connections">
              <Typography variant="overline">
                {`${totalConnections} conexiones`}
              </Typography>
            </Link>
          ) : null}
          {viewFollowing ? (
            <Link onClick={(e) => e.preventDefault()}>
              <Typography variant="overline">
                {`${following} siguiendo`}
              </Typography>
            </Link>
          ) : null}
        </Row>

        <Row>
          {connectionUrl && isAdded && (
            <Button color="primary" onClick={() => displayModal()}>
              {labels.cancel}
            </Button>
          )}
          {connectionUrl && !isAdded && (
            <Button color="primary" onClick={connect}>
              {labels.connect}
            </Button>
          )}
          {showContact && (
            <Button to={linkInmail} LinkComponent={Link} color="secondary">
              {labels.message}
            </Button>
          )}
        </Row>
      </Widget.Body>
      {/*  {isEdit && (
        <>
          <OverviewModal
            isOpen={modalToShow === 'overview'}
            overview={settedOverview}
            id={profileId}
            closeModal={() => closeModal()}
            onComplete={(newOverview) => setSettedOverview(newOverview)}
          />
        </>
      )} */}

      <ProfileModal
        show={modalToShow === "info"}
        closeModal={() => closeModal()}
        fullName={fullName}
        facebook={facebook}
        twitter={twitter}
        instagram={instagram}
        following={following}
        formatted_address={formattedAddress}
        overview={overview}
        total_connections={totalConnections}
        // follower={follower}
      />
      <ConfirmModal
        show={isModalShow}
        onClose={() => setIsModalShow(false)}
        onAccept={() => connect()}
      />
    </Widget>
  );
};

export default ProfileCard;