diff --git a/client/src/Utils.js b/client/src/Utils.js index 0552428..9bd9918 100644 --- a/client/src/Utils.js +++ b/client/src/Utils.js @@ -1,13 +1,18 @@ -export default function debounce(func, wait) { - let timeout = null; - return function() { - const ctx = this; - const args = arguments; - const later = function() { - timeout = null; - func.apply(ctx, args); +export default class Utils { + static debounce(func, wait) { + let timeout = null; + return function() { + const ctx = this; + const args = arguments; + const later = function() { + timeout = null; + func.apply(ctx, args); + } + clearTimeout(timeout); + timeout = setTimeout(later, wait || 200); } - clearTimeout(timeout); - timeout = setTimeout(later, wait || 200); + } + static dateToHumanReadableString(iso8601) { + return new Date(iso8601).toString(); } } \ No newline at end of file diff --git a/client/src/components/Customer.js b/client/src/components/Customer.js new file mode 100644 index 0000000..ee42da1 --- /dev/null +++ b/client/src/components/Customer.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + +export default class Customer extends Component { + render(){ + const customer = this.props.customer; + return ( +
+
+
Reference
+
{customer.reference}
+
Company Name
+
{customer.company_name}
+
Address
+
{customer.address}
+
Telephone
+
{customer.telephone}
+
Email
+
{customer.email}
+
Contact Name
+
{customer.contact_name}
+
Contact Surname
+
{customer.contact_surname}
+
+
+ ); + } +} + +Customer.propTypes = { + customer: PropTypes.object.isRequired, +}; \ No newline at end of file diff --git a/client/src/components/OrderList.js b/client/src/components/OrderList.js index 0cbbd33..475f503 100644 --- a/client/src/components/OrderList.js +++ b/client/src/components/OrderList.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; -import { Table } from 'react-bootstrap'; +import { Table, Alert } from 'react-bootstrap'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import { RoutesHelper } from '../Routes'; +import Utils from '../Utils.js'; export default class OrderList extends Component { render() { @@ -18,20 +19,27 @@ export default class OrderList extends Component { return ( {value.id} - {value.created_at} - {value.updated_at} + {Utils.dateToHumanReadableString(value.created_at)} + {Utils.dateToHumanReadableString(value.updated_at)} Show ); }); - return ( + const table = ( {header}{body}
); + const dialog = ( + + Eeeeey! There are no orders yet. + + ); + const display = this.props.list.length === 0 ? dialog : table; + return display; } } diff --git a/client/src/components/OrderShow.js b/client/src/components/OrderShow.js index a0a249a..da6831c 100644 --- a/client/src/components/OrderShow.js +++ b/client/src/components/OrderShow.js @@ -1,5 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import Customer from './Customer'; +import Utils from '../Utils.js'; import { Row, Col } from 'react-bootstrap'; import { Panel } from 'react-bootstrap'; @@ -7,34 +9,19 @@ export default class OrderShow extends Component { render() { const title = (

Order {this.props.order.id}

); const order = this.props.order; - const customer = this.props.order.customer; return (
-
Created At:
-
{order.created_at}
-
Updated At:
-
{order.updated_at}
+
Created At
+
{Utils.dateToHumanReadableString(order.created_at)}
+
Updated At
+
{Utils.dateToHumanReadableString(order.updated_at)}
- - -

Customer

- -
- - -
-
-
Reference
-
{customer.reference}
-
-
- -
+
diff --git a/client/src/containers/OrderContainer.js b/client/src/containers/OrderContainer.js index 775abb8..34c1d79 100644 --- a/client/src/containers/OrderContainer.js +++ b/client/src/containers/OrderContainer.js @@ -6,7 +6,7 @@ import FeatureValueService from '../services/FeatureValueService'; import OrderShow from '../components/OrderShow'; import Create from '../components/OrderItem/Create'; import List from '../components/OrderItem/List'; -import debounce from '../Utils'; +import Utils from '../Utils'; import { Grid, Row, Col } from 'react-bootstrap'; export default class OrderContainer extends Component { @@ -14,8 +14,8 @@ export default class OrderContainer extends Component { super(props); this.state = { order: null, products:null }; this.addOrderItem = this.addOrderItem.bind(this); - this.onChangeFeatureValue = debounce(this.onChangeFeatureValue.bind(this), 1000); - this.onChangeOrderItemQuantity = debounce(this.onChangeOrderItemQuantity.bind(this), 1000); + this.onChangeFeatureValue = Utils.debounce(this.onChangeFeatureValue.bind(this), 1000); + this.onChangeOrderItemQuantity = Utils.debounce(this.onChangeOrderItemQuantity.bind(this), 1000); } addOrderItem(product_id) { OrderItemService.create(this.state.order.id, product_id)