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 mb-3">

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