Merge pull request #1 from oslabs-beta/David/Joseph-RouteDescription

David/joseph route description

Author: khobread

src/app/components/RouteDescription.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const RouteDescription = (props) => {
+  // Use new URL to use the url.pathname method.
+  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.route.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,16 @@ function ActionContainer(props): JSX.Element {
     setRecordingActions(!recordingActions);
   };
 
+  // Logic to create the route description components
+  const routes = {};
+  for (let i = 0; i < actionsArr.length; i++) {
+    if (!routes.hasOwnProperty(actionsArr[i].props.routePath)) {
+      routes[actionsArr[i].props.routePath] = [actionsArr[i]];
+    } else {
+      routes[actionsArr[i].props.routePath].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 +198,12 @@ function ActionContainer(props): JSX.Element {
               Clear
             </button>
           </div>
-          <div>{actionsArr}</div>
+          {/* Rendering of route description components */}
+          {Object.keys(routes).map((route) => {
+            return (
+            <RouteDescription actions = {routes[route]}></RouteDescription>
+            )
+          })}
         </div>
       ) : null}
     </div>

src/app/module.d.ts

@@ -14,3 +14,4 @@ declare module 'enzyme-adapter-react-16';
 declare module 'enzyme';
 declare module 'react-apexcharts';
 declare module 'react-hover';
+ 

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;
 }