Merge pull request #28 from oslabs-beta/feature/garrett

Feature/garrett

Author: garrettlchow

package.json

@@ -149,7 +149,8 @@
     "jsdom": "^23.0.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
     "style-loader": "^3.3.3",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
@@ -195,14 +196,14 @@
     "rc-tooltip": "^6.1.3",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
+    "react-hot-toast": "^2.4.1",
     "react-hover": "^3.0.1",
     "react-json-tree": "^0.18.0",
     "react-redux": "^9.0.4",
     "react-select": "^5.8.0",
     "react-spinners": "^0.13.8",
     "redux": "^5.0.0",
     "regenerator-runtime": "^0.14.1",
-    "sass": "^1.69.5",
     "styled-components": "^6.1.2",
     "web-vitals": "^3.5.0"
   }

src/app/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import MainContainer from './containers/MainContainer';
+import { Toaster } from 'react-hot-toast';
 
 /*
   'currentTab' is the current active tab within Google Chrome.
@@ -11,6 +12,7 @@ import MainContainer from './containers/MainContainer';
 function App(): JSX.Element {
   return (
     <Router>
+      <Toaster />
       <MainContainer />
     </Router>
   );

src/app/__tests__/ErrorMsg.test.tsx

@@ -88,9 +88,12 @@ const Action = (props: ActionProps): JSX.Element => {
                 />
               </div>
               {isCurrIndex ? (
-                <button className='current-snap' type='button'>
-                  {`Snapshot: ${displayName}`}
-                </button>
+                <input
+                  className='current-snap'
+                  key={`ActionInput${displayName}`}
+                  type='text'
+                  placeholder={`Snapshot: ${displayName}`}
+                />
               ) : (
                 <button className='time-button' type='button'>
                   {displayTime}

src/app/__tests__/Loader.test.tsx

@@ -91,7 +91,8 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
         steps = [
           {
             title: 'Reactime Tutorial',
-            intro: 'A performance and state management tool for React apps.',
+            intro:
+              'A tool for time travel debugging and performance monitoring in React applications.',
             position: 'top',
           },
           {
@@ -226,37 +227,6 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
             intro: 'Additional info can be found be hovering over desired metrics',
             position: 'top',
           },
-          // {
-          //   title: 'LCP',
-          //   element: document.querySelectorAll('.metric')[0],
-          //   intro:
-          //     '<strong>Largest Contentful Paint</strong><br/>The amount of time it takes for the largest image, video or text block within the viewport to be fully rendered and interactive.',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'FID',
-          //   element: document.querySelectorAll('.metric')[1],
-          //   intro:
-          //     '<strong>First Input Delay</strong><br/>A measurement of load responsiveness, the time from the first user interaction (for example, a click) to the browser responding to that interaction.',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'FCP',
-          //   element: document.querySelectorAll('.metric')[2],
-          //   intro:
-          //     '<strong>First Contentful Paint</strong><br/>The amount of time it takes to render the first DOM element of any variety',
-          //   position: 'top',
-          // },
-
-          // {
-          //   title: 'TTFB',
-          //   element: document.querySelectorAll('.metric')[3],
-          //   intro:
-          //     "<strong>Time To First Byte</strong><br/>The amount of time it takes for a user's browser to receive the first byte of page content from the server.",
-          //   position: 'top',
-          // },
         ];
         break;
       case 'history':
@@ -270,7 +240,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
           },
           {
             title: 'Viewing History Snapshot',
-            element: '.node active',//document.querySelectorAll('.snapshotNode')[0]
+            element: '.node active', //document.querySelectorAll('.snapshotNode')[0]
             intro:
               'Each node will represent a snapshot in the page. <ul><li>A single snapshot will show as a node while multiple snapshots will be represented as a timeline.</li><li>Highlighting over one will show any state changes compared to the previous snapshot. </li><li>Clicking a node will set the snapshot as the current one.</li></ul>',
             position: 'top',

src/app/components/Actions/Action.tsx

@@ -10,7 +10,6 @@ import { useDispatch } from 'react-redux';
 
 const radialGraph = (props) => {
   const dispatch = useDispatch();
-  console.log('props', props);
   const state = {
     series: [props.series], // series appears to be the scale at which data is displayed based on the type of webMetrics measured.
     options: {