Merge pull request #17 from reactrewind/dev

Merging from dev

Author: victorvrv

package-lock.json

@@ -93,6 +93,8 @@ class App extends Component {
     });
   }
 
+
+
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
     if (this.state.isPlayingIndex > this.state.data.length - 1) {
@@ -183,15 +185,23 @@ class App extends Component {
 
   // time travel bar change
   handleBarChange(e) {
-    const { data } = this.state;
+    const { data, isPlayingIndex } = this.state;
     const { id, action, state } = data[e.target.value];
-
+    // forward or past
+    const currentIsPlayingIndex = e.target.value;
+    const forward = currentIsPlayingIndex > isPlayingIndex;
     this.setState({
       id,
       action,
       state,
-      isPlayingIndex: parseInt(e.target.value),
+      isPlayingIndex: parseInt(currentIsPlayingIndex),
     });
+    // Displays to screen
+    if (forward) {
+      this.toTheFuture();
+    } else {
+      this.toThePast();
+    }
   }
 
   // function to travel to the FUTURE
@@ -201,6 +211,20 @@ class App extends Component {
       type: 'TIMETRAVEL',
       direction: 'forward',
     });
+
+    // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
+
+    const { data, isPlayingIndex } = this.state;
+    const { id, action, state } = data[isPlayingIndex + 1];
+    this.setState(prev => ({
+      ...prev,
+      id,
+      action,
+      state,
+      isPlayingIndex: isPlayingIndex + 1,
+    }));
+
+    console.log('isPlayingIndex', this.state.isPlayingIndex);
   }
 
   // function to travel to the PAST
@@ -210,6 +234,21 @@ class App extends Component {
       type: 'TIMETRAVEL',
       direction: 'backwards',
     });
+
+    const { data, isPlayingIndex } = this.state;
+
+    if (isPlayingIndex === 0) { 
+      console.log('is playingIdx in toThePast is 0');
+    } else {
+      const { id, action, state } = data[isPlayingIndex - 1];
+      this.setState(prev => ({
+        ...prev,
+        id,
+        action,
+        state,
+        isPlayingIndex: isPlayingIndex - 1,
+      }));
+    }
   }
 
   resetApp() {
@@ -277,4 +316,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default App;

src/app/components/App.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/Actions/ActionsDisplay.jsx

@@ -1,8 +1,23 @@
 import React from 'react';
 import { DetailsWrapper } from '../../../styles/Details.jsx';
+import ReactJson from 'react-json-view';
+// functionality
+// gets difference from previous state to new state
+import stateDifference from '../../stateDifference.jsx';
+
 
 export default function Effects(props) {
+  console.log('state differnce in effects display IMPORT', stateDifference);
+  const differenceOfPrevAndNextState = stateDifference([1,2,3], [2,4, 9, 11, {'wow': 1}])
   return (
-    <DetailsWrapper>effects display page</DetailsWrapper>
+    <DetailsWrapper>
+      <ReactJson
+        theme={'threezerotwofour'}
+        style={{ backgroundColor: 'transparent', height: '-webkit-fill-available' }}
+        displayDataTypes={false}
+        src={differenceOfPrevAndNextState}
+      />
+    </DetailsWrapper>
+    
   );
 }

src/app/components/DetailCards/Effects/EffectsDisplay.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/StateCard.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/components/DetailCards/State/StateDisplay.jsx

@@ -0,0 +1,39 @@
+
+function stateDifference(old, curr) {
+  
+    if(typeof(old) === "string" && typeof(curr) === "string") {
+      if(old === curr) return false;
+      return curr;
+    }
+    else if(typeof(old) === "number" && typeof(curr) === "number") {
+       if( old === curr) return false;
+       return curr;
+    }
+    else if(typeof(old) !== typeof(curr)) {
+      return curr;
+    }
+    else if(Array.isArray(old) && Array.isArray(curr)) {
+      let newArr = [];
+      for ( let i = 0; i < curr.length; i++){
+        if(!old.includes(curr[i])){
+          let result = stateDifference(old[i], curr[i])
+          if (result) {
+            newArr.push(result)
+          }
+        }
+      } 
+      return newArr.length > 0 ? newArr : false;
+    }
+    else if(typeof(old) === "object" && typeof(curr) === "object") {
+      let newObj = {}
+      for ( let prop in curr) {
+        result = stateDifference(old[prop], curr[prop])
+        if (result){
+          newObj[prop] = result
+        }
+      }
+      return Object.keys(newObj).length === 0 ? false : newObj
+    }
+  }
+
+  export default stateDifference;

src/app/components/stateDifference.jsx

@@ -21,6 +21,7 @@ export default function Details(props) {
     action, id, actionState,
   } = props;
 
+  
   return (
     <Router>
       <>