Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4369 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4359 stevensc 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from "react";
2716 stevensc 3 
import { axios } from "../../../utils";
1 www 4 
import { connect } from "react-redux";
5 
import { addNotification } from "../../../redux/notification/notification.actions";
4359 stevensc 6 
 
7 
// Components
1 www 8 
import Spinner from "../../../shared/loading-spinner/Spinner";
4379 stevensc 9 
import SwitchInput from "../shared/switch-input/SwitchInput";
1 www 10 
 
4368 stevensc 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 
 
4359 stevensc 60 
const Notifications = ({ addNotification }) => {
1 www 61 
 
4368 stevensc 62 
  const [notifications, setNotifications] = useState(NOTIFICATION_OPTIONS);
1 www 63 
  const [loading, setLoading] = useState(false);
64 
 
4368 stevensc 65 
  const handleOnSubmit = (e) => {
66 
    e.preventDefault()
1 www 67 
    setLoading(true);
68 
    const formData = new FormData();
4363 stevensc 69 
 
4368 stevensc 70 
    notifications
71 
      .map(({ input_name, value }) => value && formData.append(input_name, value === 'y' ? value : 'n'))
4363 stevensc 72 
 
73 
    axios
1 www 74 
      .post("/account-settings/notification", formData)
4363 stevensc 75 
      .then(({ data: response }) => {
76 
        if (!response.success) {
77 
          const errorMessage = typeof response.data === "string" ? response.data : "Ha ocurrido un error, Por favor intente mas tarde"
78 
          return addNotification({ style: "danger", msg: errorMessage })
1 www 79 
        }
4363 stevensc 80 
 
81 
        return addNotification({ style: "success", msg: response.data })
82 
      })
83 
      .finally(() => setLoading(false))
1 www 84 
  };
85 
 
4368 stevensc 86 
  const handleChecked = (value, element) => {
87 
    setNotifications((prevNotifications) => prevNotifications
88 
      .map((notification) =>
89 
        notification.input_name === element
90 
          ? { ...notification, value: Boolean(value) }
91 
          : notification
92 
      ))
93 
  }
94 
 
4363 stevensc 95 
  useEffect(() => {
1 www 96 
    setLoading(true);
4363 stevensc 97 
    axios
98 
      .get("/account-settings/notification")
99 
      .then(({ data: response }) => {
100 
        if (response.success) {
101 
          Object
102 
            .entries(response.data)
4368 stevensc 103 
            .map(([key, value]) =>
104 
              setNotifications((prevNotifications) => prevNotifications
105 
                .map((notification) =>
106 
                  notification.input_name === key
107 
                    ? { ...notification, value: Boolean(value) }
108 
                    : notification
4379 stevensc 109 
                )))
4363 stevensc 110 
        }
111 
      })
112 
      .finally(() => setLoading(false))
1 www 113 
  }, []);
114 
 
115 
  return (
4359 stevensc 116 
    <div className="acc-setting">
4363 stevensc 117 
      <h3>Notificaciónes de Correo Electrónico</h3>
4359 stevensc 118 
      {loading
119 
        ? <Spinner />
120 
        :
4368 stevensc 121 
        <form onSubmit={handleOnSubmit}>
122 
          {notifications.map((option, index) => {
4359 stevensc 123 
            return (
124 
              <div className="notbat" key={index}>
125 
                <span>
4369 stevensc 126 
                  {option.label}
4359 stevensc 127 
                </span>
4365 stevensc 128 
                <SwitchInput
4368 stevensc 129 
                  isChecked={option.value}
130 
                  setValue={(value) => handleChecked(value, option.input_name)}
4365 stevensc 131 
                />
4359 stevensc 132 
              </div>
133 
            )
134 
          })}
135 
          <button type="submit" className="btn btn-primary">
136 
            Guardar
137 
          </button>
138 
        </form>
139 
      }
140 
    </div>
1 www 141 
  );
142 
};
143 
 
144 
const mapDispatchToProps = {
145 
  addNotification: (notification) => addNotification(notification),
146 
};
147 
 
148 
export default connect(null, mapDispatchToProps)(Notifications);