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;