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