Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4367 Rev 4368
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useState } from "react";
 2 
import React, { useEffect, useState } from "react";
3 
import { axios } from "../../../utils";
 3 
import { axios } from "../../../utils";
4 
import { useForm } from "react-hook-form";
 - 
 
5 
import { connect } from "react-redux";
 4 
import { connect } from "react-redux";
6 
import { addNotification } from "../../../redux/notification/notification.actions";
 5 
import { addNotification } from "../../../redux/notification/notification.actions";
Línea 7... Línea 6...
7 
 
 6 
 
8 
// Components
 7 
// Components
9 
import Spinner from "../../../shared/loading-spinner/Spinner";
 8 
import Spinner from "../../../shared/loading-spinner/Spinner";
Línea -... Línea 9...
- 
 
 9 
import SwitchInput from "./switch-input/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 
  }
10 
import SwitchInput from "./switch-input/SwitchInput";
 58 
]
Línea 11... Línea 59...
11 
 
 59 
 
12 
const Notifications = ({ addNotification }) => {
 60 
const Notifications = ({ addNotification }) => {
Línea 13... Línea 61...
13 
 
 61 
 
- 
 
 62 
  const [notifications, setNotifications] = useState(NOTIFICATION_OPTIONS);
14 
  const { register, handleSubmit, setValue, getValues } = useForm();
 63 
  const [loading, setLoading] = useState(false);
15 
  const [loading, setLoading] = useState(false);
 64 
 
Línea 16... Línea -...
16 
 
 - 
 
17 
  const handleOnSubmit = (data) => {
 65 
  const handleOnSubmit = (e) => {
18 
    setLoading(true);
 66 
    e.preventDefault()
Línea 19... Línea 67...
19 
    const formData = new FormData();
 67 
    setLoading(true);
20 
 
 68 
    const formData = new FormData();
21 
    Object.
 69 
 
22 
      entries(data)
 70 
    notifications
Línea 33... Línea 81...
33 
        return addNotification({ style: "success", msg: response.data })
 81 
        return addNotification({ style: "success", msg: response.data })
34 
      })
 82 
      })
35 
      .finally(() => setLoading(false))
 83 
      .finally(() => setLoading(false))
36 
  };
 84 
  };
Línea -... Línea 85...
- 
 
 85 
 
- 
 
 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 
  }
37 
 
 94 
 
38 
  useEffect(() => {
 95 
  useEffect(() => {
39 
    setLoading(true);
 96 
    setLoading(true);
40 
    axios
 97 
    axios
41 
      .get("/account-settings/notification")
 98 
      .get("/account-settings/notification")
42 
      .then(({ data: response }) => {
 99 
      .then(({ data: response }) => {
43 
        if (response.success) {
 100 
        if (response.success) {
44 
          Object
 101 
          Object
45 
            .entries(response.data)
 102 
            .entries(response.data)
- 
 
 103 
            .map(([key, value]) =>
- 
 
 104 
              setNotifications((prevNotifications) => prevNotifications
- 
 
 105 
                .map((notification) =>
- 
 
 106 
                  notification.input_name === key
- 
 
 107 
                    ? { ...notification, value: Boolean(value) }
- 
 
 108 
                    : notification
- 
 
 109 
                ))
46 
            .map(([key, value]) => setValue(key, value))
 110 
            )
47 
        }
 111 
        }
48 
      })
 112 
      })
49 
      .finally(() => setLoading(false))
 113 
      .finally(() => setLoading(false))
Línea 50... Línea -...
50 
  }, []);
 - 
 
51 
 
 - 
 
52 
  const NOTIFICATION_OPTIONS = [
 - 
 
53 
    {
 - 
 
54 
      label: 'Cuando recibo una solicitud de conexión',
 - 
 
55 
      input_name: 'receive_connection_request'
 - 
 
56 
    },
 - 
 
57 
    {
 - 
 
58 
      label: 'Cuando recibo una solicitud para unirme a un grupo',
 - 
 
59 
      input_name: "receive_invitation_group"
 - 
 
60 
    },
 - 
 
61 
 
 - 
 
62 
    {
 - 
 
63 
      label: 'Cuando aceptan mi solicitud para unirme a un grupo',
 - 
 
64 
      input_name: "accept_my_request_join_group"
 - 
 
65 
    },
 - 
 
66 
    {
 - 
 
67 
      label: 'Cuando recibo una solicitud para unirme a una empresa',
 - 
 
68 
      input_name: "receive_invitation_company"
 - 
 
69 
    },
 - 
 
70 
    {
 - 
 
71 
      label: 'Cuando le dan me gusta a una de mis publicaciones',
 - 
 
72 
      input_name: "like_my_feed"
 - 
 
73 
    },
 - 
 
74 
    {
 - 
 
75 
      label: 'Cuando comentan una de mis publicaciones',
 - 
 
76 
      input_name: "comment_my_feed"
 - 
 
77 
    },
 - 
 
78 
    {
 - 
 
79 
      label: 'Cuando comparten una de mis publicaciones',
 - 
 
80 
      input_name: "share_my_feed"
 - 
 
81 
    },
 - 
 
82 
    {
 - 
 
83 
      label: 'Cuando recibo un mensaje',
 - 
 
84 
      input_name: "receive_inmail"
 - 
 
85 
    },
 - 
 
86 
    {
 - 
 
87 
      label: 'Cuando recibo una solicitud para unirse a mi grupo',
 - 
 
88 
      name: "receive_request_join_my_group"
 - 
 
89 
    }
 - 
 
90 
  ]
 114 
  }, []);
91 
 
 115 
 
92 
  return (
 116 
  return (
93 
    <div className="acc-setting">
 117 
    <div className="acc-setting">
94 
      <h3>Notificaciónes de Correo Electrónico</h3>
 118 
      <h3>Notificaciónes de Correo Electrónico</h3>
95 
      {loading
 119 
      {loading
96 
        ? <Spinner />
 120 
        ? <Spinner />
97 
        :
 121 
        :
98 
        <form onSubmit={handleSubmit(handleOnSubmit)}>
 122 
        <form onSubmit={handleOnSubmit}>
99 
          {NOTIFICATION_OPTIONS.map((option, index) => {
 123 
          {notifications.map((option, index) => {
100 
            return (
 124 
            return (
101 
              <div className="notbat" key={index}>
 125 
              <div className="notbat" key={index}>
102 
                <span>
 126 
                <span>
103 
                  {option.label}
 127 
                  {option.input_name}
104 
                </span>
 128 
                </span>
105 
                <SwitchInput
 129 
                <SwitchInput
106 
                  name={option.input_name}
 130 
                  isChecked={option.value}
107 
                  register={register}
 131 
                  setValue={(value) => handleChecked(value, option.input_name)}
108 
                />
 132 
                />
109 
              </div>
 133 
              </div>
110 
            )
 134 
            )