Adjusted superfluous comments, used setState where required, and general readability adjustments (#123)

Author: azizul-i

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);
   };

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

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} />

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", {

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 !== "";

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 (