Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2781 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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