have JSON viewing for action & state working

Author: murphybrandon

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

src/app/package-lock.json

@@ -29,6 +29,7 @@
     "html-webpack-plugin": "^3.2.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
+    "react-json-view": "^1.19.1",
     "react-router-dom": "^4.3.1",
     "style-loader": "^0.23.1",
     "styled-components": "^4.1.3",

src/app/package.json

@@ -3,4 +3,7 @@ import styled from 'styled-components';
 export const DetailsWrapper = styled.div`
   padding-left: 10px;
   padding-top: 10px;
-`;
+  /* background-color: red; */
+  overflow: auto;
+  height: calc(100% - 45px)
+`;

src/app/styles/Details.jsx

@@ -33,21 +33,3 @@ export const EventTimeDiv = styled.div`
   color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
   border-radius: 5px;
 `;
-
-// wrapper for previous and next buttons
-export const PreviousNextWrapper = styled.div`
-  padding-top: 4%;
-  padding-bottom: 4%;
-  display: flex;
-  justify-content: space-evenly;
-`;
-
-// button for previous and next (copied from EventTimeDiv for trial)
-export const PrevNextButton = styled.div`
-  cursor: pointer;
-  width: 25%;
-  text-align: center;
-  background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"};
-  color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
-  border-radius: 5px;
-`;

src/app/styles/Events.jsx

@@ -28,9 +28,9 @@ export const LeftPane = styled.div`
 `;
 
 // wrapper for details (right hand side)
+// UPDATED
 export const RightPane = styled.div`
   color: white;
   background-color: #2A2E3A;
-  height: 100%;
   width: 57%;
 `;