ActiveAllocator/ActiveAllocator.API/ClientApp/src/components/transactions/Transactions.js

import { EndPoints, getData } from "../services/AccessAPI";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import { useState } from 'react';
import { Routes } from "../services/Routes";
import RowButton from "../ui-elements/table/RowButton";
import DataFormatter, { RenderType } from "../ui-elements/table/DataFormatter";
import TranactionTable from "../ui-elements/table/TransactionTable";

export default function Transactions() {
    useEffect(() => {
        getAllTransactionsData();
        getAllAccountsData();
        getAllEnvelopesData();
    }, [])

    let navigate = useNavigate();
    //const search = useLocation().search;
    //const accountId = new URLSearchParams(search).get('accountId')

    const [loading, setLoading] = useState(true);
    const [transactions, setTransactions] = useState([]);
    const [accounts, setAccounts] = useState([]);
    const [envelopes, setEnvelopes] = useState([]);

    const [page, setPage] = useState(1);

    function onTransactionCreate() {
        navigate(Routes.TRANSACTIONS_CREATE);
    }

    function previousPage()
    {
        setPage(page > 1 ? page - 1 : 1)
        getAllTransactionsData()
    }

    function nextPage()
    {
        setPage(page + 1);
        getAllTransactionsData()
    }

    function getAllTransactionsData() {
        //let url = EndPoints.TRANSACTIONS + '/';
        /*if (accountId) {
            url += '?accountId=' + accountId;
        }*/
        let pageSize = 50;
        let query = "?PageNumber=" + page + "&PageSize=" + pageSize
        getData(EndPoints.TRANSACTIONS + query).then(
            (result) => {
                if (result) {
                    setTransactions(result);
                    setLoading(false);
                }
            }
        );
    }

    function getAllAccountsData() {
        getData(EndPoints.ACCOUNTS).then(
            (result) => {
                if (result) {
                    setAccounts(result);
                    setLoading(false);
                }
            }
        );
    }

    function getAllEnvelopesData() {
        getData(EndPoints.ENVELOPES).then(
            (result) => {
                if (result) {
                    setEnvelopes(result);
                    setLoading(false);
                }
            }
        );
    }

    function renderAllTransactionsTable(transactions) {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="col-md-12">
                        <TranactionTable 
                            transactions={transactions} 
                            setTransactions={setTransactions}/>
                    </div>
                </div>
            </div>
        );
    }

    let content = loading ? (
        <p>
            <em>Loading...</em>
        </p>
    ) : (
        renderAllTransactionsTable(transactions)
    )

    
    return (
        <div>
            <h3>List of Transactions</h3>
            <button onClick={() => onTransactionCreate()} className="btn btn-primary">Create new transaction</button>
            <hr />

            <button onClick={() => previousPage()} className="btn btn-primary">Previous Page</button>
            &nbsp;
            <p>{page}</p>
            &nbsp;
            <button onClick={() => nextPage()} className="btn btn-primary">Next Page</button>
            <br />
            <br />
            {content}
        </div>
    );
}