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: '', align: 'center',
        formatter: cell => {
            switch (cell) {
                case "purchase":
                    return <FaShoppingBasket />;
                default:
                    return <FaMoneyBillAlt />;
            };
    }},
    {dataField: 'date', text: 'Fecha', formatter: printDate},
    {dataField: 'total', text: 'Cantidad', formatter: cell => printMoney(cell)+" €"},
]

function rowStyle(row) {
    if (["purchase"].includes(row.type)) {
        return {
            backgroundColor: "#fcbabf"
        };
    }
    return {
        backgroundColor: "#c4fcba"
    };
}

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)
                }}
                rowStyle={rowStyle}
                classes="stripped"
                bordered={ false }
            />
        </Fetcher>
    );
}

export default TransactionList;