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 === '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);

  }, []);

  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 btn-primary">

                Guardar

              </button>

            </li>

          </ul>

        </div>

      </form>

      {loading && (

        <StyledSpinnerContainer>

          <Spinner />

        </StyledSpinnerContainer>

      )}

    </StyledSettings>

  );

};

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

// })

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification),

};

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