ShowTransaction.js

import React, { useState } from "react";
import { useParams, Redirect } from "react-router-dom";
import { Container, Row, Col } from "react-bootstrap";
import Fetcher from "./Fetcher";
import ShowPurchase from "./purchase/ShowPurchase";
import { printMoney, printDate } from "./util";

function ShowTransaction() {
  const { id } = useParams();
  const [transaction, setTransaction] = useState({});

  let show_list;
  switch (transaction.type) {
    case "purchase":
      show_list = <ShowPurchase purchase={transaction.purchase} />;
      break;
    case "topup":
      show_list = <p>{transaction.topup.comment}</p>;
      break;
    case "order":
      return <Redirect to={"/order/" + transaction.order.ID} />;
    case "refund":
      return <Redirect to={"/order/" + transaction.refund.ID} />;
    default:
      show_list = null;
  }

  return (
    <Fetcher url={"/api/transaction/" + id} onFetch={setTransaction}>
      <Container>
        {show_list}
        <Row>
          <Col>
            <h3>Total: {printMoney(transaction.total)}€</h3>
          </Col>
          <Col>
            <p className="text-right">{printDate(transaction.date)}</p>
          </Col>
        </Row>
      </Container>
    </Fetcher>
  );
}

export default ShowTransaction;