From 6291b9e31c892a30293464785b23e8b7c0818ecc Mon Sep 17 00:00:00 2001
From: Liam Kennedy <liamkennedy89@hotmail.com>
Date: Thu, 10 Sep 2015 18:10:49 +0100
Subject: [PATCH 1/2] added JSONDateNode to display Date values

---
 examples/src/App.js |  2 ++
 src/JSONDateNode.js | 39 +++++++++++++++++++++++++++++++++++++++
 src/grab-node.js    |  6 ++++--
 3 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/JSONDateNode.js

diff --git a/examples/src/App.js b/examples/src/App.js
index 63e068e..3bc5f26 100755
--- a/examples/src/App.js
+++ b/examples/src/App.js
@@ -8,6 +8,7 @@ export default class App extends Component {
     const data = {
       array: [1, 2, 3],
       bool: true,
+      date: Date(),
       object: {
         foo: 'bar'
       },
@@ -33,6 +34,7 @@ export default class App extends Component {
       base0D: '#66d9ef',
       base0E: '#ae81ff',
       base0F: '#cc6633'
+      
     };
 
     return (
diff --git a/src/JSONDateNode.js b/src/JSONDateNode.js
new file mode 100644
index 0000000..6670a2b
--- /dev/null
+++ b/src/JSONDateNode.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import reactMixin from 'react-mixin';
+import { SquashClickEventMixin } from './mixins';
+import hexToRgb from './utils/hexToRgb';
+
+const styles = {
+  base: {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingRight: 0,
+    marginLeft: 14
+  },
+  label: {
+    display: 'inline-block',
+    marginRight: 5
+  }
+};
+
+@reactMixin.decorate(SquashClickEventMixin)
+export default class JSONDateNode extends React.Component {
+  render() {
+    let backgroundColor = 'transparent';
+    if (this.props.previousValue !== this.props.value) {
+      const bgColor = hexToRgb(this.props.theme.base06);
+      backgroundColor = `rgba(${bgColor.r}, ${bgColor.g}, ${bgColor.b}, 0.1)`;
+    }
+    return (
+      <li style={{ ...styles.base, backgroundColor }} onClick={::this.handleClick}>
+        <label style={{
+          ...styles.label,
+          color: this.props.theme.base0D
+        }}>
+          {this.props.keyName}:
+        </label>
+        <span style={{ color: this.props.theme.base0B }}>"{this.props.value}"</span>
+      </li>
+    );
+  }
+}
diff --git a/src/grab-node.js b/src/grab-node.js
index a7a01f1..b0fed21 100644
--- a/src/grab-node.js
+++ b/src/grab-node.js
@@ -22,8 +22,10 @@ export default function(key, value, prevValue, theme, initialExpanded = false) {
     return <JSONNumberNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
   } else if (nodeType === 'Boolean') {
     return <JSONBooleanNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
-  } else if (nodeType === 'Null') {
+  } else if (nodeType === 'Date') {
     return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
-  }
+  }else if (nodeType === 'Null') {
+    return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
+  } 
   return false;
 }

From e7cb028ba54d68012bc1b9e250a04dd45bba06db Mon Sep 17 00:00:00 2001
From: Liam Kennedy <liamkennedy89@hotmail.com>
Date: Thu, 10 Sep 2015 23:19:06 +0100
Subject: [PATCH 2/2] correcting errors

---
 examples/src/App.js | 2 +-
 src/JSONDateNode.js | 2 +-
 src/grab-node.js    | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/src/App.js b/examples/src/App.js
index 3bc5f26..aa7bbad 100755
--- a/examples/src/App.js
+++ b/examples/src/App.js
@@ -8,7 +8,7 @@ export default class App extends Component {
     const data = {
       array: [1, 2, 3],
       bool: true,
-      date: Date(),
+      date: new Date(),
       object: {
         foo: 'bar'
       },
diff --git a/src/JSONDateNode.js b/src/JSONDateNode.js
index 6670a2b..9fe8c47 100644
--- a/src/JSONDateNode.js
+++ b/src/JSONDateNode.js
@@ -32,7 +32,7 @@ export default class JSONDateNode extends React.Component {
         }}>
           {this.props.keyName}:
         </label>
-        <span style={{ color: this.props.theme.base0B }}>"{this.props.value}"</span>
+        <span style={{ color: this.props.theme.base0B }}>{this.props.value.toISOString()}</span>
       </li>
     );
   }
diff --git a/src/grab-node.js b/src/grab-node.js
index b0fed21..c6a1d1a 100644
--- a/src/grab-node.js
+++ b/src/grab-node.js
@@ -7,6 +7,7 @@ import JSONStringNode from './JSONStringNode';
 import JSONNumberNode from './JSONNumberNode';
 import JSONBooleanNode from './JSONBooleanNode';
 import JSONNullNode from './JSONNullNode';
+import JSONDateNode from './JSONDateNode';
 
 export default function(key, value, prevValue, theme, initialExpanded = false) {
   const nodeType = objType(value);
@@ -23,7 +24,7 @@ export default function(key, value, prevValue, theme, initialExpanded = false) {
   } else if (nodeType === 'Boolean') {
     return <JSONBooleanNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
   } else if (nodeType === 'Date') {
-    return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
+    return <JSONDateNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
   }else if (nodeType === 'Null') {
     return <JSONNullNode keyName={key} previousValue={prevValue} theme={theme} value={value} key={key} />;
   }