RouteDescription Completed

git commit -m mergeMessageHere

Author: joeepark

src/app/components/RouteDescription.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+const RouteDescription = (props) => {
+  const url = new URL(props.actions[0].props.routePath);
+  return (
+    <div className="routedescription">
+      <h3 className='route'>Route: {url.pathname}</h3>
+      {props.actions}
+    </div>
+  );
+};
+
+export default RouteDescription;

src/app/containers/ActionContainer.tsx

@@ -10,6 +10,8 @@ import Action from '../components/Action';
 import SwitchAppDropdown from '../components/SwitchApp';
 import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
 import { useStoreContext } from '../store';
+import RouteDescription from '../components/RouteDescription';
+
 
 const resetSlider = () => {
   const slider = document.querySelector('.rc-slider-handle');
@@ -50,6 +52,7 @@ function ActionContainer(props): JSX.Element {
         displayName: `${obj.name}.${obj.branch}`,
         state: obj.stateSnapshot.children[0].state,
         componentName: obj.stateSnapshot.children[0].name,
+        routePath: obj.stateSnapshot.url,
         // nathan testing new entries for component name, original above
         // componentName: findDiff(obj.index),
         componentData:
@@ -123,6 +126,7 @@ function ActionContainer(props): JSX.Element {
           handleOnkeyDown={handleOnKeyDown}
           viewIndex={viewIndex}
           isCurrIndex={isCurrIndex}
+          routePath={snapshot.routePath}
         />
 
       );
@@ -142,6 +146,29 @@ function ActionContainer(props): JSX.Element {
     setRecordingActions(!recordingActions);
   };
 
+
+  // Create a cache that will be an array of all the route paths.
+  const cache = [];
+  for (let i = 0; i < actionsArr.length; i++) {
+    if (!cache.includes(actionsArr[i].props.routePath)){
+      cache.push(actionsArr[i].props.routePath);
+    }
+  }
+  // Create cache2 as an object route path as a key and the individual-actions as the value. 
+  const cache2 = {};
+  for (const element of cache) {
+    cache2[element] = []; 
+  }
+  // Create a conditional that will check if the individual-action matches the route path and add it to the cache2.
+  for (let i = 0; i < actionsArr.length; i++) {
+    for (const key in cache2){
+     if (actionsArr[i].props.routePath === key) {
+       cache2[key].push(actionsArr[i]);
+     }
+   }
+  }
+
+
   // the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
   // UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
@@ -184,7 +211,11 @@ function ActionContainer(props): JSX.Element {
               Clear
             </button>
           </div>
-          <div>{actionsArr}</div>
+          {Object.keys(cache2).map((element) => {
+            return (
+            <RouteDescription actions = {cache2[element]}></RouteDescription>
+            )
+          })}
         </div>
       ) : null}
     </div>

src/app/styles/components/_buttons.scss

@@ -51,7 +51,7 @@
 .empty-button {
   padding: 3px;
   outline: transparent;
-  color: white;
+  color: black;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,7 +63,7 @@
   font: 300 14px 'Roboto', sans-serif;
   font-size: $button-text-size;
   width: 120px;
-  background: $red-color-gradient;
+  background: #62d6fb;
 }
 
 .empty-button:hover {

src/app/styles/layout/_actionContainer.scss

@@ -24,4 +24,11 @@
 #recordBtn .fa-regular{
   height: 100%;
   width: 28px;
+}
+
+.route {
+  background-color: #ff6569;
+  padding-left: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }

src/backend/linkFiber.ts

@@ -94,6 +94,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
   }
   const payload = snap.tree.cleanTreeCopy();
   // if it's Recoil - run different actions
+  payload.url = window.location.href;
   if (isRecoil) {
     // getRecoilState()
     payload.atomsComponents = atomsComponents;