Admin purchases

src/App.js

@@ -23,6 +23,9 @@ function Panel(props) {
           <Route path="/members/add">
             <MemberAdder />
           </Route>
+          <Route path="/members/purchase">
+            <Purchase member />
+          </Route>
           <Route path="/members">
             <MemberList />
           </Route>

src/Head.js

@@ -12,6 +12,7 @@ function Head(props) {
   if (auth.role === "admin") {
     adminNav = (
       <NavDropdown title="Admin" id="admin">
+        <Nav.Link href="/members/purchase">Compra</Nav.Link>
         <Nav.Link href="/members">Socias</Nav.Link>
         <Nav.Link href="/topup">Recarga</Nav.Link>
         <Nav.Link href="/members/add">Nueva socia</Nav.Link>

src/MemberPicker.js

+import React, { useState } from "react";
+import { Form, Col } from "react-bootstrap";
+import { Typeahead } from "react-bootstrap-typeahead";
+import Fetcher from "./Fetcher";
+
+function MemberPicker(props) {
+  const [members, setStateMembers] = useState([]);
+  const selected = props.member ? [props.member] : [];
+
+  const setMembers = (members) => {
+    const newMembers = members.map((m) => {
+      m.numStr = m.num.toString();
+      return m;
+    });
+    setStateMembers(newMembers);
+  };
+
+  return (
+    <Fetcher url="/api/member" onFetch={setMembers}>
+      <Form>
+        <Form.Row>
+          <Col sm={4}>
+            <br />
+            <h4 className="text-right">Socia:</h4>
+          </Col>
+          <Form.Group as={Col} sm={2}>
+            <Form.Label>Num</Form.Label>
+            <Typeahead
+              id="member-num"
+              labelKey="numStr"
+              options={members}
+              onChange={(m) => props.onChange(m[0])}
+              selected={selected}
+            />
+          </Form.Group>
+          <Form.Group as={Col}>
+            <Form.Label>Login</Form.Label>
+            <Typeahead
+              id="member-login"
+              labelKey="login"
+              options={members}
+              onChange={(m) => props.onChange(m[0])}
+              selected={selected}
+            />
+          </Form.Group>
+          <Form.Group as={Col}>
+            <Form.Label>Nombre</Form.Label>
+            <Typeahead
+              id="member-name"
+              labelKey="name"
+              options={members}
+              onChange={(m) => props.onChange(m[0])}
+              selected={selected}
+            />
+          </Form.Group>
+        </Form.Row>
+      </Form>
+      <hr />
+    </Fetcher>
+  );
+}
+
+export default MemberPicker;

src/purchase/Purchase.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Redirect } from "react-router-dom";
 import { Container, Row, Col, Button, Alert, Spinner } from "react-bootstrap";
 import ProductPicker from "../ProductPicker";
+import MemberPicker from "../MemberPicker";
 import AuthContext from "../AuthContext";
 import { printMoney } from "../util";
 
@@ -12,6 +13,7 @@ class Purchase extends React.Component {
     super(props);
     this.state = {
       purchase: [],
+      member: null,
       total: 0,
       transactionId: null,
       isLoading: false,
@@ -27,6 +29,15 @@ class Purchase extends React.Component {
   }
 
   send() {
+    if (this.props.member && !this.state.member) {
+      this.setState({ error: "Falta seleccionar una socia" });
+      return;
+    }
+
+    const url = this.props.member
+      ? "/api/member/" + this.state.member.num + "/purchase"
+      : "/api/purchase";
+
     this.setState({ isLoading: true, error: null, noMoney: false });
     const body = JSON.stringify(
       this.state.purchase.map((p) => {
@@ -36,7 +47,7 @@ class Purchase extends React.Component {
         };
       })
     );
-    fetch("/api/purchase", {
+    fetch(url, {
       headers: { "x-authentication": this.context.token },
       method: "POST",
       body,
@@ -91,6 +102,13 @@ class Purchase extends React.Component {
     return (
       <Container>
         {alert}
+        {this.props.member && (
+          <MemberPicker
+            member={this.state.member}
+            onChange={(member) => this.setState({ member })}
+          />
+        )}
+
         <ProductPicker
           amount
           picks={this.state.purchase}