Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { axios } from "../../../../../utils";
import Spinner from "../../../../loading-spinner/Spinner";
import { profileTypes } from "../../../Profile.types";
import { Button, Modal } from "react-bootstrap";
import styled from "styled-components";
import { addNotification } from "../../../../../redux/notification/notification.actions";

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const SocialNetworks = ({
  facebook = '',
  twitter = '',
  instagram = '',
  profileId = '',
  profileType = ''
}) => {

  const { register, handleSubmit, setValue, getValues, setError } = useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);
  const [settedFacebook, setSettedtedFacebook] = useState(facebook);
  const [settedTwitter, setSettedTwitter] = useState(twitter);
  const [settedInstagram, setSettedInstagram] = useState(instagram);

  const handleModalOpen = (event) => {
    event && event.preventDefault();
    setIsModalOpen(!isModalOpen);
  };

  const handleEdit = (event) => {
    event.preventDefault();
    handleModalOpen();
    setValue("facebook", settedFacebook);
    setValue("twitter", settedTwitter);
    setValue("instagram", settedInstagram);
  };

  const onSubmitHandler = async (data) => {
    setModalLoading(true);
    let postPath = "";
    switch (profileType) {
      case profileTypes.USER:
        postPath = `/profile/my-profiles/social-network/${profileId}`;
        break;
      case profileTypes.COMPANY:
        postPath = `/my-company/${profileId}/profile/social-network`;
        break;
      default:
        break;
    }
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    await axios.post(postPath, formData).then((response) => {
      const resData = response.data;
      (resData);
      if (resData.success) {
        setSettedtedFacebook(resData.data.facebook);
        setSettedTwitter(resData.data.twitter);
        setSettedInstagram(resData.data.instagram);
        setIsModalOpen();
      } else {
        const resError = resData.data;
        if (resError.constructor.name === "Object") {
          Object.entries(resError).map(([key, value]) => {
            if (key in getValues()) {
              setError(key, {
                type: "manual",
                message: Array.isArray(value) ? value[0] : value,
              });
            }
          });
        } else {
          addNotification({
            style: "danger",
            msg: resError,
          });
        }
      }
    });
    setModalLoading(false);
  };

  return (
    <React.Fragment>
      <div className="user-social-network-ov">
        <h3>
          Redes Sociales
          <a
            href="#"
            title=""
            className="btn-social-network-edit"
            onClick={handleEdit}
          >
            <i className="fa fa-pencil"></i>
          </a>
        </h3>
      </div>

      <ul id="social-networks" className="social_links">
        {settedFacebook && (
          <li>
            <a href={settedFacebook} target="_blank" title="" rel="noreferrer">
              <i className="fa fa-facebook-square"></i>{" "}
              {settedFacebook.length > 32
                ? `${settedFacebook.substr(0, 32)}...`
                : settedFacebook}
            </a>
          </li>
        )}
        {settedTwitter && (
          <li>
            <a href={settedTwitter} title="" target="_blank" rel="noreferrer">
              <i className="fa fa-twitter"></i>
              {settedTwitter.length > 32
                ? `${settedTwitter.substr(0, 32)}...`
                : settedTwitter}
            </a>
          </li>
        )}
        {settedInstagram && (
          <li>
            <a href={settedInstagram} target="_blank" title="" rel="noreferrer">
              <i className="fa fa-instagram"></i>{" "}
              {settedInstagram.length > 32
                ? `${settedInstagram.substr(0, 32)}...`
                : settedInstagram}
            </a>
          </li>
        )}
      </ul>

      {/* modal */}
      <Modal
        show={isModalOpen}
        onHide={handleModalOpen}
        style={{ overflowY: "scroll" }}
      >
        <Modal.Header closeButton>
          <Modal.Title>Redes Sociales</Modal.Title>
        </Modal.Header>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <Modal.Body>
            <div className="form-group">
              <input
                type="text"
                name="facebook"
                placeholder="Perfil de Facebook"
                ref={register}
                defaultValue={settedFacebook}
              />
            </div>
            <div className="form-group">
              <input
                type="text"
                name="twitter"
                placeholder="Perfil de Twitter"
                ref={register}
                defaultValue={settedTwitter}
              />
            </div>
            <div className="form-group">
              <input
                type="text"
                name="instagram"
                placeholder="Perfil de Instagram"
                ref={register}
                defaultValue={settedInstagram}
              />
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button type="submit">Enviar</Button>
            <Button variant="danger" onClick={handleModalOpen}>
              Cancelar
            </Button>
          </Modal.Footer>
        </form>
        {modalLoading && (
          <StyledSpinnerContainer>
            <Spinner />
          </StyledSpinnerContainer>
        )}
      </Modal>
    </React.Fragment>
  );
};

export default SocialNetworks;