Merge pull request #11 from oslabs-beta/ctxSupport

Ctx support added, Feature section refactor, Nav Bar Refactor

Author: benmarg

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -153,6 +153,19 @@ export default function ComponentMap({
     return propsFormat;
   };
 
+  const formatContext = data => {
+    const propsFormat = [];
+    const nestedObj = [];
+    for (const key in data) {
+      propsFormat.push(
+        <p className="stateprops">
+          {`${key}: ${data[key]}`}
+        </p>,
+      );
+    }
+    return propsFormat;
+  };
+
   const formatState = state => {
     if (state === 'stateless') return ['stateless'];
     return ['stateful'];
@@ -378,10 +391,15 @@ export default function ComponentMap({
               {formatState(tooltipData.state)}
             </div>
             <div style={React.scrollStyle}>
-              <div className="props">
-                Props:
+              <div className="tooltipWrapper">
+                <h2>Props:</h2>
                 {formatProps(tooltipData.componentData.props)}
               </div>
+              {tooltipData.componentData.context &&
+              <div className="tooltipWrapper">
+                <h2>Context:</h2>
+                {formatContext(tooltipData.componentData.context)}
+              </div>}
             </div>
           </div>
         </TooltipInPortal>

src/app/styles/main.scss

@@ -1,9 +1,30 @@
 @charset 'UTF-8';
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 * {
   font-family: 'Roboto', sans-serif;
 }
 
+.tooltipWrapper {
+  background-color: #505050;
+  color: rgb(216, 216, 216);
+  margin-top: 3px;
+  padding: 2px;
+}
+
+.tooltipWrapper h2 {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  font-size: small;
+  font-weight: bolder;
+}
+
+.tooltipWrapper p {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-left: 10px;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;
@@ -36,13 +57,13 @@
 
 // 4. Layout-related sections
 @import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
-  'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
-  'layout/buttonsContainer', 'layout/headContainer.scss';
+'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
+'layout/buttonsContainer', 'layout/headContainer.scss';
 
 // 5. Components
 @import 'components/buttons', 'components/actionComponent',
-  'components/jsonTree', 'components/renderingFrequency',
-  'components/performanceVisx';
+'components/jsonTree', 'components/renderingFrequency',
+'components/performanceVisx';
 
 // slider component
 @import './components/rc-slider', './components/sliderHandle';
@@ -51,4 +72,4 @@
 @import './components/d3graph.css';
 
 // diff component
-@import './components/diff';
+@import './components/diff';

src/backend/linkFiber.ts

@@ -181,8 +181,24 @@ function createTree(
     actualStartTime,
     selfBaseDuration,
     treeBaseDuration,
+    dependencies,
+    _debugHookTypes,
   } = currentFiber;
 
+//   if (currentFiber.tag === 10) {
+//     const queue = [currentFiber];
+//     while (queue.length > 0) {
+//       const tempFiber = queue.shift();
+//       if (tempFiber.tag === 0) console.log(tempFiber);
+//       if (tempFiber.sibling) {
+//         queue.push(tempFiber.sibling);
+//       }
+//       if (tempFiber.child) {
+//         queue.push(tempFiber.child);
+//       }
+//   }
+// }
+
 // check to see if we can get the information we were looking for
   if (tag === 5) {
     try {
@@ -209,6 +225,7 @@ function createTree(
     selfBaseDuration?: number;
     treeBaseDuration?: number;
     props?: any,
+    context?: any,
   } = {};
   let componentFound = false;
 
@@ -217,6 +234,11 @@ function createTree(
     componentData.props = convertDataToString(memoizedProps, null);
   }
 
+  // if the component uses the useContext hook, we want to grab the co  text object and add it to the componentData object for that fiber
+  if (tag === 0 && _debugHookTypes) {
+      componentData.context = convertDataToString(dependencies?.firstContext?.memoizedValue, null);
+      console.log(convertDataToString(componentData.context, null), componentData.context);
+  }
   // Check if node is a stateful class component
   if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
     // Save component's state and setState() function to our record for future

src/backend/types/backendTypes.ts

@@ -174,4 +174,8 @@ export type Fiber = {
   // This value bubbles up during the "complete" phase.
   // This field is only set when the enableProfilerTimer flag is enabled.
   treeBaseDuration?: number;
+
+  dependencies: any;
+
+  _debugHookTypes: any;
 };

www/src/pages/components/Blogs.tsx

@@ -20,7 +20,7 @@ const posts = [
   {
     title: 'Time-Traveling Through React State',
     href: 'https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319',
-    category: { name: 'React', href: '#' },
+    category: { name: 'React', href: 'https://medium.com/tag/react' },
     description:
       'Reactime is a Chrome extension and time-travel debugger for React that allows developers to record, track, and visualize state changes. Reactime leverages React’s core reconciliation... ',
     date: 'Oct 7, 2021',
@@ -36,21 +36,20 @@ const posts = [
     },
   },
   {
-    title: 'Open Source DeBugging Tool for React',
-    href: 'https://betterprogramming.pub/time-traveling-state-with-reactime-6-0-53fdc3ae2a20',
-    category: { name: 'Better Programming', href: '#' },
-    description:
-      'State management is a crucial part of developing efficient and performant React applications. Developers know that managing state can become unmanageable as an application scales... ',
-    date: 'Oct 21, 2020',
-    datetime: '2020-10-21',
+    title: 'What time is it? Reactime!',
+    href: 'https://medium.com/@robbytiptontol/inter-route-time-travel-with-reactime-d84cd55ec73b',
+    category: { name: 'React Devtools', href: 'https://medium.com/tag/react-devtools' },
+    description: 'Reactime is a debugging tool that lets developers take snapshots of an application\’s state data as well as time-travel through these snapshots. The snapshots display React...',
+    date: 'Jun 16, 2022',
+    datetime: '2022-06-16',
     imageUrl:
       'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
-    readingTime: '11 min',
+    readingTime: '9 min',
     author: {
-      name: 'Vincent Nguyen',
-      href: 'https://medium.com/@CSVince',
+      name: 'Robby Tipton',
+      href: 'https://medium.com/@robbytiptontol',
       imageUrl:
-        'https://media-exp1.licdn.com/dms/image/C5603AQEsAdcE-e7kZg/profile-displayphoto-shrink_200_200/0/1604336802983?e=1676505600&v=beta&t=yK3edcZkpG4Yhvr4iavafRs1SBEQgza-4IRJncRV0X4',
+        'https://miro.medium.com/fit/c/96/96/1*pi-RH2LRvsZA9vLZTvY2mg.jpeg',
     },
   },
 ]

www/src/pages/components/FeatureSlider.tsx

@@ -52,7 +52,7 @@ export default function FeaturesSection() {
           What makes Reactime so great?
         </p>
         <p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
-        Reactime is chock full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience.
+        Reactime iscd full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience.
         </p>
         <div className="mt-20">
           <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">