Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from "react";
import { connect } from "react-redux";

import { axios } from "utils";
import { addNotification } from "@app/redux/notification/notification.actions";

import Widget from "@components/UI/Widget";
import Spinner from "@components/UI/Spinner";
import SwitchInput from "@components/UI/SwitchInput";

const SocialNetworks = ({
  facebook,
  google,
  twitter,
  addNotification, // Redux action
}) => {
  const [loading, setLoading] = useState(false);

  const addSocialNetwork = (network) => {
    setLoading(true);

    axios
      .get(`/account-settings/add-${network.toLowerCase()}`)
      .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 removeSocialNetwork = (network) => {
    setLoading(true);

    axios
      .post(`/account-settings/add-${network.toLowerCase()}`)
      .then((response) => {
        const { success, data } = response.data;

        if (!success) {
          throw new Error(data);
        }

        addNotification({ style: "success", msg: data });
      })
      .catch((err) => addNotification({ style: "danger", msg: err.message }))
      .finally(() => setLoading(false));
  };

  const socialNetworks = [
    {
      name: "Facebook",
      status: facebook,
    },
    {
      name: "Google",
      status: google,
    },
    {
      name: "Twitter",
      status: twitter,
    },
  ];

  return (
    <Widget>
      <Widget.Header title="Cambiar Configuración de las redes sociales" />

      <Widget.Body>
        {loading && <Spinner />}
        {!!socialNetworks.length &&
          socialNetworks.map(({ name, status }) => (
            <div
              key={name}
              className="d-flex align-items-center justify-content-between"
            >
              <span>{name}</span>

              <div className="d-flex align-items-center">
                <label htmlFor="is_current">
                  {status ? "Desconectar" : "Conectar"}
                </label>
                <div className="form-group">
                  <SwitchInput
                    isChecked={status}
                    setValue={(connect) =>
                      connect
                        ? removeSocialNetwork(name)
                        : addSocialNetwork(name)
                    }
                  />
                </div>
              </div>
            </div>
          ))}
      </Widget.Body>
    </Widget>
  );
};

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

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