Merge branch 'dev' of https://github.com/reactrewind/react-rewind into slide

Author: kiacolbert

package-lock.json

@@ -60,11 +60,6 @@ class App extends Component {
   }
 
   componentDidMount() {
-    // *******************************************************
-    // need to impletement setState for filteredData to same value as data
-    // this.setState({ data, filteredData: data });
-    // *******************************************************
-
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((portFromExtension) => {
@@ -79,11 +74,14 @@ class App extends Component {
         this.setState((state) => ({
           data: [...state.data, newData],
           filteredData: [...state.data, newData],
+          isPlayingIndex: state.data.length - 1,
         }));
       });
     });
   }
 
+
+
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
     if (this.state.isPlayingIndex > this.state.data.length - 1) {
@@ -200,6 +198,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
@@ -209,6 +221,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,
+      }));
+    }
   }
 
   render() {
@@ -265,4 +292,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>
       <>