Skip to content
Snippets Groups Projects
Commit 54dca2a8 authored by meskio's avatar meskio :tent:
Browse files

Use member picker for topups

parent 816b60cb
No related branches found
No related tags found
No related merge requests found
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>
);
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment