Arrived and collected UI workflow

src/order/OrderCards.js

 import React, { useState } from "react";
 import { Card, Row, Col, Button } from "react-bootstrap";
 import { LinkContainer } from "react-router-bootstrap";
+import Sender from "../Sender";
 import Fetcher from "../Fetcher";
 
 function OrderCards() {
-  const [orders, setOrders] = useState([]);
-  const order_list = orders.map((o) => (
-    <Card key={o.ID} as={Col} sm={4}>
+  const [unarrived, setUnarrived] = useState([]);
+  const [collectable, setCollectable] = useState([]);
+  const [active, setActive] = useState([]);
+  const [refetch, setRefetch] = useState(0);
+
+  const unarrived_list = unarrived.map((o) => (
+    <Card bg="dark" text="white" key={o.ID} as={Col} sm={4}>
       <Card.Body>
-        <Card.Title>{o.name}</Card.Title>
-        <Card.Text>{o.description}</Card.Text>
         <LinkContainer to={"/order/" + o.ID}>
-          <Button>Realizar pedido</Button>
+          <div>
+            <Card.Title>{o.name}</Card.Title>
+            <Card.Text>{o.description}</Card.Text>
+          </div>
         </LinkContainer>
+        <Sender
+          url={"/api/order/" + o.ID + "/arrive"}
+          method="PUT"
+          onSuccess={() => setRefetch(refetch + 1)}
+        >
+          <Button type="submit" variant="light">
+            Informar llegada
+          </Button>
+        </Sender>
       </Card.Body>
     </Card>
   ));
+
+  const collectable_list = collectable.map((t) => {
+    const purchase_list = t.order_purchase.map((o) => {
+      if (o.amount === 0) {
+        return "";
+      }
+      return (
+        <div key={o.order_product.code}>
+          {o.order_product.product.name}: {o.amount}
+          <br />
+        </div>
+      );
+    });
+    return (
+      <Card bg="secondary" text="white" key={"T-" + t.ID} as={Col} sm={4}>
+        <Card.Body>
+          <LinkContainer to={"/order/" + t.order.ID}>
+            <div>
+              <Card.Title>{t.order.name}</Card.Title>
+              <Card.Text>{purchase_list}</Card.Text>
+            </div>
+          </LinkContainer>
+          <Sender
+            url={"/api/order/" + t.order.ID + "/collected"}
+            method="PUT"
+            onSuccess={() => setRefetch(refetch + 1)}
+          >
+            <Button type="submit" variant="light">
+              Recogido
+            </Button>
+          </Sender>
+        </Card.Body>
+      </Card>
+    );
+  });
+
+  const active_list = active.map((o) => (
+    <LinkContainer to={"/order/" + o.ID}>
+      <Card bg="info" text="white" key={o.ID} as={Col} sm={4}>
+        <Card.Body>
+          <Card.Title>{o.name}</Card.Title>
+          <Card.Text>{o.description}</Card.Text>
+          <Button variant="light">Realizar pedido</Button>
+        </Card.Body>
+      </Card>
+    </LinkContainer>
+  ));
+
   return (
-    <Fetcher url={"/api/order/active"} onFetch={setOrders}>
-      <Row>{order_list}</Row>
-    </Fetcher>
+    <Row>
+      <Fetcher
+        url={"/api/order/unarrived"}
+        onFetch={setUnarrived}
+        refetch={refetch}
+      >
+        {unarrived_list}
+      </Fetcher>
+      <Fetcher
+        url={"/api/order/collectable"}
+        onFetch={setCollectable}
+        refetch={refetch}
+      >
+        {collectable_list}
+      </Fetcher>
+      <Fetcher url={"/api/order/active"} onFetch={setActive}>
+        {active_list}
+      </Fetcher>
+    </Row>
   );
 }
 

src/order/ShowOrder.js

@@ -13,6 +13,7 @@ import {
   Modal,
 } from "react-bootstrap";
 import PurchaseOrder from "./PurchaseOrder";
+import Sender from "../Sender";
 import { printDate } from "../util";
 import AuthContext from "../AuthContext";
 import { printMoney, url } from "../util";
@@ -65,6 +66,7 @@ function ShowOrderResults(props) {
     return (
       <li key={t.member.num}>
         {t.member.name} ({t.member.num}):
+        {t.collected && <Badge variant="success">Recogido</Badge>}
         <ul>{list}</ul>
       </li>
     );
@@ -170,29 +172,66 @@ class ShowOrder extends React.Component {
     const { id } = this.props.match.params;
 
     let update_button;
+    let collect_button;
     if (this.state.isLoading) {
       update_button = <Spinner animation="border" />;
     } else {
       let deadline_week = new Date(order.deadline);
       deadline_week.setDate(deadline_week.getDate() + 7);
-      if (
-        (order.member_num === parseInt(this.context.num) ||
-          this.context.role === "admin") &&
-        deadline_week > Date.now()
-      ) {
-        update_button = (
-          <ButtonGroup>
-            <LinkContainer to={"/order/edit/" + id}>
-              <Button variant="info">Modificar</Button>
-            </LinkContainer>
-            <Button
-              variant="danger"
-              onClick={() => this.setState({ showDelete: true })}
+      if (deadline_week > Date.now()) {
+        if (order.arrived && !this.state.transaction.collected) {
+          collect_button = (
+            <Sender
+              url={"/api/order/" + id + "/collected"}
+              method="PUT"
+              onSuccess={() =>
+                this.setState({ refetch: this.state.refetch + 1 })
+              }
             >
-              Cancelar
-            </Button>
-          </ButtonGroup>
-        );
+              <Button type="submit" variant="secondary">
+                Recogido
+              </Button>
+            </Sender>
+          );
+        }
+        if (
+          order.member_num === parseInt(this.context.num) ||
+          this.context.role === "admin"
+        ) {
+          let arrived_button;
+          if (!order.active && !order.arrived) {
+            arrived_button = (
+              <Sender
+                url={"/api/order/" + id + "/arrive"}
+                method="PUT"
+                onSuccess={() =>
+                  this.setState({ refetch: this.state.refetch + 1 })
+                }
+              >
+                <Button type="submit" variant="dark">
+                  Informar llegada
+                </Button>
+              </Sender>
+            );
+          }
+          update_button = (
+            <div>
+              <ButtonGroup>
+                <LinkContainer to={"/order/edit/" + id}>
+                  <Button variant="info">Modificar</Button>
+                </LinkContainer>
+                <Button
+                  variant="danger"
+                  onClick={() => this.setState({ showDelete: true })}
+                >
+                  Cancelar
+                </Button>
+              </ButtonGroup>
+              <br />
+              {arrived_button}
+            </div>
+          );
+        }
       }
     }
 
@@ -220,6 +259,7 @@ class ShowOrder extends React.Component {
               {expired}
             </p>
             {update_button}
+            {collect_button}
           </Col>
         </Row>
         <p>{this.state.order.description}</p>