Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

const Notifications = ({ addNotification }) => {

  const { register, handleSubmit, setValue } = useForm();
  const [loading, setLoading] = useState(false);

  const handleOnSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (value) formData.append(key, value === 'y' ? value : 'n');
    });
    await axios
      .post("/account-settings/notification", formData)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          addNotification({
            style: "success",
            msg: resData.data,
          });
        } else {
          const errorMessage =
            typeof resData.data === "string"
              ? resData.data
              : "Ha ocurrido un error, Por favor intente mas tarde";
          addNotification({
            style: "danger",
            msg: errorMessage,
          });
        }
      });
    setLoading(false);
  };

  useEffect(async () => {
    setLoading(true);
    await axios.get("/account-settings/notification").then((response) => {
      const resData = response.data;
      if (resData.success) {
        Object.entries(resData.data).map(([key, value]) => {
          setValue(key, value);
        });
      }
    });
    setLoading(false);
  }, []);

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

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

  return (
    <div className="acc-setting">
      <h3>Notificaciones</h3>
      {loading
        ? <Spinner />
        :
        <form onSubmit={handleSubmit(handleOnSubmit)}>
          {NOTIFICATION_OPTIONS.map((option , index) => {
            return (
              <div className="notbat" key={index}>
                <span>
                  {option.label}
                </span>
                <SwitchInput register={register} name={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);