reformatted tree with labels and added props validation

Author: rydang

src/app/components/Tree.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
+import PropTypes from 'prop-types';
 
 const getItemString = (type, data, itemType, itemString) => (
   <span>
-    {/* //
-    {type} */}
+    {data.name}
   </span>
 );
 
 const Tree = (props) => {
   const { snapshot } = props;
-  console.log('TREE COMPONENT IS PRINTED');
-  console.log(snapshot);
   return (
     <React.Fragment>
       {snapshot && (
@@ -20,11 +18,26 @@ const Tree = (props) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          // labelRenderer={raw => <strong>{raw}</strong>}
-          // valueRenderer={raw => <em>{raw}</em>}
+          labelRenderer={(raw) => {
+            if (typeof raw[0] !== 'number') return <span>{raw[0]}</span>;
+          }}
         />
       )}
     </React.Fragment>
   );
 };
+
+Tree.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]),
+    children: PropTypes.arrayOf(
+      PropTypes.object,
+    ),
+    name: PropTypes.string,
+  }).isRequired,
+};
+
 export default Tree;

src/app/containers/TravelContainer.jsx

@@ -15,7 +15,7 @@ const TravelContainer = ({
 }) => (
   <div className="travel-container">
     <div className="play-button" onClick={play}>
-      { playing ? 'Pause': 'Play' }
+      {playing ? 'Pause' : 'Play'}
     </div>
     <MainSlider
       snapshotLength={snapshotsLength}
@@ -34,13 +34,14 @@ const TravelContainer = ({
 );
 
 TravelContainer.propTypes = {
-  pause: PropTypes.func.isRequried,
+  pause: PropTypes.func.isRequired,
   play: PropTypes.func.isRequired,
   moveBackward: PropTypes.func.isRequired,
   moveForward: PropTypes.func.isRequired,
   snapshotsLength: PropTypes.number.isRequired,
   handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,
   snapshotIndex: PropTypes.number.isRequired,
+  playing: PropTypes.bool.isRequired,
 };
 export default TravelContainer;