Merge pull request #4 from oslabs-beta/Emin

Emin

Author: SamuelTr13

src/backend/helpers.ts

@@ -24,9 +24,9 @@ export const throttle = (callback: Function, ms: number): Function => {
   let isOnCooldown = false;
   let isCallQueued = false;
 
-  // Wrap the passed-in function, f, in a callback function that "throttles"
-  // (puts a limit on) the number of calls that can be made to function, f
-  // in a given period of time (ms), t
+  // Wrap the passed-in function callback in a callback function that "throttles"
+  // (puts a limit on) the number of calls that can be made to function
+  // in a given period of time (ms)
   const throttledFunc = (): any => {
     // CASE 1: In cooldown mode and we already have a function waiting to be executed,
     //         so do nothing
@@ -40,7 +40,7 @@ export const throttle = (callback: Function, ms: number): Function => {
     }
 
     // CASE 3: If we are ready to "fire":
-    // Execute the function, f, immediately
+    // Execute the function callback immediately
     callback();
     // Initiate a new cooldown period and reset the "call queue"
     isOnCooldown = true;
@@ -51,7 +51,7 @@ export const throttle = (callback: Function, ms: number): Function => {
     const runAfterTimeout = (): any => {
       if (isCallQueued) {
         isCallQueued = false;
-        isOnCooldown = true; // not needed I think
+        isOnCooldown = true;
         callback();
         setTimeout(runAfterTimeout, ms);
         return;
@@ -68,7 +68,7 @@ export const throttle = (callback: Function, ms: number): Function => {
 // Helper function to grab the getters/setters from `elementType`
 /**
  * @method getHooksNames
- * @param elementType The fiber `type`, A stringified function of the component the Fiber whose hooks we want corresponds to
+ * @param elementType The fiber `type`, A stringified function of the component, the Fiber whose hooks we want corresponds to
  * @returns An array of strings
  */
 export const getHooksNames = (elementType: string): Array<string> => {
@@ -95,11 +95,11 @@ export const getHooksNames = (elementType: string): Array<string> => {
      * Iterate through AST of every function declaration
      * Check within each function declaration if there are hook declarations */
     ast.forEach(functionDec => {
-      let body: any;
-      if (functionDec.expression && functionDec.expression.body) body = functionDec.expression.body.body;
-      else body = functionDec.body ? functionDec.body.body : [];
+      let declarationBody: any;
+      if (functionDec.expression && functionDec.expression.body) declarationBody = functionDec.expression.body.body; // check if functionDec.expression.body exists, then set declarationBody to functionDec's body
+      else declarationBody = functionDec.body ? functionDec.body.body : [];
       // Traverse through the function's funcDecs and Expression Statements
-      body.forEach((elem: any) => {
+      declarationBody.forEach((elem: any) => {
         // Hooks will always be contained in a variable declaration
         if (elem.type === 'VariableDeclaration') {
           elem.declarations.forEach((hook: any) => {

src/backend/index.ts

@@ -7,12 +7,12 @@
  * 'reactime' module has a single export
  * @function linkFiber
 */
-
+// regenerator runtime supports async functionality
 import 'regenerator-runtime/runtime';
 import linkFiberStart from './linkFiber';
 import timeJumpStart from './timeJump';
 import {
-  Snapshot, Mode, SnapshotNode, MsgData,
+  Snapshot, Mode, MsgData,
 } from './types/backendTypes';
 
 // * State snapshot object initialized here
@@ -26,57 +26,26 @@ const mode: Mode = {
   paused: false,
 };
 
+// linkFiber is now assigned the default function exported from the file linkFiber.ts
 const linkFiber = linkFiberStart(snapShot, mode);
+// timeJump is now assigned the default function exported from the file timeJump.ts
 const timeJump = timeJumpStart(snapShot, mode);
 
 // * Event listener for time-travel actions
 window.addEventListener('message', ({ data: { action, payload } }: MsgData) => {
   switch (action) {
     case 'jumpToSnap':
-      timeJump(payload, true); // * This sets state with given payload
-      // Get the pathname from payload and add new entry to browser history
-      // MORE: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
-      // try to modify workInProgress tree from here
-      // window.history.pushState('', '', getRouteURL(payload));
+      timeJump(payload, true); // * This sets state with given payloa
       break;
+
     case 'setPause':
       mode.paused = payload;
       break;
-    // maybe this isn't work react cohort 45
-    // case 'onHover':
-    //   if (Array.isArray(payload)) {
-    //     for (let i = 0; i < payload.length; i + 1) {
-    //       const element = document.getElementById(payload[i]);
-    //       if (element !== null) {
-    //         element.style.backgroundColor = '#C0D9D9';
-    //       }
-    //     }
-    //   } else {
-    //     const element: HTMLElement = document.querySelector(`.${payload}`);
-    //     if (element !== null) {
-    //       element.style.backgroundColor = '#C0D9D9';
-    //     }
-    //   }
-    //   break;
-    // // maybe this isn't work react cohort 45
-    // case 'onHoverExit':
-    //   if (Array.isArray(payload)) {
-    //     for (let i = 0; i < payload.length; i++) {
-    //       const element: HTMLElement = document.querySelector(`.${payload}`);
-    //       if (element !== null) {
-    //         element.style.backgroundColor = '';
-    //       }
-    //     }
-    //   } else {
-    //     const element: HTMLElement = document.querySelector(`.${payload}`);
-    //     if (element !== null) {
-    //       element.style.backgroundColor = '';
-    //     }
-    //   }
-    //   break;
+
     default:
       break;
   }
 });
-// connect to dev tools and new fiber
+// connect to dev tools and new fiber,
+// invokes anonymous function from linkFiber.ts set to linkFiber on line 30
 linkFiber();