Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useEffect, useState } from "react";
import { axios } from "../../../utils";
import { connect } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";

// Components
import Spinner from "../../../shared/loading-spinner/Spinner";
import SwitchInput from "../shared/switch-input/SwitchInput";

const NOTIFICATION_OPTIONS = [
  {
    value: false,
    label: 'Cuando recibo una solicitud de conexión',
    input_name: 'receive_connection_request'
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirme a un grupo',
    input_name: "receive_invitation_group"
  },

  {
    value: false,
    label: 'Cuando aceptan mi solicitud para unirme a un grupo',
    input_name: "accept_my_request_join_group"
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirme a una empresa',
    input_name: "receive_invitation_company"
  },
  {
    value: false,
    label: 'Cuando le dan me gusta a una de mis publicaciones',
    input_name: "like_my_feed"
  },
  {
    value: false,
    label: 'Cuando comentan una de mis publicaciones',
    input_name: "comment_my_feed"
  },
  {
    value: false,
    label: 'Cuando comparten una de mis publicaciones',
    input_name: "share_my_feed"
  },
  {
    value: false,
    label: 'Cuando recibo un mensaje',
    input_name: "receive_inmail"
  },
  {
    value: false,
    label: 'Cuando recibo una solicitud para unirse a mi grupo',
    input_name: "receive_request_join_my_group"
  }
]

const Notifications = ({ addNotification }) => {

  const [notifications, setNotifications] = useState(NOTIFICATION_OPTIONS);
  const [loading, setLoading] = useState(false);

  const handleOnSubmit = (e) => {
    e.preventDefault()
    setLoading(true);
    const formData = new FormData();

    notifications
      .map(({ input_name, value }) => value && formData.append(input_name, value === 'y' ? value : 'n'))

    axios
      .post("/account-settings/notification", formData)
      .then(({ data: response }) => {
        if (!response.success) {
          const errorMessage = typeof response.data === "string" ? response.data : "Ha ocurrido un error, Por favor intente mas tarde"
          return addNotification({ style: "danger", msg: errorMessage })
        }

        return addNotification({ style: "success", msg: response.data })
      })
      .finally(() => setLoading(false))
  };

  const handleChecked = (value, element) => {
    setNotifications((prevNotifications) => prevNotifications
      .map((notification) =>
        notification.input_name === element
          ? { ...notification, value: Boolean(value) }
          : notification
      ))
  }

  useEffect(() => {
    setLoading(true);
    axios
      .get("/account-settings/notification")
      .then(({ data: response }) => {
        if (response.success) {
          Object
            .entries(response.data)
            .map(([key, value]) =>
              setNotifications((prevNotifications) => prevNotifications
                .map((notification) =>
                  notification.input_name === key
                    ? { ...notification, value: Boolean(value) }
                    : notification
                )))
        }
      })
      .finally(() => setLoading(false))
  }, []);

  return (
    <div className="acc-setting">
      <h3>Notificaciónes de Correo Electrónico</h3>
      {loading
        ? <Spinner />
        :
        <form onSubmit={handleOnSubmit}>
          {notifications.map((option, index) => {
            return (
              <div className="notbat" key={index}>
                <span>
                  {option.label}
                </span>
                <SwitchInput
                  isChecked={option.value}
                  setValue={(value) => handleChecked(value, option.input_name)}
                />
              </div>
            )
          })}
          <button type="submit" className="btn btn-primary">
            Guardar
          </button>
        </form>
      }
    </div>
  );
};

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification),
};

export default connect(null, mapDispatchToProps)(Notifications);