Proyectos de Subversion LeadersLinked - Antes de SPA

import {axios} from "../../../utils";
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { useDispatch } from "react-redux";
import { addNotification } from "../../../redux/notification/notification.actions";
import BootstrapModal from "../../../shared/bootstrapModal/BootstrapModal";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../shared/loading-spinner/Spinner";
import MaterialTable from "../../../shared/materialTable/MaterialTable";

const TransactionTableColumns = [
  {
    field: "type",
    headerName: "Tipo",
  },
  {
    field: "amount",
    headerName: "Monto",
  },
  {
    field: "status",
    headerName: "Estado",
  },
  {
    field: "description",
    headerName: "Descripción",
  },
  {
    field: "updated_on",
    headerName: "Fecha",
  },
  {
    field: "provider",
    headerName: "Proveedor",
  },
];

const Transactions = (props) => {
  // props destructuring
  const { routeTransactions, amounts, balance, routeAddFunds } = props;
  const dispatch = useDispatch();

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

  const formEl = useRef();

  const [transactionData, setTransactionData] = useState({});
  const [transactionModalOpen, setTransactionModalOpen] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);

  useEffect(async () => {
    const resData = (await axios.get(routeTransactions)).data;
    if (!resData.success) {
      return dispatch(
        addNotification({
          style: "danger",
          msg: "Ha ocurrido un error, por favor recargue la pagina",
        })
      );
    }
    setTransactionData(resData.data);
  }, []);

  const onSubmit = async (data) => {
    setModalLoading(true);
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => {
      formData.append(key, value);
    });
    const resData = (await axios.post(routeAddFunds, formData)).data;
    if (!resData.success) {
      const errorMessage =
        typeof resData.data === "string"
          ? resData.data
          : "Ha ocurrido un error, Por favor intente mas tarde";
      dispatch(
        addNotification({
          style: "danger",
          msg: errorMessage,
        })
      );
    }
    const paypalRoute = resData.data;
    window.location.replace(paypalRoute);
    setModalLoading(false);
  };

  return (
    <React.Fragment>
      <div className="acc-setting">
        <h3>Transacciones</h3>
        <div className="cp-field">
          <h5 id="location-formatted-address">Balance (USD)</h5>
          <div className="cpp-fiel">
            <input type="text" readOnly value={balance} />
          </div>
          <div className="cpp-fiel">
            <input
              type="button"
              id="btn-add-fund"
              value="Agregar fondos"
              onClick={() => setTransactionModalOpen(true)}
            />
          </div>
        </div>
        <div className="cp-field" style={{ marginBottom: "1rem" }}>
          <MaterialTable
            columns={TransactionTableColumns}
            rows={transactionData.items}
            count={transactionData.total}
          />
        </div>
      </div>
      <BootstrapModal
        show={transactionModalOpen}
        title="Agregar Fondos"
        onClose={() => setTransactionModalOpen(false)}
        onAccept={() => {
          formEl.current.dispatchEvent(
            new Event("submit", { cancelable: true, bubbles: true })
          );
        }}
      >
        <React.Fragment>
          <form onSubmit={handleSubmit(onSubmit)} ref={formEl}>
            <div className="form-group">
              <input
                type="text"
                name="description"
                id="description"
                placeholder="Descripción"
                ref={register({
                  required: "Por favor ingrese una descripción",
                  maxLength: {
                    value: 50,
                    message: "Máximo 50 caracteres",
                  },
                })}
              ></input>
              <FormErrorFeedback>
                {errors?.description?.message}
              </FormErrorFeedback>
              <select
                name="amount"
                id="amount"
                ref={register({
                  required: "Por favor eliga un monto",
                })}
                defaultValue=""
              >
                <option value="">Monto</option>
                {Object.entries(amounts).map(([key, value]) => (
                  <option value={key} key={key}>
                    {value}
                  </option>
                ))}
                <FormErrorFeedback>{errors?.amount?.message}</FormErrorFeedback>
              </select>
            </div>
          </form>
        </React.Fragment>
      </BootstrapModal>
      {modalLoading && (
        <div className="spinner-container">
          <Spinner />
        </div>
      )}
    </React.Fragment>
  );
};

export default Transactions;