From c689d3cf2fba1235faefa1eda9a0ffc337b85f15 Mon Sep 17 00:00:00 2001
From: Azizul Islam <48302867+misl000@users.noreply.github.com>
Date: Fri, 20 Mar 2020 17:35:01 +1300
Subject: [PATCH] Adjusted superfluous comments, used setState where required,
 and general readability adjustments (#123)

---
 split-webapp/split/src/components/MenuBar.js  |  7 +---
 .../split/src/components/TransactionList.js   |  8 ++--
 split-webapp/split/src/pages/Home.js          |  4 --
 split-webapp/split/src/pages/Login.js         | 13 ++++---
 split-webapp/split/src/pages/SignUp.js        | 10 +----
 split-webapp/split/src/pages/Split.js         | 38 +++++++++----------
 6 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/split-webapp/split/src/components/MenuBar.js b/split-webapp/split/src/components/MenuBar.js
index f6514cc..a76d585 100644
--- a/split-webapp/split/src/components/MenuBar.js
+++ b/split-webapp/split/src/components/MenuBar.js
@@ -25,15 +25,10 @@ const useStyles = makeStyles(theme => ({
 
 export default function MenuBar() {
   const classes = useStyles();
-  // relates to handleChange
-  const [auth /* , setAuth  */] = React.useState(true);
+  const [auth] = React.useState(true);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
 
-  // const handleChange = event => {
-  //   setAuth(event.target.checked);
-  // };
-
   const handleMenu = event => {
     setAnchorEl(event.currentTarget);
   };
diff --git a/split-webapp/split/src/components/TransactionList.js b/split-webapp/split/src/components/TransactionList.js
index e031d4b..d5624b5 100644
--- a/split-webapp/split/src/components/TransactionList.js
+++ b/split-webapp/split/src/components/TransactionList.js
@@ -39,7 +39,7 @@ class TransactionList extends React.Component {
   }
 
   componentDidMount() {
-    fetch("/api/bill_data/get_bills") // temp
+    fetch("/api/bill_data/get_bills")
       .then(res => {
         return res.json();
       })
@@ -79,7 +79,7 @@ class TransactionList extends React.Component {
         <ExpansionPanelSummary>
           <div className="BillSummary">
             <div className="BillTitle">{bill.title}</div>
-            <div className="BillAmount">${bill.total.toFixed(2)}</div>
+            <div className="BillAmount">${Number(bill.total).toFixed(2)}</div>
           </div>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails className="Payments">
@@ -101,7 +101,9 @@ class TransactionList extends React.Component {
             </div>
           </div>
           {bill.payments.map(payment => {
-            const label = `${payment.from} owes ${payment.to} $${payment.amount.toFixed(2)}`;
+            const label = `${payment.from} owes ${payment.to} $${Number(
+              payment.amount
+            ).toFixed(2)}`;
             return (
               <div key={payment.id}>
                 <FormControlLabel
diff --git a/split-webapp/split/src/pages/Home.js b/split-webapp/split/src/pages/Home.js
index b12662b..96e30d4 100644
--- a/split-webapp/split/src/pages/Home.js
+++ b/split-webapp/split/src/pages/Home.js
@@ -17,10 +17,6 @@ function Home() {
             <button type="button">Sign Out</button>
           </NavLink>
           <NavList />
-          {/* <ul className="">
-        <NavLink className="NavText" to="/home/transactions"><button className="NavOptions">Transactions</button></NavLink>
-        <NavLink className="NavText" to="/home/split"><button className="NavOptions">Split</button></NavLink>
-        </ul> */}
         </div>
         <div className="HomeScreen">
           <Route path="/home/transactions" component={Transactions} />
diff --git a/split-webapp/split/src/pages/Login.js b/split-webapp/split/src/pages/Login.js
index 63e3595..82cfd0a 100644
--- a/split-webapp/split/src/pages/Login.js
+++ b/split-webapp/split/src/pages/Login.js
@@ -22,24 +22,27 @@ class Login extends Component {
   }
 
   handleOnChangeUser = event => {
-    this.state.username = event.target.value;
+    this.setState({ username: event.target.value });
   };
 
   handleOnChangePassword = event => {
-    this.state.password = event.target.value;
+    this.setState({ password: event.target.value });
   };
 
   handleAuth = () => {
     this.setState({ failedAuth: true });
   };
 
-  // creates user and passes it to the api call.
   createDetails() {
-    const user = this.state;
+    const { username, password, failedAuth } = this.state;
+    const user = {
+      username,
+      password,
+      failedAuth
+    };
     this.authenticate(user);
   }
 
-  // api call to the back-end
   authenticate(user) {
     const { history } = this.props;
     fetch("/api/account/login", {
diff --git a/split-webapp/split/src/pages/SignUp.js b/split-webapp/split/src/pages/SignUp.js
index 06d7750..0d6ed88 100644
--- a/split-webapp/split/src/pages/SignUp.js
+++ b/split-webapp/split/src/pages/SignUp.js
@@ -31,8 +31,8 @@ class SignUp extends Component {
     this.setState({ user, failed: false });
   };
 
-  // Creates a new user JSON and sends to the create account end point. On success routes
-  // user to the create a bill page. User should get logged in as well as session created.
+  // Creates a new user JSON and sends to the create account end point.
+  // User should get logged in as well as session created.
 
   createUser() {
     const { user } = this.state;
@@ -58,8 +58,6 @@ class SignUp extends Component {
         })
         .then(data => {
           if (data.success === true) {
-            // If the POST returns success, route user to the split page
-            // eslint-ignore
             history.push("/home/split");
           } else {
             this.setState({
@@ -72,15 +70,11 @@ class SignUp extends Component {
     }
   }
 
-  // Checks that the two passwords match
-
   validatePassword() {
     const { user } = this.state;
     return user.password === user.confPassword;
   }
 
-  // Check the username is non empty
-
   validateUsername() {
     const { user } = this.state;
     return user.username !== "";
diff --git a/split-webapp/split/src/pages/Split.js b/split-webapp/split/src/pages/Split.js
index c426cf3..63fa1d4 100644
--- a/split-webapp/split/src/pages/Split.js
+++ b/split-webapp/split/src/pages/Split.js
@@ -13,6 +13,20 @@ import {
 } from "@material-ui/core";
 import PropTypes from "prop-types";
 
+const createBill = data => {
+  fetch("/api/bill_exec/create_bill", {
+    method: "POST",
+    body: JSON.stringify(data),
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+    .then(res => {
+      return res;
+    })
+    .catch(err => console.log(err));
+};
+
 class Split extends Component {
   constructor(props) {
     super(props);
@@ -88,15 +102,17 @@ class Split extends Component {
       outstanding_payments: paymentArray
     };
 
-    this.createBill(bill);
+    createBill(bill);
 
     if (!title) {
       alert("Please enter a title description for this bill.");
       return;
-    } if (!cost) {
+    }
+    if (!cost) {
       alert("Please enter an amount for this bill.");
       return;
-    } if (transaction.users.length < 2) {
+    }
+    if (transaction.users.length < 2) {
       alert(
         "There is not enough people to split a bill. Please make sure at least 2 people are on the list."
       );
@@ -110,22 +126,6 @@ class Split extends Component {
     history.push("/home/transactions");
   }
 
-  createBill(data) {
-    fetch("/api/bill_exec/create_bill", {
-      method: "POST",
-      body: JSON.stringify(data),
-      headers: {
-        "Content-Type": "application/json"
-      }
-    })
-      .then(res => {
-        // If "this" is not called in the createBill method, you may have to create the function outside of the class (es-lint rule)
-        this.setState({});
-        return res;
-      })
-      .catch(err => console.log(err));
-  }
-
   render() {
     const { transaction } = this.state;
     return (