Proyectos de Subversion LeadersLinked - Antes de SPA

import { axios } from "../../../utils";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";
import styled from "styled-components";
import { addNotification } from "../../../redux/notification/notification.actions";
import Spinner from "../../../shared/loading-spinner/Spinner";
import SwitchInput from "./switch-input/SwitchInput";

const StyledSettings = styled.div`
  .notbat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
  }
`;

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const Notifications = (props) => {
  // redux destructuring
  const { addNotification } = props;
  // states
  const [loading, setLoading] = useState(false);

  const { register, handleSubmit, setValue } = useForm();

  const handleOnSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (value) formData.append(key, value);
    });
    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);
  }, []);

  return (
    <StyledSettings className="acc-setting">
      <h3>Notificaciones</h3>
      <form onSubmit={handleSubmit(handleOnSubmit)}>
        <div className="notbat">
          <div className="col-9">
            Cuando recibo una solicitud de conexión
          </div>
          <SwitchInput register={register} name="receive_connection_request" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando aceptan mi solicitud de conexión
          </div>
          <SwitchInput
            register={register}
            name="accept_my_request_connection"
          />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando recibo una solicitud para unirme a un grupo
          </div>
          <SwitchInput register={register} name="receive_invitation_group" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando aceptan mi solicitud para unirme a un grupo
          </div>
          <SwitchInput
            register={register}
            name="accept_my_request_join_group"
          />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando recibo una solicitud para unirme a una empresa
          </div>
          <SwitchInput register={register} name="receive_invitation_company" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando le dan me gusta a una de mis publicaciones
          </div>
          <SwitchInput register={register} name="like_my_feed" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando comentan una de mis publicaciones
          </div>
          <SwitchInput register={register} name="comment_my_feed" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando comparten una de mis publicaciones
          </div>
          <SwitchInput register={register} name="share_my_feed" />
        </div>
        <div className="notbat">
          <div className="col-9">
            Cuando recibo un mensaje
          </div>
          <SwitchInput register={register} name="receive_inmail" />
        </div>
        {/* <div className="notbat">
        <div className="col-9">
          Cuando recibo una invitación a una conferencia
          </div>
          <SwitchInput register={register} name="receive_invitation_meeting" />
        </div>
        <div className="notbat">
        <div className="col-9">
          Cuando esta próxima la conferencia
          </div>
          <SwitchInput register={register} name="receive_reminder_meeting" />
        </div>
        <div className="notbat">
        <div className="col-9">
          Cuando esten disponible los archivos de una conferencia
          </div>
          <SwitchInput
            register={register}
            name="receive_records_available_meeting"
          />
        </div> */}
        <div className="notbat">
          <div className="col-9">
            Cuando recibo una solicitud para unirse a mi grupo
          </div>
          <SwitchInput
            register={register}
            name="receive_request_join_my_group"
          />
        </div>
        <div className="save-stngs pd2">
          <ul>
            <li>
              <button type="submit" className="btn-save-basic">
                Guardar
              </button>
            </li>
          </ul>
        </div>
        {/* <!--save-stngs end--> */}
        {/* <?php echo $this->form()->closeTag($form); ?>        */}
      </form>
      {loading && (
        <StyledSpinnerContainer>
          <Spinner />
        </StyledSpinnerContainer>
      )}
    </StyledSettings>
  );
};

// const mapStateToProps = (state) => ({

// })

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

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