implemented props correctly, improved state management, added undefined, updated tests

Author: mac-s-g

example/example.js

@@ -45,7 +45,7 @@ ReactDom.render(
         <br />
 
         {/*demo array support*/}
-        <JsonViewer src={getExampleArray()} />
+        <JsonViewer src={getExampleArray()} theme='solarized' />
     </div>,
     document.getElementById('app-container')
 );
@@ -61,6 +61,7 @@ function getExampleJson1() {
         another_sibling: 42,
         how_will_array_do: [1, 2, 3, 'test'],
         how_will_floats_do: -2.757,
+        undefined_var: undefined,
         parent: {
             sibling1: true,
             sibling2: false,

src/js/components/DataTypes/DataTypeLabel.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import ConfigStore from './../../stores/ConfigStore';
 
 //theme
 import Theme from './../../themes/getStyle';
 
 export default class extends React.Component {
 
     render() {
-        const {rjvId, type_name, theme} = this.props;
-        if (ConfigStore.get(rjvId, 'displayDataTypes', true)) {
+        const {rjvId, type_name, displayDataTypes, theme} = this.props;
+        if (displayDataTypes) {
             return (
                 <span class="data-type-label"
                 {...Theme(theme, 'data-type-label')}>

src/js/components/DataTypes/DataTypes.js

@@ -5,4 +5,5 @@ export {default as JsonNan} from './Nan';
 export {default as JsonNull} from './Null';
 export {default as JsonInteger} from './Integer';
 export {default as JsonObject} from './Object';
-export {default as JsonString} from './String';
+export {default as JsonString} from './String';
+export {default as JsonUndefined} from './Undefined';

src/js/components/DataTypes/Nan.js

@@ -6,7 +6,6 @@ import Theme from './../../themes/getStyle';
 export default class extends React.Component {
 
     render() {
-        const type_name = 'nan';
         return (
         <div {...Theme(this.props.theme, 'nan')}>
             NaN

src/js/components/DataTypes/Null.js

@@ -6,7 +6,6 @@ import Theme from './../../themes/getStyle';
 export default class extends React.Component {
 
     render() {
-        const type_name = 'null';
         return (
         <div {...Theme(this.props.theme, 'null')}>
             NULL

src/js/components/DataTypes/Object.js

@@ -3,7 +3,7 @@ import React from "react";
 import {toType} from './../../helpers/util';
 import {
     JsonBoolean, JsonFloat, JsonFunction, JsonInteger,
-    JsonNan, JsonNull, JsonObject, JsonString
+    JsonNan, JsonNull, JsonObject, JsonString, JsonUndefined
 } from './DataTypes';
 import VariableMeta from './../VariableMeta';
 
@@ -29,34 +29,47 @@ class rjvObject extends React.Component {
 
     constructor(props) {
         super(props);
+        this.init(props);
+    }
 
-        this.state.expanded = AttributeStore.get(
-            this.state.rjvId,
-            this.state.state_key,
-            'expanded',
-            !this.props.collapsed
-        );
+    state = {}
+
+    init = (props) => {
+        const state = {
+            rjvId: props.rjvId,
+            state_key: props.namespace.join('.'),
+            namespace: props.namespace,
+            indentWidth: props.indentWidth,
+            expanded: props.jsvRoot
+                ? !props.collapsed
+                : AttributeStore.get(
+                    props.rjvId,
+                    props.namespace,
+                    'expanded',
+                    !props.collapsed
+                ),
+            object_type: (props.type == 'array' ? 'array' : 'object'),
+            parent_type: (props.type == 'array' ? 'array' : 'object'),
+            display_name: (props.name ? props.name : '')
+        }
+
+        this.state = {...this.state, ...state};
     }
 
-    state = {
-        rjvId: this.props.rjvId,
-        state_key: this.props.namespace.join('.'),
-        namespace: this.props.namespace,
-        indentWidth: this.props.indentWidth,
-        expanded: null, //set in constructor
-        object_type: (this.props.type == 'array' ? 'array' : 'object'),
-        parent_type: (this.props.type == 'array' ? 'array' : 'object'),
-        display_name: (this.props.name ? this.props.name : '')
+    componentWillReceiveProps(nextProps) {
+        this.init(nextProps);
+        this.setState(this.state);
     }
 
     toggleCollapsed = () => {
         this.state.expanded = !this.state.expanded;
         AttributeStore.set(
             this.state.rjvId,
-            this.state.state_key,
+            this.state.namespace,
             'expanded',
             this.state.expanded
         );
+
         this.setState(this.state);
     }
 
@@ -81,9 +94,8 @@ class rjvObject extends React.Component {
     getObjectMetaData = (src) => {
         const size = Object.keys(src).length;
         const {rjvId, theme} = this.props;
-        const props = {size, rjvId, theme, src};
         return (
-            <VariableMeta {...props}/>
+            <VariableMeta size={size} {...this.props}/>
         );
     }
 
@@ -98,6 +110,7 @@ class rjvObject extends React.Component {
         const {
             object_type, display_name, expanded
         } = this.state;
+
         //expanded/collapsed icon
         let expanded_icon, object_padding_left = 0;
 
@@ -124,7 +137,9 @@ class rjvObject extends React.Component {
             )}>
             <span>
                 <span onClick={this.toggleCollapsed} {...Theme(theme, 'brace-row')}>
-                    <span class="icon-container">{expanded_icon}</span>
+                    <div class="icon-container" {...Theme(theme, 'icon-container')}>
+                        {expanded_icon}
+                    </div>
                     {
                     parent_type == 'array'
                     ? <span {...Theme(theme, 'array-key')} key={namespace}>
@@ -231,6 +246,8 @@ class rjvObject extends React.Component {
                     return <JsonNull {...props} />;
                 case 'nan':
                     return <JsonNan {...props} />;
+                case 'undefined':
+                    return <JsonUndefined {...props} />;
                 default:
                     //catch-all for types that weren't anticipated
                     return <div class="object-value" {...props} >

src/js/components/DataTypes/Undefined.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+//theme
+import Theme from './../../themes/getStyle';
+
+export default class extends React.Component {
+
+    render() {
+        return (
+        <div {...Theme(this.props.theme, 'undefined')}>
+            undefined
+        </div>
+        );
+    }
+
+}

src/js/components/VariableMeta.js

@@ -6,8 +6,6 @@ import Clippy from 'react-icons/lib/go/clippy';
 //https://www.npmjs.com/package/clipboard
 import Clipboard from 'clipboard';
 import ReactTooltip from 'react-tooltip';
-//app config key-val storage
-import ConfigStore from './../stores/ConfigStore';
 
 //theme
 import Theme from './../themes/getStyle';
@@ -22,13 +20,7 @@ export default class extends React.Component {
     state = {
         id: null,
         clipboard: null,
-        copy_state: null,
-        display_clipboard: ConfigStore.get(
-            this.props.rjvId, 'enableClipboard', true
-        ),
-        display_size: ConfigStore.get(
-            this.props.rjvId, 'displayObjectSize', true
-        ),
+        copy_state: null
     }
 
     componentDidMount = () => {
@@ -70,7 +62,7 @@ export default class extends React.Component {
             <span
             class="copy-to-clipboard-container"
             style={{
-                display: this.state.display_clipboard ? 'inline-block' : 'none'
+                display: this.props.enableClipboard ? 'inline-block' : 'none'
             }}>
                 <span
                 style={{
@@ -116,7 +108,7 @@ export default class extends React.Component {
     }
 
     getObjectSize = (size) => {
-        if (this.state.display_size) {
+        if (this.props.displayObjectSize) {
             return (
                 <span class="object-size"
                 {...Theme(this.props.theme, 'object-size')}>

src/js/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import JsonViewer from './components/JsonViewer';
 import {toType} from './helpers/util';
-//config key-val store
-import ConfigStore from './stores/ConfigStore'
 
 //global theme
 import style from './themes/getStyle';
@@ -34,12 +32,11 @@ export default class extends React.Component {
 
     init = (props) => {
         for (let i in this.defaults) {
-            if (this.props[i] !== undefined) {
-                this.state[i] = this.props[i];
+            if (props[i] !== undefined) {
+                this.state[i] = props[i];
             } else {
                 this.state[i] = this.defaults[i];
             }
-            ConfigStore.set(this.rjvId, i, this.state[i]);
         }
 
         //make sure `src` prop is valid
@@ -63,7 +60,7 @@ export default class extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        this.init(this.props);
+        this.init(nextProps);
         this.setState(this.state);
     }