From 8225508c176801c824820e3b7ca23de2ebc45fa2 Mon Sep 17 00:00:00 2001 From: Martin Helmich Date: Mon, 3 Apr 2017 21:50:43 +0200 Subject: [PATCH] Finalize booking form --- index.html | 2 +- src/components/event_booking_form.tsx | 10 ++++---- .../event_booking_form_container.tsx | 24 +++++++++++++++---- src/components/form_row.tsx | 8 +++---- src/index.tsx | 4 ---- 5 files changed, 28 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 2624095..3dba6f3 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ MyEvents - +
diff --git a/src/components/event_booking_form.tsx b/src/components/event_booking_form.tsx index f1cbe2a..3f2330e 100644 --- a/src/components/event_booking_form.tsx +++ b/src/components/event_booking_form.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import {ChangeEvent} from "react"; import {Event} from "../model/event"; import {FormRow} from "./form_row"; @@ -20,9 +21,9 @@ export class EventBookingForm extends React.Component) { const newState: EventBookingFormState = { - selectedAmount: n + selectedAmount: parseInt(event.target.value) }; this.setState(newState); @@ -36,16 +37,13 @@ export class EventBookingForm extends React.Component{this.props.event.Name}

- this.handleNewAmount(e)}> - -

{this.state.selectedAmount * 99} €

- diff --git a/src/components/event_booking_form_container.tsx b/src/components/event_booking_form_container.tsx index 3a4e201..1094522 100644 --- a/src/components/event_booking_form_container.tsx +++ b/src/components/event_booking_form_container.tsx @@ -9,7 +9,7 @@ export interface EventBookingFormContainerProps { } export interface EventBookingFormState { - loading: boolean; + state: "loading"|"ready"|"saving"|"done"|"error"; event?: Event; } @@ -18,21 +18,21 @@ export class EventBookingFormContainer extends React.Component(resp => resp.json()) .then(event => { this.setState({ - loading: false, + state: "ready", event: event }); }) } render() { - if (this.state.loading) { + if (this.state.state === "loading") { return
Loading...
; } @@ -43,7 +43,21 @@ export class EventBookingFormContainer extends React.Component this.handleSubmit(amount)}/> } - private handleSubmit(amount: number) { + private handleSubmit(seats: number) { + const url = this.props.bookingServiceURL + "/events/" + this.props.eventID + "/bookings"; + const payload = {seats: seats}; + this.setState({ + event: this.state.event, + state: "saving" + }); + + fetch(url, {method: "POST", body: JSON.stringify(payload)}) + .then(response => { + this.setState({ + event: this.state.event, + state: response.ok ? "done" : "error" + }); + }) } } \ No newline at end of file diff --git a/src/components/form_row.tsx b/src/components/form_row.tsx index 4ef7758..079422f 100644 --- a/src/components/form_row.tsx +++ b/src/components/form_row.tsx @@ -6,12 +6,12 @@ export interface FormRowProps { export class FormRow extends React.Component { render() { - const label = this.props.label ? : undefined; - const cls = "col-sm-10" + (this.props.label ? "" : " col-sm-offset-2"); + //const label = this.props.label ? : undefined; + //const cls = "col-sm-10" + (this.props.label ? "" : " col-sm-offset-2"); return
- {label} -
+ +
{this.props.children}
diff --git a/src/index.tsx b/src/index.tsx index 7d4cc3a..9ede532 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,10 +5,6 @@ import {EventListContainer} from "./components/event_list_container"; import {Navigation} from "./components/navigation"; import {EventBookingFormContainer} from "./components/event_booking_form_container"; -declare function require(n: string): any; - -const bs = require("bootstrap/dist/css/bootstrap.css"); - class App extends React.Component<{}, {}> { render() { const eventList = () => ;