Proyectos de Subversion LeadersLinked - Antes de SPA

import {axios} from "../../../utils";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";

const SocialNetworks = (props) => {
  // redux destructuring
  const { addNotification } = props;

  // props destructuring
  const { facebook, google, twitter, socialNetworkRoutes } = props;

  // states
  const [loading, setLoading] = useState(false);
  const [facebookConnected, setFacebookConnected] = useState(Boolean(facebook));
  const [twitterConnected, setTwitterConnected] = useState(Boolean(twitter));
  const [googleConnected, setGoogleConnected] = useState(Boolean(google));

  const handleAddSocialNetwork = (event, getOauthLink) => {
    event.preventDefault();
    setLoading(true);
    axios.get(getOauthLink).then((response) => {
      const resData = response.data;
      if (!resData.success) {
        return addNotification({
          style: "danger",
          msg: "Ha ocurrido un error, Por favor intente más tarde",
        });
      }
      const OauthLink = resData.data;
      window.location.replace(OauthLink);
    });
  };

  const handleRemoveSocialNetwork = (event, removeRoute) => {
    const network = event.currentTarget.dataset.network;
    event.preventDefault();
    setLoading(true);
    axios.post(removeRoute).then((response) => {
      const resData = response.data;
      if (!resData.success) {
        return addNotification({
          style: "danger",
          msg: resData.data,
        });
      }
      if (network === "facebook") setFacebookConnected(false);
      if (network === "twitter") setTwitterConnected(false);
      if (network === "google") setGoogleConnected(false);
      addNotification({
        style: "success",
        msg: resData.data,
      });
    });
    setLoading(false);
  };

  return (
    <div className="acc-setting">
      <h3>Redes Sociales</h3>
      <table className="table nowrap" cellSpacing="0" width="100%">
        <tbody>
          <tr>
            <td className="text-center">
              <i className="fa fa-facebook"></i> Facebook
            </td>
            <td className="text-center">
              <i className="fa fa-twitter"></i> Twitter
            </td>
            <td className="text-center">
              <i className="fa fa-google"></i> Google
            </td>
          </tr>
          <tr>
            <td className="text-center">
              {facebookConnected ? (
                <button
                  className="btn btn-delete"
                  id="btn-facebook"
                  data-action="disconnect"
                  data-network="facebook"
                  onClick={(e) =>
                    handleRemoveSocialNetwork(
                      e,
                      socialNetworkRoutes.facebook.remove
                    )
                  }
                >
                  Desconectar
                </button>
              ) : (
                <button
                  className="btn btn-edit"
                  id="btn-facebook"
                  data-action="connect"
                  data-network="facebook"
                  onClick={(e) =>
                    handleAddSocialNetwork(e, socialNetworkRoutes.facebook.add)
                  }
                >
                  Conectar
                </button>
              )}
            </td>
            <td className="text-center">
              {twitterConnected ? (
                <button
                  className="btn btn-delete"
                  id="btn-twitter"
                  data-action="disconnect"
                  data-network="twitter"
                  onClick={(e) =>
                    handleRemoveSocialNetwork(
                      e,
                      socialNetworkRoutes.twitter.remove
                    )
                  }
                >
                  Desconectar
                </button>
              ) : (
                <button
                  className="btn btn-edit"
                  id="btn-twitter"
                  data-action="connect"
                  data-network="twitter"
                  onClick={(e) =>
                    handleAddSocialNetwork(e, socialNetworkRoutes.twitter.add)
                  }
                >
                  Conectar
                </button>
              )}
            </td>
            <td className="text-center">
              {googleConnected ? (
                <button
                  className="btn btn-delete"
                  id="btn-google"
                  data-action="disconnect"
                  data-network="google"
                  onClick={(e) =>
                    handleRemoveSocialNetwork(
                      e,
                      socialNetworkRoutes.google.remove
                    )
                  }
                >
                  Desconectar
                </button>
              ) : (
                <button
                  className="btn btn-edit"
                  id="btn-google"
                  data-action="connect"
                  data-network="google"
                  onClick={(e) =>
                    handleAddSocialNetwork(e, socialNetworkRoutes.google.add)
                  }
                >
                  Conectar
                </button>
              )}
            </td>
          </tr>
        </tbody>
      </table>
      {loading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </div>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(SocialNetworks);