Notes for April 6 2019

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const ShoppingListItem = props => {
  const label = props.label;
  const price = props.price.toFixed(2);
  const quantity = props.quantity;

  const labelStyles = {
    fontWeight: "bolder"
  };

  return (
    <div className="line-item">
      <span
        style={{
          paddingRight: "5px"
        }}
      >
        {quantity}
      </span>
      <span style={labelStyles}>{label}</span>=
      <span>${(quantity * price).toFixed(2)}</span>
    </div>
  );
};

const ShoppingList = props => {
  const shoppinglist = props.shoppinglist;
  console.log(shoppinglist)
  let total = 0;
  const ShoppingListItems = [];
  for (let item of shoppinglist) {
    console.log(item);
    total += item.price * item.quantity;
    ShoppingListItems.push(
      <ShoppingListItem
        key={item.label}
        label={item.label}
        price={item.price}
        quantity={item.quantity}
      />
    );
  }

  return (
    <div>
      {ShoppingListItems}
      TOTAL: ${total}
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      label: "",
      price: 0,
      quantity: 0,
      currentTotal: null,
      shoppingList: [],
    };
  }

  addToList() {
    const shoppingList = this.state.shoppingList;

    shoppingList.push({
      "label": this.state.label,
      "price": parseFloat(this.state.price, 10),
      "quantity": parseInt(this.state.quantity, 10),
    })
 
    // make DB call to POST / PUT here
    this.setState({
      label: "",
      price: 0,
      quantity: 0,
      currentTotal: null,
      shoppingList: shoppingList,
    })
  }

  updateState(e, name) {
    const oldState = this.state;
    oldState[name] = e.target.value;
    if (oldState.price && oldState.quantity) {
      oldState.currentTotal = oldState.price * oldState.quantity
    }
    else {
      oldState.currentTotal = null;
    }
    this.setState(oldState)
  }

  render() {
    const inputStyle = {
      padding: '10px',
      fontSize: '14px',
      margin: '5px',
      display: 'block',
      width: '100%'
    }

    const buttonStyle = {
      width: '100%',
      border: 'none',
      fontSize: '14px',
      fontWeight: 'bolder',
      backgroundColor: 'black',
      color: 'white',
      margin: '5px',
      padding: '10px',
    }

    const currentTotal = this.state.currentTotal ? ("$" + this.state.currentTotal): null
    console.log(this.state.shoppingList)
    return ( 
      <div className="App">
        <input style={inputStyle} onChange={(e) => this.updateState(e, "label")} type="text" placeholder="Shopping Item Label" />
        <input style={inputStyle} onChange={(e) => this.updateState(e, "price")} type="number" step="0.01" placeholder="Shopping Item Price" />
        <input style={inputStyle} onChange={(e) => this.updateState(e, "quantity")} type="number" placeholder="Shopping Item Quantity" />
        <span>{currentTotal}</span>
        <button onClick={() => this.addToList()} style={buttonStyle}>Add!</button>
        <ShoppingList shoppinglist={this.state.shoppingList} />
      </div>
    );
  }
}

// const shoppinglistArr = [
//   {
//     label: "Eggs",
//     price: 1.99,
//     quantity: 1
//   },
//   {
//     label: "Coffee",
//     price: 8.99,
//     quantity: 5,
//   },
//   {
//     label: "chicken",
//     price: 5.99,
//     quantity: 10,
//   }
// ];

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);