Proyectos de Subversion LeadersLinked - Antes de SPA

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

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 Settings = (props) => {
  // https://leaderslinked.com/my-company/NDg2MjM4MDQg/setting/premium
  // status_microlearning
  // status_self_evaluation
  // backendVars Destructuring
  const { companyId } = props.backendVars;

  // reduxDestructuring
  const { addNotification } = props;

  // React hook form
  const { register, errors, handleSubmit } = useForm();

  // states
  const [loading, setLoading] = useState(false);

  useEffect(async () => {
    setLoading(true);
    await axios
      .get(`/my-company/${companyId}/setting/premium`)
      .then((response) => {
        const resData = response.data;
         (resData);
      });
    setLoading(false);
  }, []);

  const handleOnSubmit = async (data) => {
    setLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      if (value) formData.append(key, value);
    });
    axios
      .post(`/my-company/${companyId}/setting/premium`, formData)
      .then((response) => {
        const resData = response.data;
        if (resData.success) {
          addNotification({
            style: "success",
            msg: resData.data,
          });
          window.location.replace(`/my-company/${companyId}`);
        } else {
          const resError = resData.data;
          if (resError.constructor.name === "Object") {
            Object.entries(resError).map(([key, value]) => {
              if (key in getValues()) {
                setError(key, {
                  type: "manual",
                  message: Array.isArray(value) ? value[0] : value,
                });
              }
            });
          } else {
            addNotification({
              style: "danger",
              msg: resError,
            });
          }
        }
      });
    setLoading(false);
  };

  return (
    <section className="profile-account-setting">
      <div className="container">
        <div className="account-tabs-setting">
          <div className="row">
            <div className="col-lg-3">
              <div className="acc-leftbar">
                <div className="nav nav-tabs" id="nav-tab" role="tablist">
                  <a
                    className="nav-item nav-link active"
                    id="nav-premium-tab"
                    data-toggle="tab"
                    href="#nav-premium"
                    role="tab"
                    aria-controls="nav-premium"
                    aria-selected="false"
                  >
                    <i className="fa fa-diamond"></i>Premium
                  </a>
                </div>
              </div>
              {/* <!--acc-leftbar end--> */}
            </div>

            <div className="col-lg-9">
              <div className="tab-content" id="nav-tabContent">
                <div
                  className="tab-pane fade active show"
                  id="nav-premium"
                  role="tabpanel"
                  aria-labelledby="nav-premium-tab"
                >
                  <div className="acc-setting">
                    <h3>Características Premium</h3>
                    <form onSubmit={handleSubmit(handleOnSubmit)}>
                      <Setting
                        register={register}
                        title="Micro aprendizaje"
                        inputName="status_microlearning"
                      />
                      <Setting
                        register={register}
                        title="Auto Evaluación"
                        inputName="status_self_evaluation"
                      />
                      <div className="save-stngs pd2">
                        <ul>
                          <li>
                            <button
                              type="submit"
                              className="btn-save-premium-settings"
                            >
                              Guardar
                            </button>
                          </li>
                        </ul>
                      </div>
                    </form>
                    {/* <!--save-stngs end--> */}
                    {loading && (
                      <StyledSpinnerContainer>
                        <Spinner />
                      </StyledSpinnerContainer>
                    )}
                  </div>
                  {/* <!--acc-setting end--> */}
                </div>
              </div>
            </div>
            {/* <!--account-tabs-setting end--> */}
          </div>
        </div>
      </div>
    </section>
  );
};

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

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