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