refactor mainReducer to post name

Author: aquinojardim

src/app/components/Chart.jsx

@@ -23,14 +23,14 @@ class Chart extends Component {
 
   componentDidMount() {
     const { hierarchy } = this.props;
-    console.log('this is hierarchy on didMount chart', hierarchy)
+    // console.log('this is hierarchy on didMount chart', hierarchy)
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
 
   componentDidUpdate() {
     const { hierarchy } = this.props;
-    console.log('this is hierarchy on didUpdate chart', hierarchy)
+    // console.log('this is hierarchy on didUpdate chart', hierarchy)
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
@@ -52,7 +52,7 @@ class Chart extends Component {
     };
     const width = 600 - margin.right - margin.left;
     const height = 700 - margin.top - margin.bottom;
-    console.log('this is this.chartRef.current on chart', this.chartRef.current)
+    // console.log('this is this.chartRef.current on chart', this.chartRef.current)
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -145,7 +145,7 @@ class Chart extends Component {
       // this arranges the angle of the text
       .attr('transform', function (d) { return 'rotate(' + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 1 / Math.PI + ')'; })
       .text(function (d) {
-        console.log('this is d from text char line 148', d)
+        // console.log('this is d from text char line 148', d)
         // save d.data.index to variable
         // gabi and nate :: display the name of of specific patch
         return `${d.data.name}.${d.data.branch}`;

src/app/containers/ActionContainer.jsx

@@ -36,7 +36,7 @@ function ActionContainer() {
       }
     }    
     displayArray(hierarchy)
-    console.log('this is hierarchyArr', hierarchyArr)
+    // console.log('this is hierarchyArr', hierarchyArr)
 
     actionsArr = hierarchyArr.map((snapshot, index) => {
       const selected = index === viewIndex;

src/app/containers/MainContainer.jsx

@@ -13,20 +13,20 @@ import { useStoreContext } from '../store';
 function MainContainer() {
   const [store, dispatch] = useStoreContext();
   const { tabs, currentTab, port: currentPort } = store;
-  console.log('entered MainContainer');
+  // console.log('entered MainContainer');
 
   // add event listeners to background script
   useEffect(() => {
     // only open port once
     if (currentPort) return;
     // open connection with background script
-    console.log('opening connection with background script');
+    // console.log('opening connection with background script');
     const port = chrome.runtime.connect();
-    console.log('connection opened?');
+    // console.log('connection opened?');
 
     // listen for a message containing snapshots from the background script
     port.onMessage.addListener(message => {
-      console.log('this is message from port', message)
+      // console.log('this is message from port', message)
       const { action, payload, sourceTab } = message;
       switch (action) {
         case 'deleteTab': {

src/app/reducers/mainReducer.js

@@ -2,21 +2,44 @@
 import produce from 'immer';
 import * as types from '../constants/actionTypes';
 
+
 export default (state, action) => produce(state, draft => {
   const { port, currentTab, tabs } = draft;
   const {
-    snapshots, mode, intervalId, viewIndex, sliderIndex,
+    hierarchy, snapshots, mode, intervalId, viewIndex, sliderIndex,
   } = tabs[currentTab] || {};
+  
+  
+  // gabi and nate :: function that find the index in the hiearachy and extract the name of the equivalent index to add to the post message
+    const findName = (index, hierarchy) => {
+      if(hierarchy.index == index){
+        return hierarchy.name;
+      }
+      else {
+        const hierarchyChildArray = [];
+        for (let hierarchyChild of hierarchy.children){
+          hierarchyChildArray.push(findName(index, hierarchyChild));
+        }
+        for (let hierarchyChildName of hierarchyChildArray){
+          if(hierarchyChildName){
+            return hierarchyChildName
+          }
+        }
+      } 
+    }
 
   switch (action.type) {
     case types.MOVE_BACKWARD: {
       if (snapshots.length > 0 && sliderIndex > 0) {
         const newIndex = sliderIndex - 1;
+        // gabi and nate :: find the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
+        const nameFromIndex = findName(newIndex, hierarchy)
 
         port.postMessage({
           action: 'jumpToSnap',
           payload: snapshots[newIndex],
           index: newIndex,
+          name: nameFromIndex,
           tabId: currentTab,
         });
         clearInterval(intervalId);
@@ -29,10 +52,13 @@ export default (state, action) => produce(state, draft => {
     case types.MOVE_FORWARD: {
       if (sliderIndex < snapshots.length - 1) {
         const newIndex = sliderIndex + 1;
+        // gabi and nate :: find the name by the newIndex parsing through the hierarchy to send to background.js the current name in the jump action
+        const nameFromIndex = findName(newIndex, hierarchy)
 
         port.postMessage({
           action: 'jumpToSnap',
           index: newIndex,
+          name: nameFromIndex,
           payload: snapshots[newIndex],
           tabId: currentTab,
         });
@@ -48,9 +74,11 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.SLIDER_ZERO: {
+      // gabi and nate :: reset name to 0 to send to background.js the current name in the jump action
       port.postMessage({
         action: 'jumpToSnap',
         index: 0,
+        name: 0,
         payload: snapshots[0],
         tabId: currentTab,
       });
@@ -64,10 +92,14 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.CHANGE_SLIDER: {
+      // gabi and nate :: finds the name by the action.payload, parsing through the hierarchy to send to background.js the current name in the jump action
+      const nameFromIndex = findName(action.payload, hierarchy)
+
       port.postMessage({
         action: 'jumpToSnap',
         payload: snapshots[action.payload],
         index: action.payload,
+        name: nameFromIndex,
         tabId: currentTab,
       });
       tabs[currentTab].sliderIndex = action.payload;
@@ -85,6 +117,10 @@ export default (state, action) => produce(state, draft => {
       tabs[currentTab].currLocation = tabs[currentTab].hierarchy;
       // reset index
       tabs[currentTab].index = 0;
+      // gabi and nate :: reset name
+      tabs[currentTab].name = 0;
+      // gabi and nate :: reset branch
+      tabs[currentTab].branch = 0;
       break;
     }
     case types.SET_PORT: {
@@ -168,7 +204,7 @@ export default (state, action) => produce(state, draft => {
       break;
     }
     case types.SET_TAB: {
-      console.log('this is action.payload', action.payload)
+      // console.log('this is SET_TAB action.payload', action.payload)
       if (typeof action.payload === 'number') {
         draft.currentTab = action.payload;
         break;

src/extension/background.js

@@ -69,13 +69,13 @@ function sendToHierarchy(tabObj, newNode) {
   }
 }
 
-function changeCurrLocation(tabObj, rootNode, index) {
+function changeCurrLocation(tabObj, rootNode, index, name) {
   // gabi and nate :: index comes from the app's main reducer to locate the right current location on tabObj 
   // check if current node has the index wanted
   if (rootNode.index === index) { 
     tabObj.currLocation = rootNode;
     // gabi and nate :: index of current location from where the next node will be a child
-    tabObj.currParent = index;
+    tabObj.currParent = name;
     return;
   }
   // base case if no children
@@ -85,7 +85,7 @@ function changeCurrLocation(tabObj, rootNode, index) {
   }
   if (rootNode.children) {
     rootNode.children.forEach(child => {
-      changeCurrLocation(tabObj, child, index);
+      changeCurrLocation(tabObj, child, index, name);
     });
   }
 }
@@ -139,7 +139,11 @@ chrome.runtime.onConnect.addListener(port => {
         // reassigning pointer to the appropriate node to branch off of
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
         // reset index
-        tabsObj[tabId].index = 1;
+        tabsObj[tabId].index = 0;
+        // reset name
+        tabs[currentTab].name = 0;
+        // reset branch
+        tabs[currentTab].branch = 0;
         return true;
       case 'setLock':
         tabsObj[tabId].mode.locked = payload;
@@ -164,7 +168,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   if (request.type === 'SIGN_CONNECT') return true;
   const tabTitle = sender.tab.title;
   const tabId = sender.tab.id;
-  const { action, index } = request;
+  const { action, index, name } = request;
   let isReactTimeTravel = false;
 
   // Filter out tabs that don't have reactime
@@ -188,7 +192,7 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       // console.log('this tabsObj[tabId] sent to changeCurrLocation', tabsObj[tabId])
       // console.log('this tabsObj[tabId].hierarchy sent to changeCurrLocation', tabsObj[tabId].hierarchy)
       // console.log('this index sent to changeCurrLocation', index)
-      changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index);
+      changeCurrLocation(tabsObj[tabId], tabsObj[tabId].hierarchy, index, name);
       break;
     }
     // this case causes d3 graph to display 1 instead of 0
@@ -199,13 +203,18 @@ chrome.runtime.onMessage.addListener((request, sender) => {
       if (!persist) {
         tabsObj[tabId].snapshots.splice(1);
         // reset children in root node to reset graph
-        // if (tabsObj[tabId].hierarchy)
         if (tabsObj[tabId].hierarchy)
           tabsObj[tabId].hierarchy.children = [];
         // reassigning pointer to the appropriate node to branch off of
+        // tabsObj[tabId].hierarchy = null;
         tabsObj[tabId].currLocation = tabsObj[tabId].hierarchy;
+        // tabsObj[tabId].currLocation = null;
         // reset index
-        tabsObj[tabId].index = 1;
+        tabsObj[tabId].index = 0;
+        // reset currParent
+        tabsObj[tabId].currParent = 0;
+        // reset currBranch
+        tabsObj[tabId].currBranch = 0;
 
         // send a message to devtools
         portsArr.forEach(bg =>