Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";

import { axios } from "utils/index";
import { addNotification } from "@app/redux/notification/notification.actions";

import Widget from "@components/UI/Widget";
import Spinner from "@components/UI/Spinner";
import SwitchInput from "@components/UI/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((response) => {
        const { success, data } = response.data;
        if (!success) {
          const errorMessage =
            typeof data === "string"
              ? data
              : "Ha ocurrido un error, Por favor intente mas tarde";
          return addNotification({ style: "danger", msg: errorMessage });
        }

        return addNotification({ style: "success", msg: 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((response) => {
        const { success, data } = response.data;
        if (success) {
          Object.entries(data).map(([key, value]) =>
            setNotifications((prevNotifications) =>
              prevNotifications.map((notification) =>
                notification.input_name === key
                  ? { ...notification, value: Boolean(value) }
                  : notification
              )
            )
          );
        }
      })
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <Spinner />;
  }

  return (
    <Widget>
      <Widget.Header title="Notificaciónes de Correo Electrónico" />

      <Widget.Body>
        <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 mt-3">
            Guardar
          </button>
        </form>
      </Widget.Body>
    </Widget>
  );
};

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

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