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);