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