Merge pull request #7 from oslabs-beta/pseudocoding

Added psuedocoding to improve future developer experience

Author: robmaeda

src/app/components/History.tsx

@@ -1,13 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 // @ts-nocheck
 import React, { Component, useEffect, useState } from 'react';
+// ReactHover does not refer to individual nodes within the history tab but rather can only wrap the entire SVG div
 import ReactHover, { Trigger, Hover } from 'react-hover';
+// used in action.tsx to format the return data of findDiff into a react component, not needed since the return of findDiff in History.tsx is simple a divs html
 import ReactHtmlParser from 'react-html-parser';
+// formatting findDiff return data to show the changes with green and red background colors, aligns with actions.tsx 
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
+// legend key taken out before ReactimeX(v 10.0)
 import LegendKey from './legend';
 import { changeView, changeSlider } from '../actions/actions';
 
+//unused function definition, didnt break reactime when commented out
 const filterHooks = (data: any[]) => {
   if (data[0].children && data[0].state === 'stateless') {
     return filterHooks(data[0].children);
@@ -29,6 +34,7 @@ function History(props: Record<string, unknown>) {
     hierarchy,
     dispatch,
     currLocation,
+    //snapshots array passed down from state route, needed for findDiff function
     snapshots,
   } = props;
 
@@ -106,17 +112,21 @@ function History(props: Record<string, unknown>) {
         dispatch(changeView(d.data.index));
         dispatch(changeSlider(d.data.index));
       })
+      //added to display state change information to node tree
       .on('mouseover', d => {
+        // created popup div and appended it to display div(returned in this function)
+        // D3 doesn't utilize z-index for priority, rather decides on placement by order of rendering
+        // needed to define the return div with a className to have a target to append to with the correct level of priority
         const div = d3.select('.display').append('div')
           .attr('class', 'tooltip')
           .style('opacity', 1)
           .style('left', (d3.event.pageX) + 'px')
           .style('top', (d3.event.pageY) + 'px')
-          // .text(JSON.stringify(findDiff(d.data.index)));
-          // .html(findDiff(d.data.index));
         d3.selectAll('.tooltip').html(findDiff(d.data.index));
       })
       .on('mouseout', d => {
+        // when appending divs on mouseover the appended dives would not disappear when using D3's 'transition' on mouseover/mouseout
+        // solution: remove all tooltop divs on mouseout
         d3.selectAll('.tooltip').remove();
       })
       .attr('transform', d => `translate(${d.x},${d.y})`);
@@ -140,7 +150,7 @@ function History(props: Record<string, unknown>) {
     return svg.node();
   };
 
-  // finding difference
+  // findDiff function uses same logic as ActionContainer.tsx
   function findDiff(index) {
     const statelessCleanning = (obj: {
       name?: string;
@@ -178,24 +188,17 @@ function History(props: Record<string, unknown>) {
           );
         }
       }
-      // nathan test
       return newObj;
     };
-    // displays stateful data
 
     const previousDisplay = statelessCleanning(snapshots[index - 1]);
     const delta = diff(previousDisplay, snapshots[index]);
     const changedState = findStateChangeObj(delta);
-    // took out the formatting for History.tsx nodes, Rob 11/4
+    // figured out the formatting for hover, applying diff.csss
     const html = formatters.html.format(changedState[0]);
+    // uneeded, not returning a react component in SVG div
     // const output = ReactHtmlParser(html);
     return html;
-
-    // if (changedState[0][0] !== 'root') {
-    //   delete changedState[0]['hooksState']['_t'];
-    // }
-
-    // return changedState[0];
   }
 
   function findStateChangeObj(delta, changedState = []) {

src/backend/linkFiber.ts

@@ -182,6 +182,7 @@ function traverseRecoilHooks(
 function traverseHooks(memoizedState: any): HookStates {
   const hooksStates: HookStates = [];
   while (memoizedState && memoizedState.queue) {
+    // the !== null conditional is necessary here for correctly displaying react hooks because TypeScript recognizes 0 and "" as null - DO NOT REMOVE
     if (memoizedState.memoizedState !== null) {
       hooksStates.push({
         component: memoizedState.queue,
@@ -399,15 +400,12 @@ function createTree(
           state.state,
           state.component
         );
-        // why is this re-writing componentData.hooksIndex every time? instead, should remove from loop and try to re-write it to be whichever state is being updated
         componentData.hooksIndex = hooksIndex;
         if (!newState) {
           newState = { hooksState: [] };
-        // }
         } else if (!newState.hooksState) {
           newState.hooksState = [];
         }
-        // newState[hooksNames[i]] = state.state;
         newState.hooksState.push({ [hooksNames[i]]: state.state });
         componentFound = true;
       });

src/backend/masterState.ts

@@ -11,20 +11,26 @@ import {
   HookStates, // array of hook state items
 } from './types/backendTypes';
 
+// HookState is an array that contains a "component" for every single state change that occurs in the app
+// Information on these components include ComponentData as well as state
+// For class components, there will be one "component" for each snapshot
+// For functional components that utilize Hooks, there will be one "component" for each setter/getter every time we have a new snapshot
 const componentActionsRecord: HookStates = [];
 let index = 0;
 
 export default {
-  componentActionsRecord,
+  //adds new component to ComponentActionsRecord
   saveNew: (state, component): number => {
     componentActionsRecord[index] = { state, component };
     index++;
     return index - 1;
   },
   getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
+  //this is used for class components - inputIndex will always be a fixed number (coming in timeJump.ts)
   getComponentByIndex: (inputIndex: number): any => (componentActionsRecord[inputIndex]
     ? componentActionsRecord[inputIndex].component
     : undefined),
+    //this is used for react hooks - hooks will be passed in as an array from timeJump.ts
   getComponentByIndexHooks: (inputIndex: Array<number> = []): any => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {

src/backend/timeJump.ts

@@ -62,7 +62,10 @@ export default (origin, mode) => {
       }
     });
 
-    // multiple dispatch check
+    //REACT HOOKS
+    // check if component states are set with hooks
+      // if yes, grab all relevant components for this snapshot in numArr
+      // call dispatch on each component passing in the corresponding currState value
     if (target.state && target.state.hooksState) {
       const currState = target.state.hooksState;
       const numArr: Array<number> = [];