Adding JSON viewing

src/app/components/App.jsx

@@ -257,4 +257,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactJson from 'react-json-view';
 
 //styled components
 import { DetailsWrapper } from '../../../styles/Details.jsx';
@@ -8,11 +9,12 @@ export default function Actions(props) {
   const { action } = props;
   return (
     <DetailsWrapper>
-      action:
-      {(action && action.type) || 'select an event'}
-      <br></br>
-      payload:
-      {(action && action.payload) || 'select an event'}
+      {<ReactJson
+        theme={'threezerotwofour'}
+        style={{ backgroundColor: 'transparent' }}
+        displayDataTypes={false}
+        src={action}
+      /> || 'select an event'}
     </DetailsWrapper>
   );
 }

src/app/components/DetailCards/State/StateCard.jsx

@@ -1,11 +1,18 @@
 import React from 'react';
+import ReactJson from 'react-json-view';
 
 export default function EffectCard(props) {
   // renders the data to show
-  const { stringData } = props;
+  const { actionState } = props;
+
   return (
     <div>
-      { stringData || 'select an event'}
+      <ReactJson
+        theme={'threezerotwofour'}
+        style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
+        displayDataTypes={false}
+        src={actionState}
+      />
     </div>
   );
 }

src/app/components/DetailCards/State/StateDisplay.jsx

@@ -7,11 +7,9 @@ import { DetailsWrapper } from '../../../styles/Details.jsx';
 export default function State(props) {
   // stringifying data to pass down to StateCard to display
   const { actionState } = props;
-  const stringData = JSON.stringify(actionState, null, '\t');
-
   return (
     <DetailsWrapper>
-      {<StateCard stringData={stringData} />}
+        {<StateCard actionState={actionState} />}
     </DetailsWrapper>
   );
 }