In case something broke

docs/App.md

@@ -0,0 +1,20 @@
+# App.js
+
+### State
+
+| State names | Details |
+|:---------------|:--------|
+| `peoples` | Array of [`People`](People.md) component |
+| `info` | Array for information of all the people involved |
+| `paymentChain` | Generated return by the backend server |
+| `actionButtons` | Just to store (and display) the 2 given buttons |
+| `showResults` | Boolean that will be switched when result is received from server |
+
+### Functions
+
+| Function names | Details |
+|:---------------|:--------|
+| `getPaymentChain()` | Parse user input into JSON to be sent to backend and decipher the response from backend |
+| `populatePeople(e)` | Fill `peoples` in `{this.state}` with `People` component based on user input in `Main-form` class |
+| `updateInfo(e)` | Binded to each [`People`](people.md) as to update `{this.state.info}` when something in the [`People`](people.md) class is updated |
+| `httpPost(data, callback)` | Used by `getPaymentChain()` to make `POST` request to [api.breakups.life/paymentChain](https://api.breakups.life) |

docs/Message.md

@@ -0,0 +1,11 @@
+# Message.js
+
+This just returns the following and do nothing else.
+
+```HTML
+<div className="Message">
+  <br/>
+  Calculating...
+  <br/>
+</div>
+```

docs/Payment.md

@@ -0,0 +1,8 @@
+# Payment.js
+
+This returns a single payment among the [`PaymentChain`](PaymentChain.md) generated by [Breakups](https://breakups.life) where it specifies who to who and the amount below.
+
+Example:
+
+> Person A -> Person B <br/>
+> Amount: 10.50

docs/PaymentChain.md

@@ -0,0 +1,9 @@
+# PaymentChain.js
+
+This returns the entire list of [`Payment`](Payment.md)s generated by [Breakups](https://breakups.life).
+
+### Props
+
+| Props name | Details |
+|:---------------|:--------|
+| `payments` | Return JSON from [`Breakups`](https://api.breakups.life) which was then parsed into individual [`Payment`](Payment.md) component |

docs/People.md

@@ -0,0 +1,22 @@
+# People.js
+
+### Refs
+
+| Refs names | Details |
+|:---------------|:--------|
+| `name` | Name of the person |
+| `email` | Email of the person |
+| `amount` | Amount of money paid by the person |
+
+### Relevant variables
+
+| Variable names | Details |
+|:---------------|:--------|
+| `req` | An object containing `name`, `email`, and `amount` from the above |
+| `infoToSend` | An object containing `{this.props.id}` in `id` and `req` in `info` |
+
+### Props
+
+| Props name | Details |
+|:---------------|:--------|
+| `info` | Just `infoToSend` |

docs/index.md

@@ -0,0 +1,16 @@
+## The frontend interface as a webapp for [Breakups](https://git.binhong.me/binhong/Breakups).
+
+#### main
+
+| API doc | source |
+|:-------:|:------:|
+| [App.js](App.md) | ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/App.js)) |
+
+#### Components
+
+| API doc | source |
+|:-------:|:------:|
+| [Message.js](Message.md)  |([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/Message.js)) |
+| [Payment.js](Payment.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/Payment.js)) |
+| [PaymentChain.js](PaymentChain.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/PaymentChain.js)) |
+| [People.js](People.md) |  ([source](https://git.binhong.me/binhong/breakups-webapp/src/branch/master/src/Components/People.js)) |