Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2781 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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