TransactionList.js

import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import BootstrapTable from 'react-bootstrap-table-next';
import { FaShoppingBasket, FaMoneyBillAlt } from 'react-icons/fa';
import Fetcher from './Fetcher';
import { printMoney, printDate } from './util';

const columns = [
    {dataField: 'type', text: '', formatter: cell => {
        switch (cell) {
            case "purchase":
                return <FaShoppingBasket />;
            default:
                return <FaMoneyBillAlt />;
        };
    }},
    {dataField: 'date', text: 'Fecha', formatter: printDate},
    {dataField: 'total', text: 'Total', formatter: cell => printMoney(cell)+" €"},
]

function TransactionList() {
    const [transactions, setTransactions] = useState([]);
    const [clickID, setClicID] = useState(null);

    if (clickID) {
        return <Redirect to={"/transaction/"+clickID} push />;
    }

    return (
        <Fetcher url="/api/transaction" onFetch={setTransactions} >
            <BootstrapTable
                keyField="ID"
                data={ transactions }
                columns={ columns }
                rowEvents={{
                    onClick: (_, row) => setClicID(row.ID)
                }}
            />
        </Fetcher>
    );
}

export default TransactionList;