Formatted dates to human readable. #23

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

client/src/components/OrderList.js

@@ -3,6 +3,7 @@ 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,8 +19,8 @@ export default class OrderList extends Component {
 			return (
 				<tr key={value.id}>
 					<td>{value.id}</td>
-					<td>{value.created_at}</td>
-					<td>{value.updated_at}</td>	
+					<td>{Utils.dateToHumanReadableString(value.created_at)}</td>
+					<td>{Utils.dateToHumanReadableString(value.updated_at)}</td>	
 					<td>
 						<Link to={RoutesHelper.order_path(`${value.id}`)}>Show</Link>
 					</td>

client/src/components/OrderShow.js

@@ -1,6 +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';
 
@@ -14,9 +15,9 @@ export default class OrderShow extends Component {
 					<Col xs={6}>
 						<dl className="dl-horizontal">
 			  				<dt>Created At</dt>
-			  				<dd>{order.created_at}</dd>
+			  				<dd>{Utils.dateToHumanReadableString(order.created_at)}</dd>
 			  				<dt>Updated At</dt>
-			  				<dd>{order.updated_at}</dd>
+			  				<dd>{Utils.dateToHumanReadableString(order.updated_at)}</dd>
 						</dl>
 					</Col>
 					<Col xs={6}>

client/src/containers/OrderContainer.js

@@ -6,16 +6,16 @@ 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 {
 	constructor(props) {
 		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)