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(({ data: responseData }) => {
        const { success, data } = responseData

        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)