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";
import styled from "styled-components";

const StyledSwitch = styled.label`
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  input:checked + .slider {
    background-color: #2196f3;
  }
  input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
`;

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="settings-container">
      <h2>Cambiar Configuración de las redes sociales</h2>
      <div className="acc-setting_content">
        <div className="d-flex align-items-center justify-content-between">
          <span>
            Facebook
          </span>
          <div className="input-c p-0 d-flex align-items-center" style={{ gap: '1rem' }}>
            <label htmlFor="is_current">{facebookConnected ? 'Desconectar' : 'Conectar'}</label>
            <div className="form-group">
              <StyledSwitch className="switch">
                <input
                  type="checkbox"
                  name="is_current"
                  data-network="facebook"
                  onClick={(e) =>
                    facebookConnected
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.facebook.remove)
                      : handleAddSocialNetwork(e, socialNetworkRoutes.facebook.add)
                  }
                />
                <span className="slider round"></span>
              </StyledSwitch>
            </div>
          </div>
        </div>
        <div className="d-flex align-items-center justify-content-between">
          <span>
            Twitter
          </span>
          <div className="input-c p-0 d-flex align-items-center" style={{ gap: '1rem' }}>
            <label htmlFor="is_current">{twitterConnected ? 'Desconectar' : 'Conectar'}</label>
            <div className="form-group">
              <StyledSwitch className="switch">
                <input
                  type="checkbox"
                  name="is_current"
                  data-network="twitter"
                  onClick={(e) =>
                    twitterConnected
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.twitter.remove)
                      : handleAddSocialNetwork(e, socialNetworkRoutes.twitter.add)
                  }
                />
                <span className="slider round"></span>
              </StyledSwitch>
            </div>
          </div>
        </div>
        <div className="d-flex align-items-center justify-content-between">
          <span>
            Google
          </span>
          <div className="input-c p-0 d-flex align-items-center" style={{ gap: '1rem' }}>
            <label htmlFor="is_current">{googleConnected ? 'Desconectar' : 'Conectar'}</label>
            <div className="form-group">
              <StyledSwitch className="switch">
                <input
                  type="checkbox"
                  name="is_current"
                  data-network="google"
                  onClick={(e) =>
                    googleConnected
                      ? handleRemoveSocialNetwork(e, socialNetworkRoutes.google.remove)
                      : handleAddSocialNetwork(e, socialNetworkRoutes.google.add)
                  }
                />
                <span className="slider round"></span>
              </StyledSwitch>
            </div>
          </div>
        </div>
      </div>
      {
        loading &&
        <div className="spinner-container">
          <Spinner />
        </div>
      }
    </div >
  );
};

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

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