Proyectos de Subversion LeadersLinked - Antes de SPA

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

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 Privacy = (props) => {
  // redux destructuring
  const { addNotification } = props;

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

  // states
  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);
    });
    await axios.post("/account-settings/privacy", formData).then((response) => {
      const resData = response.data;
      if (resData.success) {
        addNotification({
          style: "success",
          msg: resData.data,
        });
      } else {
        if (typeof resData.data === "object") {
          resData.data;
          Object.entries(resData.data).map(([key, value]) => {
            setError(key, { type: "manual", message: value[0] });
          });
        } 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/privacy").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">
          Mostrar en la búsqueda
          <SwitchInput register={register} name="show_in_search" />
        </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)(Privacy);