Proyectos de Subversion LeadersLinked - Antes de SPA

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

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

const PRIVACY_OPTIONS = [
  {
    label: '',
    input_name: '',
    value: false
  }
]

const Privacy = ({ addNotification }) => {

  const [loading, setLoading] = useState(false);
  const [options, setOptions] = useState(PRIVACY_OPTIONS);
  const { handleSubmit } = useForm();

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

    options.map(({ input_name, value }) => {
      if (value) return formData.append(input_name, value)
    });

    axios
      .post("/account-settings/privacy", formData)
      .then(({ data: response }) => {
        if (!response.success) {
          typeof response.data === "string"
            ? addNotification({ style: "danger", msg: response.data })
            : Object
              .entries(response.data)
              .map(([key, value]) => addNotification({ style: "success", msg: `${key} error: ${value} ` }))

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

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

  }, []);

  return (
    <div className="acc-setting">
      <h3>Notificaciones</h3>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <div className="notbat">
          Mostrar en la búsqueda
          <SwitchInput />
        </div>
        <button type="submit" className="btn btn-primary">
          Guardar
        </button>
      </form>
      {loading && <Spinner />}
    </div>
  );
};

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

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