Merge pull request #2 from oslabs-beta/robby/feature/react-router/backend

fscgolden · web-flow · commit 5982a1cda82a · 2022-06-02T11:14:22.000-07:00
Robby/feature/react router/backend
diff --git a/src/backend/linkFiber.ts b/src/backend/linkFiber.ts
@@ -28,6 +28,7 @@ import {
 import Tree from './tree';
 // passes the data down to its components ?
 import componentActionsRecord from './masterState';
+import routes from './routes';
 
 // throttle returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms
 // getHooksNames - helper function to grab the getters/setters from `elementType`
@@ -93,6 +94,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
     snap.tree = new Tree('root', 'root');
   }
   const payload = snap.tree.cleanTreeCopy();
+  payload.route = routes.addRoute(window.location.href);
   // if it's Recoil - run different actions
   if (isRecoil) {
     // getRecoilState()
@@ -132,6 +134,7 @@ function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
     // Clears circular component table
     circularComponentTable.clear();
     // creates snapshot that is a tree based on properties in fiberRoot object
+    componentActionsRecord.clear();
     snap.tree = createTree(current);
   }
   // sends the updated tree back
@@ -355,7 +358,7 @@ function createTree(
     // time-travel state changing. Add record index to snapshot so we can retrieve.
     componentData.index = componentActionsRecord.saveNew(
       stateNode.state,
-      stateNode
+      stateNode,
     );
     newState = stateNode.state;
     componentFound = true;
@@ -365,32 +368,32 @@ function createTree(
   atomArray.push(memoizedProps);
 
   // RECOIL HOOKS
-  if (
-    memoizedState
-    && (tag === 0 || tag === 1 || tag === 2 || tag === 10)
-  ) {
-    if (memoizedState.queue) {
-      // Hooks states are stored as a linked list using memoizedState.next,
-      // so we must traverse through the list and get the states.
-      // We then store them along with the corresponding memoizedState.queue,
-      // which includes the dispatch() function we use to change their state.
-      const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
-      hooksStates.forEach((state, i) => {
-        hooksIndex = componentActionsRecord.saveNew(
-          state.state,
-          state.component
-        );
-        componentData.hooksIndex = hooksIndex;
-        if (!newState) {
-          newState = { hooksState: [] };
-        } else if (!newState.hooksState) {
-          newState.hooksState = [];
-        }
-        newState.hooksState.push({ [i]: state.state });
-        componentFound = true;
-      });
-    }
-  }
+  // if (
+  //   memoizedState
+  //   && (tag === 0 || tag === 1 || tag === 2 || tag === 10)
+  // ) {
+  //   if (memoizedState.queue) {
+  //     // Hooks states are stored as a linked list using memoizedState.next,
+  //     // so we must traverse through the list and get the states.
+  //     // We then store them along with the corresponding memoizedState.queue,
+  //     // which includes the dispatch() function we use to change their state.
+  //     const hooksStates = traverseRecoilHooks(memoizedState, memoizedProps);
+  //     hooksStates.forEach((state, i) => {
+  //       hooksIndex = componentActionsRecord.saveNew(
+  //         state.state,
+  //         state.component
+  //       );
+  //       componentData.hooksIndex = hooksIndex;
+  //       if (!newState) {
+  //         newState = { hooksState: [] };
+  //       } else if (!newState.hooksState) {
+  //         newState.hooksState = [];
+  //       }
+  //       newState.hooksState.push({ [i]: state.state });
+  //       componentFound = true;
+  //     });
+  //   }
+  // }
 
   // Check if node is a hooks useState function
   // REGULAR REACT HOOKS
@@ -410,7 +413,7 @@ function createTree(
       hooksStates.forEach((state, i) => {
         hooksIndex = componentActionsRecord.saveNew(
           state.state,
-          state.component
+          state.component,
         );
         componentData.hooksIndex = hooksIndex;
         if (!newState) {
diff --git a/src/backend/masterState.ts b/src/backend/masterState.ts
@@ -15,26 +15,34 @@ import {
 // 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 componentActionsRecord: HookStates = [];
 let index = 0;
 
 export default {
-  //adds new component to ComponentActionsRecord
+  clear: () => {
+    componentActionsRecord = [];
+    index = 0;
+  },
+  // 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
+  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++) {
-      if (componentActionsRecord[inputIndex[i]]) multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
+      if (componentActionsRecord[inputIndex[i]])
+        multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
     }
     return multiDispatch;
   },
diff --git a/src/backend/routes.ts b/src/backend/routes.ts
@@ -0,0 +1,107 @@
+/* eslint-disable max-classes-per-file */
+/* eslint-disable max-len */
+
+/**
+ * @class Route instances are created by the addRoute method on Routes. A Route instance has two properties: the url of the route and a unique id.
+ */
+class Route {
+  url: string;
+
+  id: number;
+
+  constructor(url: string, id: number) {
+    this.url = url;
+    this.id = id;
+  }
+}
+
+/**
+ * @class An instance of this class is the default export from routes.ts. It includes the logic that allows Reactime to work with target applications built with React Router. The addRoute method is invoked in linkFiber.ts within the sendSnapshot function. The navigate method is invoked in timeJump.ts immediately before invoking jump.
+ */
+
+class Routes {
+  /**
+   * @property A stack of visited routes that matches the browser history stack.
+   */
+  values: Route[] = [new Route(null, null)];
+
+  /**
+   * @property Used to assign unique ids to routes in the values stack in case the same route is added to the stack more than once.
+   */
+  id = 0;
+
+  /**
+   * @property The index of the current route in the values stack.
+   */
+  current: number | null = 0;
+
+  /**
+   * @method addRoute
+   * @param url - A url string.
+   * @returns Either the current route if the user has not navigated away from it or a new instance of a route constructed from the url.
+   *
+   * Ensures that the values stack always matches the browser history stack.
+   */
+
+  addRoute(url: string): Route {
+    let route: Route = this.values[this.current];
+
+    if (this.values[this.current].url !== url) {
+      if (this.current !== this.values.length - 1) {
+        this.rebuildHistory(url);
+      }
+
+      route = new Route(url, (this.id += 1));
+      this.values.push(route);
+
+      this.current = this.values.length - 1;
+    }
+
+    return route;
+  }
+
+  /**
+   * @method rebuildHistory
+   * @param url - A url string.
+   *
+   * Rebuilds the browser history stack using the copy of the stack maintained in the values stack. https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState, https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+   */
+  private rebuildHistory(url: string): void {
+    window.history.replaceState('', '', this.values[this.current + 1].url);
+
+    for (let i = this.current + 2; i < this.values.length; i += 1) {
+      window.history.pushState('', '', this.values[i].url);
+    }
+
+    window.history.pushState('', '', url);
+  }
+
+  /**
+   * @method navigate
+   * @param route - The target route in the values stack that is being navigated to.
+   * @returns A boolean indicating whether or not a new route was navigated to.
+   *
+   * Invokes history.go passing in the delta between the current route and the target route. https://developer.mozilla.org/en-US/docs/Web/API/History/go
+   */
+  navigate(route: Route): boolean {
+    let targetIndex: number | null = null;
+
+    for (let i = 0; i < this.values.length; i += 1) {
+      if (this.values[i].url === route.url && this.values[i].id === route.id) {
+        targetIndex = i;
+      }
+    }
+
+    const delta: number = targetIndex - this.current;
+
+    this.current += delta;
+
+    if (delta !== 0) {
+      window.history.go(delta);
+      return true;
+    }
+    return false;
+  }
+}
+
+export default new Routes();
diff --git a/src/backend/timeJump.ts b/src/backend/timeJump.ts
@@ -1,4 +1,5 @@
 import { Console } from 'console';
+import routes from './routes';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
@@ -85,9 +86,19 @@ export default (origin, mode) => {
     // * Setting mode disables setState from posting messages to window
     mode.jumping = true;
     if (firstCall) circularComponentTable.clear();
-    jump(target);
-    setTimeout(() => {
-      mode.jumping = false;
-    }, 100);
+    const navigating: boolean = routes.navigate(target.route);
+    if (navigating) {
+      addEventListener('popstate', event => {
+        jump(target);
+        document.body.onmouseover = () => {
+          mode.jumping = false;
+        };
+      });
+    } else {
+      jump(target);
+      document.body.onmouseover = () => {
+        mode.jumping = false;
+      };
+    }
   };
-};
+};
diff --git a/src/backend/tree.ts b/src/backend/tree.ts
@@ -61,6 +61,8 @@ class Tree {
 
   recoilDomNode: any;
 
+  route: {};
+
   // Duplicate names: add a unique number ID
   // Create an object 'componentNames' to store each component name as a key and it's frequency of use as its value
   // When a new component is made on the tree, check if the new component's name already exists in 'componentNames' (possibly with the .hasOwnProperty method)
