Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'

import { axios } from 'utils/index'
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 NOTIFICATION_OPTIONS = [
  {
    value: false,
    label: 'Cuando recibo una solicitud de conexión',
    input_name: 'receive_connection_request'
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirme a un grupo',
    input_name: 'receive_invitation_group'
  },

  {
    value: false,
    label: 'Cuando aceptan mi solicitud para unirme a un grupo',
    input_name: 'accept_my_request_join_group'
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirme a una empresa',
    input_name: 'receive_invitation_company'
  },
  {
    value: false,
    label: 'Cuando le dan me gusta a una de mis publicaciones',
    input_name: 'like_my_feed'
  },
  {
    value: false,
    label: 'Cuando comentan una de mis publicaciones',
    input_name: 'comment_my_feed'
  },
  {
    value: false,
    label: 'Cuando comparten una de mis publicaciones',
    input_name: 'share_my_feed'
  },
  {
    value: false,
    label: 'Cuando recibo un mensaje',
    input_name: 'receive_inmail'
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirse a mi grupo',
    input_name: 'receive_request_join_my_group'
  }
]

const Notifications = ({ addNotification }) => {
  const [notifications, setNotifications] = useState(NOTIFICATION_OPTIONS)
  const [loading, setLoading] = useState(false)

  const handleOnSubmit = (e) => {
    e.preventDefault()
    setLoading(true)
    const formData = new FormData()

    notifications.map(
      ({ input_name, value }) =>
        value && formData.append(input_name, value === 'y' ? value : 'n')
    )

    axios
      .post('/account-settings/notification', formData)
      .then(({ data: response }) => {
        if (!response.success) {
          const errorMessage =
            typeof response.data === 'string'
              ? response.data
              : 'Ha ocurrido un error, Por favor intente mas tarde'
          return addNotification({ style: 'danger', msg: errorMessage })
        }

        return addNotification({ style: 'success', msg: response.data })
      })
      .finally(() => setLoading(false))
  }

  const handleChecked = (value, element) => {
    setNotifications((prevNotifications) =>
      prevNotifications.map((notification) =>
        notification.input_name === element
          ? { ...notification, value: Boolean(value) }
          : notification
      )
    )
  }

  useEffect(() => {
    setLoading(true)
    axios
      .get('/account-settings/notification')
      .then(({ data: response }) => {
        if (response.success) {
          Object.entries(response.data).map(([key, value]) =>
            setNotifications((prevNotifications) =>
              prevNotifications.map((notification) =>
                notification.input_name === key
                  ? { ...notification, value: Boolean(value) }
                  : notification
              )
            )
          )
        }
      })
      .finally(() => setLoading(false))
  }, [])

  if (loading) {
    return <Spinner />
  }

  return (
    <Widget>
      <Widget.Header title='Notificaciónes de Correo Electrónico' />

      <Widget.Body>
        <form onSubmit={handleOnSubmit}>
          {notifications.map((option, index) => {
            return (
              <div className='notbat' key={index}>
                <span>{option.label}</span>
                <SwitchInput
                  isChecked={option.value}
                  setValue={(value) => handleChecked(value, option.input_name)}
                />
              </div>
            )
          })}

          <button type='submit' className='btn btn-primary mt-3'>
            Guardar
          </button>
        </form>
      </Widget.Body>
    </Widget>
  )
}

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

export default connect(null, mapDispatchToProps)(Notifications)