Update order purchase UI

src/order/PurchaseOrder.js

@@ -11,28 +11,33 @@ import {
 import AuthContext from "../AuthContext";
 import { printMoney } from "../util";
 
+function calculateTotal(order) {
+  const add = (acc, p) => acc + p.price * p.amount;
+  return order.reduce(add, 0);
+}
+
 class PurchaseOrder extends React.Component {
   static contextType = AuthContext;
 
   constructor(props) {
     super(props);
-    let order = props.order.products;
-    order = order.map((p) => {
+
+    const order = props.order.products.map((p) => {
       p.amount = 0;
-      p.purchased = 0;
-      return p;
-    });
-    props.order.transactions.forEach((t) => {
-      t.order_purchase.forEach((purchase) => {
-        const i = order.findIndex((p) => p.code === purchase.product_code);
-        if (i) {
-          order[i].purchased += purchase.amount;
+      if (props.purchase) {
+        const my_purchase = props.purchase.find(
+          (e) => e.product_code === p.code
+        );
+        if (my_purchase) {
+          p.amount = my_purchase.amount;
         }
+      }
+      return p;
     });
-    });
+
     this.state = {
       order: order,
-      total: 0,
+      total: calculateTotal(order),
       isLoading: false,
       noMoney: false,
       error: null,
@@ -50,8 +55,7 @@ class PurchaseOrder extends React.Component {
       };
     });
     const body = JSON.stringify(purchase);
-    console.log(body);
-    fetch("/api/order/" + this.props.order.ID + "purchase", {
+    fetch("/api/order/" + this.props.order.ID + "/purchase", {
       headers: { "x-authentication": this.context.token },
       method: "POST",
       body,
@@ -65,6 +69,7 @@ class PurchaseOrder extends React.Component {
         });
       } else {
         this.props.onSend(this.state.order, this.state.total);
+        this.setState({ isLoading: false, error: null, noMoney: false });
       }
     });
   }
@@ -72,10 +77,7 @@ class PurchaseOrder extends React.Component {
   setAmount(index, amount) {
     let order = this.state.order;
     order[index].amount = amount;
-
-    const add = (acc, p) => acc + p.price * p.amount;
-    const total = order.reduce(add, 0);
-
+    const total = calculateTotal(order);
     this.setState({ order, total });
   }
 

src/order/ShowOrder.js

@@ -23,7 +23,7 @@ function ShowOrderTransaction(props) {
 
 function ShowOrderResults(props) {
   let products = props.order.products.map((p) => {
-    p.amount = 0;
+    p.total = 0;
     return p;
   });
   const transactions = props.order.transactions.map((t) => {
@@ -32,7 +32,7 @@ function ShowOrderResults(props) {
       if (i === -1) {
         return null;
       }
-      products[i].amount += purchase.amount;
+      products[i].total += purchase.amount;
       if (purchase.amount) {
         const key =
           t.member.num.toString() + "-" + purchase.product_code.toString();
@@ -54,7 +54,7 @@ function ShowOrderResults(props) {
 
   const product_list = products.map((p) => (
     <li key={p.code}>
-      {p.name}: {p.amount}
+      {p.name}: {p.total}
     </li>
   ));
   return (
@@ -92,19 +92,22 @@ class ShowOrder extends React.Component {
   }
 
   showTransaction() {
-    if (this.state.transaction) {
+    if (this.state.order.active) {
       return (
-        <ShowOrderTransaction
+        <PurchaseOrder
           order={this.state.order}
-          transaction={this.state.transaction}
+          purchase={
+            this.state.transaction && this.state.transaction.order_purchase
+          }
+          onSend={(p, t) => this.onSend(p, t)}
         />
       );
     }
-    if (this.state.order.active) {
+    if (this.state.transaction) {
       return (
-        <PurchaseOrder
+        <ShowOrderTransaction
           order={this.state.order}
-          onSend={(p, t) => this.onSend(p, t)}
+          transaction={this.state.transaction}
         />
       );
     }