Merge branch 'master' of https://github.com/Shift3/react-technical-project into order-form

Author: kmausolf

application/src/components/view-orders/viewOrders.css

@@ -0,0 +1,50 @@
+.view-order-container {
+    font-family: "Optima", serif;
+    min-height: 100px;
+    border-bottom: solid 1px #999;
+}
+
+.view-order-container p {
+    margin: 0;
+}
+
+.view-order-container button {
+    margin-left: 20px;
+}
+
+.view-order-left-col {
+    display: flex;
+    align-items: center;
+}
+
+.view-order-middle-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.view-order-right-col {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+@media only screen and (max-width: 768px) {
+    .view-order-left-col {
+        justify-content: center;
+    }
+
+    .view-order-middle-col {
+        margin-bottom: 20px;
+    }
+
+    .view-order-right-col {
+        padding-bottom: 20px;
+        justify-content: space-around;
+    }
+
+    .view-order-container button {
+        margin: 0;
+    }
+}

application/src/components/view-orders/viewOrders.js

@@ -3,9 +3,45 @@ import { Template } from '../../components';
 import './viewOrders.css';
 
 class ViewOrders extends Component {
+    state = {
+        orders: []
+    }
+
+    componentDidMount() {
+        fetch('http://localhost:4000/api/current-orders')
+            .then(response => response.json())
+            .then(response => {
+                if(response.success) {
+                    this.setState({ orders: response.orders });
+                } else {
+                    console.log('Error getting orders');
+                }
+            });
+    }
+
     render() {
         return (
             <Template>
+                <div className="container-fluid">
+                    {this.state.orders.map(order => {
+                        const createdDate = new Date(order.createdAt);
+                        return (
+                            <div className="row view-order-container" key={order._id}>
+                                <div className="col-md-4 view-order-left-col p-3">
+                                    <h2>{order.order_item}</h2>
+                                </div>
+                                <div className="col-md-4 d-flex view-order-middle-col">
+                                    <p>Order placed at {`${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`}</p>
+                                    <p>Quantity: {order.quantity}</p>
+                                 </div>
+                                 <div className="col-md-4 view-order-right-col">
+                                     <button className="btn btn-success">Edit</button>
+                                     <button className="btn btn-danger">Delete</button>
+                                 </div>
+                            </div>
+                        );
+                    })}
+                </div>
             </Template>
         );
     }