Use member picker for topups

src/Topup.js

 import React from "react";
 import { Redirect } from "react-router-dom";
-import Fetcher from "./Fetcher";
+import MemberPicker from "./MemberPicker";
 import {
   Container,
   Form,
@@ -11,7 +11,6 @@ import {
   Spinner,
   InputGroup,
 } from "react-bootstrap";
-import { Typeahead } from "react-bootstrap-typeahead";
 import AuthContext from "./AuthContext";
 
 class Topup extends React.Component {
@@ -20,11 +19,9 @@ class Topup extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      members: [],
+      member: null,
       numInvalid: false,
       amount: 0,
-      num: null,
-      name: "",
       comment: "",
       transactionId: null,
       isLoading: false,
@@ -57,6 +54,10 @@ class Topup extends React.Component {
 
   send(e) {
     e.preventDefault();
+    if (!this.state.member) {
+      this.setState({ error: "Falta seleccionar una socia" });
+      return;
+    }
 
     this.setState({ isLoading: true, error: null });
     const body = JSON.stringify({
@@ -103,73 +104,50 @@ class Topup extends React.Component {
     }
 
     return (
-      <Fetcher
-        url="/api/member"
-        onFetch={(members) => this.setState({ members })}
-      >
-        <Container>
-          {alert}
-          <Form onSubmit={(e) => this.send(e)}>
-            <Form.Group as={Row}>
-              <Form.Label as="legend" column sm={2}>
-                Socia
-              </Form.Label>
-              <Col sm={5}>
-                <Form.Control
-                  placeholder="numero de socia"
-                  value={this.state.num}
-                  onChange={(e) => this.setNum(e.target.value)}
-                  isInvalid={this.state.numInvalid}
-                />
-              </Col>
-              <Col sm={5}>
-                <Typeahead
-                  id="name"
-                  labelKey="name"
-                  options={this.state.members}
-                  onChange={(m) => this.setName(m[0])}
-                  selected={this.state.name ? [this.state.name] : []}
-                />
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row}>
-              <Form.Label as="legend" column sm={2}>
-                Recarga
-              </Form.Label>
-              <Col sm={10}>
-                <InputGroup>
-                  <Form.Control
-                    type="number"
-                    placeholder="euros"
-                    value={this.state.amount}
-                    onChange={(e) => this.setState({ amount: e.target.value })}
-                  />
-                  <InputGroup.Append>
-                    <InputGroup.Text>.00 €</InputGroup.Text>
-                  </InputGroup.Append>
-                </InputGroup>
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row}>
-              <Form.Label as="legend" column sm={2}>
-                Comentario
-              </Form.Label>
-              <Col sm={10}>
+      <Container>
+        {alert}
+        <MemberPicker
+          member={this.state.member}
+          onChange={(member) => this.setState({ member })}
+        />
+        <Form onSubmit={(e) => this.send(e)}>
+          <Form.Group as={Row}>
+            <Form.Label as="legend" column sm={2}>
+              Recarga
+            </Form.Label>
+            <Col sm={10}>
+              <InputGroup>
                 <Form.Control
-                  placeholder="..."
-                  value={this.state.comment}
-                  onChange={(e) => this.setState({ comment: e.target.value })}
+                  type="number"
+                  placeholder="euros"
+                  value={this.state.amount}
+                  onChange={(e) => this.setState({ amount: e.target.value })}
                 />
-              </Col>
-            </Form.Group>
-            <Form.Group as={Row}>
-              <Col sm={{ span: 10, offset: 2 }}>
-                <Button type="submit">Recarga</Button>
-              </Col>
-            </Form.Group>
-          </Form>
-        </Container>
-      </Fetcher>
+                <InputGroup.Append>
+                  <InputGroup.Text>.00 €</InputGroup.Text>
+                </InputGroup.Append>
+              </InputGroup>
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row}>
+            <Form.Label as="legend" column sm={2}>
+              Comentario
+            </Form.Label>
+            <Col sm={10}>
+              <Form.Control
+                placeholder="..."
+                value={this.state.comment}
+                onChange={(e) => this.setState({ comment: e.target.value })}
+              />
+            </Col>
+          </Form.Group>
+          <Form.Group as={Row}>
+            <Col sm={{ span: 10, offset: 2 }}>
+              <Button type="submit">Recarga</Button>
+            </Col>
+          </Form.Group>
+        </Form>
+      </Container>
     );
   }
 }