From def9fb0612c261339ae285cfbff28316caeb826c Mon Sep 17 00:00:00 2001 From: BinHong Lee Date: Tue, 31 Oct 2017 23:14:20 -0700 Subject: [PATCH] PaymentChain should now be fully functional --- README.md | 5 ++ public/index.html | 10 ---- src/App.css | 34 ------------- src/App.js | 88 +++++++++++++++++++++++++++++----- src/Components/Payment.js | 14 ++++++ src/Components/PaymentChain.js | 23 +++++++++ src/Components/People.js | 19 ++++++-- 7 files changed, 133 insertions(+), 60 deletions(-) create mode 100644 src/Components/Payment.js create mode 100644 src/Components/PaymentChain.js diff --git a/README.md b/README.md index 3f7b043..a389a7f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ # Breakups-Webapp +https://breakups-webapp.herokuapp.com/ + +[![Build Status](https://travis-ci.org/binhonglee/breakups-webapp.svg?branch=master)](https://travis-ci.org/binhonglee/breakups-webapp) +[![Dependency Status](https://gemnasium.com/badges/github.com/binhonglee/Breakups.svg)](https://gemnasium.com/github.com/binhonglee/Breakups) + Basic webapp that implements the [Breakups API](https://github.com/binhonglee/Breakups) functionality. \ No newline at end of file diff --git a/public/index.html b/public/index.html index db30ef3..7d6a985 100644 --- a/public/index.html +++ b/public/index.html @@ -13,15 +13,5 @@ You need to enable JavaScript to run this app.
- diff --git a/src/App.css b/src/App.css index 263bba6..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,34 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.App-header { - background-color: #222; - height: 150px; - padding: 20px; - color: white; -} - -.App-title { - font-size: 1.5em; -} - -.App-intro { - font-size: large; -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.form { - /*text-align: left;*/ - align-items: left; - align-self:left; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 690362b..6682263 100644 --- a/src/App.js +++ b/src/App.js @@ -1,47 +1,109 @@ import React, { Component } from 'react'; import People from './Components/People'; +import PaymentChain from './Components/PaymentChain'; import './App.css'; - +var https = require('https'); class App extends Component { constructor() { super(); this.state = { - peoples: [] + peoples: [], + info: [], + paymentChain: [] } } render() { return (
- Breakups -
-
+

Breakups

+

Easy way to split bills among multiple people.

Number of people:

-
{this.state.peoples} - - +
+ +
); } + getPaymentChain() { + let request = {}; + let users = []; + for (var key in this.state.info) { + if (isNaN(this.state.info[key].amount)) { + alert('Amount must be number!'); + return; + } + let user = {}; + user.name = this.state.info[key].name; + user.email = this.state.info[key].email; + user.amount = parseInt(this.state.info[key].amount, 10); + users.push(user); + } + request.users = users; + + this.httpsPost(request, result => { + let existingState = this.state; + existingState.paymentChain = JSON.parse("[" + result + "]")[0]; + this.setState(existingState); + }) + } + populatePeople(e) { let peoples = [] + let info = [] - if (isNaN(this.refs.noOfPeople.value)) { - alert('Please input number!'); + if (isNaN(this.refs.noOfPeople.value) || this.refs.noOfPeople.value <= 2) { + alert('Please input number larger than 2!'); } else { for (var i = 0; i < this.refs.noOfPeople.value; i++) { - peoples.push (); - this.setState({peoples:peoples}); - } + info.push({}); + peoples.push(); + } + + peoples.push(); + peoples.push(); + this.setState({peoples:peoples, info:info}); } e.preventDefault(); } + + updateInfo(e) { + let existingState = this.state; + existingState.info[e.id] = e.info; + this.setState(existingState); + } + + httpsPost(data, callback) { + var post_options = { + host: 'breakups.herokuapp.com', + path: '/paymentChain', + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Content-Length': Buffer.byteLength(JSON.stringify(data)) + } + }; + + var post_req = https.request(post_options, res => { + res.setEncoding('utf8'); + var returnData = ""; + res.on('data', chunk => { + returnData += chunk; + }); + res.on('end', () => { + console.log(returnData) + callback(returnData); + }); + }); + post_req.write(JSON.stringify(data)); + post_req.end(); + } } export default App; diff --git a/src/Components/Payment.js b/src/Components/Payment.js new file mode 100644 index 0000000..914b12f --- /dev/null +++ b/src/Components/Payment.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +class Payment extends Component { + render() { + return ( +
+
+ {this.props.payment.from} ----{this.props.payment.amount}----> {this.props.payment.to} +
+ ) + } +} + +export default Payment; \ No newline at end of file diff --git a/src/Components/PaymentChain.js b/src/Components/PaymentChain.js new file mode 100644 index 0000000..4b6afe4 --- /dev/null +++ b/src/Components/PaymentChain.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import Payment from './Payment'; + +class PaymentChain extends Component { + render() { + let payments; + if (this.props.paymentChain) { + payments = this.props.paymentChain.map(payment => { + return ( + + ); + }); + } + + return ( +
+ {payments} +
+ ); + } +} + +export default PaymentChain; \ No newline at end of file diff --git a/src/Components/People.js b/src/Components/People.js index 9d7f08a..3918338 100644 --- a/src/Components/People.js +++ b/src/Components/People.js @@ -6,14 +6,27 @@ class People extends Component {
Person {this.props.people}
- Name:
- Email:
- Amount:
+ Name:
+ Email:
+ Amount:

); } + + updateProps() { + let req = { + name: this.refs.name.value, + email: this.refs.email.value, + amount: this.refs.amount.value + }; + let infoToSend = { + id: this.props.id, + info: req + } + this.props.info(infoToSend); + } } export default People; \ No newline at end of file