Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3432 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2781 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { connect } from 'react-redux'
3 
 
4 
import { axios } from 'utils/index'
5 
import { addNotification } from '@app/redux/notification/notification.actions'
6 
 
7 
import Widget from '@components/UI/Widget'
8 
import Spinner from '@components/UI/Spinner'
9 
import SwitchInput from '@components/UI/SwitchInput'
10 
 
11 
const NOTIFICATION_OPTIONS = [
12 
  {
13 
    value: false,
14 
    label: 'Cuando recibo una solicitud de conexión',
15 
    input_name: 'receive_connection_request'
16 
  },
17 
  {
18 
    value: false,
19 
    label: 'Cuando recibo una solicitud para unirme a un grupo',
20 
    input_name: 'receive_invitation_group'
21 
  },
22 
 
23 
  {
24 
    value: false,
25 
    label: 'Cuando aceptan mi solicitud para unirme a un grupo',
26 
    input_name: 'accept_my_request_join_group'
27 
  },
28 
  {
29 
    value: false,
30 
    label: 'Cuando recibo una solicitud para unirme a una empresa',
31 
    input_name: 'receive_invitation_company'
32 
  },
33 
  {
34 
    value: false,
35 
    label: 'Cuando le dan me gusta a una de mis publicaciones',
36 
    input_name: 'like_my_feed'
37 
  },
38 
  {
39 
    value: false,
40 
    label: 'Cuando comentan una de mis publicaciones',
41 
    input_name: 'comment_my_feed'
42 
  },
43 
  {
44 
    value: false,
45 
    label: 'Cuando comparten una de mis publicaciones',
46 
    input_name: 'share_my_feed'
47 
  },
48 
  {
49 
    value: false,
50 
    label: 'Cuando recibo un mensaje',
51 
    input_name: 'receive_inmail'
52 
  },
53 
  {
54 
    value: false,
55 
    label: 'Cuando recibo una solicitud para unirse a mi grupo',
56 
    input_name: 'receive_request_join_my_group'
57 
  }
58 
]
59 
 
60 
const Notifications = ({ addNotification }) => {
61 
  const [notifications, setNotifications] = useState(NOTIFICATION_OPTIONS)
62 
  const [loading, setLoading] = useState(false)
63 
 
64 
  const handleOnSubmit = (e) => {
65 
    e.preventDefault()
66 
    setLoading(true)
67 
    const formData = new FormData()
68 
 
69 
    notifications.map(
70 
      ({ input_name, value }) =>
71 
        value && formData.append(input_name, value === 'y' ? value : 'n')
72 
    )
73 
 
74 
    axios
75 
      .post('/account-settings/notification', formData)
76 
      .then(({ data: response }) => {
77 
        if (!response.success) {
78 
          const errorMessage =
79 
            typeof response.data === 'string'
80 
              ? response.data
81 
              : 'Ha ocurrido un error, Por favor intente mas tarde'
82 
          return addNotification({ style: 'danger', msg: errorMessage })
83 
        }
84 
 
85 
        return addNotification({ style: 'success', msg: response.data })
86 
      })
87 
      .finally(() => setLoading(false))
88 
  }
89 
 
90 
  const handleChecked = (value, element) => {
91 
    setNotifications((prevNotifications) =>
92 
      prevNotifications.map((notification) =>
93 
        notification.input_name === element
94 
          ? { ...notification, value: Boolean(value) }
95 
          : notification
96 
      )
97 
    )
98 
  }
99 
 
100 
  useEffect(() => {
101 
    setLoading(true)
102 
    axios
103 
      .get('/account-settings/notification')
104 
      .then(({ data: response }) => {
105 
        if (response.success) {
106 
          Object.entries(response.data).map(([key, value]) =>
107 
            setNotifications((prevNotifications) =>
108 
              prevNotifications.map((notification) =>
109 
                notification.input_name === key
110 
                  ? { ...notification, value: Boolean(value) }
111 
                  : notification
112 
              )
113 
            )
114 
          )
115 
        }
116 
      })
117 
      .finally(() => setLoading(false))
118 
  }, [])
119 
 
120 
  if (loading) {
121 
    return <Spinner />
122 
  }
123 
 
124 
  return (
125 
    <Widget>
126 
      <Widget.Header title='Notificaciónes de Correo Electrónico' />
127 
 
128 
      <Widget.Body>
129 
        <form onSubmit={handleOnSubmit}>
130 
          {notifications.map((option, index) => {
131 
            return (
132 
              <div className='notbat' key={index}>
133 
                <span>{option.label}</span>
134 
                <SwitchInput
135 
                  isChecked={option.value}
136 
                  setValue={(value) => handleChecked(value, option.input_name)}
137 
                />
138 
              </div>
139 
            )
140 
          })}
141 
 
142 
          <button type='submit' className='btn btn-primary mt-3'>
143 
            Guardar
144 
          </button>
145 
        </form>
146 
      </Widget.Body>
147 
    </Widget>
148 
  )
149 
}
150 
 
151 
const mapDispatchToProps = {
152 
  addNotification: (notification) => addNotification(notification)
153 
}
154 
 
155 
export default connect(null, mapDispatchToProps)(Notifications)