updated how reducers are rendered on the component map

Author: garrettlchow

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

@@ -520,12 +520,12 @@ export default function ComponentMap({
                 }
               />
               {/* Add this new container for reducer state */}
-              {/* {tooltipData.componentData.reducerState && (
+              {tooltipData.componentData.reducerStates && (
                 <ToolTipDataDisplay
-                  containerName='Reducer State'
-                  dataObj={tooltipData.componentData.reducerState}
+                  containerName='Reducers'
+                  dataObj={tooltipData.componentData.reducerStates}
                 />
-              )} */}
+              )}
             </div>
           </div>
         </TooltipInPortal>

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

@@ -1,10 +1,6 @@
 import React from 'react';
 import { JSONTree } from 'react-json-tree';
 
-/*
-  Code that show's the tooltip of our JSON tree
-*/
-
 const colors = {
   scheme: 'paraiso',
   author: 'jan t. sott',
@@ -17,8 +13,7 @@ const colors = {
   base06: '#b9b6b0',
   base07: '#e7e9db',
   base08: '#ef6155',
-  base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
-  // base09: '#592bad', // alternative purple
+  base09: '#824508',
   base0A: '#fec418',
   base0B: '#48b685',
   base0C: '#5bc4bf',
@@ -28,32 +23,48 @@ const colors = {
 };
 
 const ToolTipDataDisplay = ({ containerName, dataObj }) => {
+  // If there's no data to display, don't render anything
+  if (
+    !dataObj ||
+    (Array.isArray(dataObj) && dataObj.length === 0) ||
+    Object.keys(dataObj).length === 0
+  ) {
+    return null;
+  }
+
+  const formatReducerData = (reducerStates) => {
+    // Transform the array of reducers into an object with hook names as keys
+    return reducerStates.reduce((acc, reducer) => {
+      acc[reducer.hookName || 'Reducer'] = {
+        state: reducer.state,
+        lastAction: reducer.lastAction,
+      };
+      return acc;
+    }, {});
+  };
+
   const printableObject = {};
 
-  if (!dataObj) {
-    printableObject[containerName] = dataObj;
+  if (containerName === 'Reducers') {
+    if (!dataObj || dataObj.length === 0) {
+      return null;
+    }
+    printableObject[containerName] = formatReducerData(dataObj);
   } else {
+    // Handle normal state/props
     const data = {};
-
-    // Handle reducer state if present
-    if (containerName === 'State' && dataObj.reducerState) {
-      printableObject[containerName] = dataObj.reducerState;
-    }
-    // Otherwise handle normal state/props
-    else {
-      for (const key in dataObj) {
-        if (typeof dataObj[key] === 'string') {
-          try {
-            data[key] = JSON.parse(dataObj[key]);
-          } catch {
-            data[key] = dataObj[key];
-          }
-        } else {
+    for (const key in dataObj) {
+      if (typeof dataObj[key] === 'string') {
+        try {
+          data[key] = JSON.parse(dataObj[key]);
+        } catch {
           data[key] = dataObj[key];
         }
+      } else {
+        data[key] = dataObj[key];
       }
-      printableObject[containerName] = data;
     }
+    printableObject[containerName] = data;
   }
 
   return (

src/backend/controllers/createTree.ts

@@ -207,7 +207,9 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       if (memoizedState.queue) {
         try {
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
+          console.log(hooksStates);
           const hooksNames = getHooksNames(elementType.toString());
+          console.log(hooksNames);
 
           componentData.hooksState = {};
           componentData.reducerStates = []; // New array to store reducer states
@@ -222,7 +224,7 @@ export default function createTree(currentFiberNode: Fiber): Tree {
                 state,
                 lastAction,
                 reducerIndex: i,
-                hookName: hooksNames[i]?.varName || `Reducer: ${i}`,
+                hookName: hooksNames[i]?.hookName || `Reducer ${i}`,
               });
             } else {
               // Regular useState hook
@@ -233,6 +235,7 @@ export default function createTree(currentFiberNode: Fiber): Tree {
             ...componentData.hooksState,
             reducers: componentData.reducerStates,
           };
+          console.log('new state', newState);
         } catch (err) {
           console.log('Error extracting component state:', {
             componentName,

src/backend/controllers/statePropExtractors.ts

@@ -129,38 +129,80 @@ export function getHooksNames(elementType: string): { hookName: string; varName:
       return null;
     };
 
+    const extractReducerName = (node: any): string | null => {
+      if (node.type === 'Identifier') {
+        return node.name;
+      }
+
+      if (node.type === 'ArrowFunctionExpression' && node.body.type === 'CallExpression') {
+        if (node.body.callee.type === 'Identifier') {
+          return node.body.callee.name;
+        }
+      }
+
+      return null;
+    };
+
     function traverse(node: Node) {
       if (!node) return;
 
       if (node.type === 'VariableDeclaration') {
         node.declarations.forEach((declaration) => {
           if (declaration.init?.type === 'CallExpression') {
-            // Check for Webpack transformed pattern: (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(0)
+            // Check for Webpack transformed pattern
             const isWebpackPattern =
               declaration.init.callee?.type === 'SequenceExpression' &&
-              declaration.init.callee.expressions?.length === 2 &&
-              declaration.init.callee.expressions[1]?.type === 'MemberExpression' &&
-              declaration.init.callee.expressions[1].property &&
-              isIdentifierWithName(declaration.init.callee.expressions[1].property, 'useState');
+              declaration.init.callee.expressions?.[1]?.type === 'MemberExpression';
+
+            // Get the hook name for Webpack pattern
+            let webpackHookName: string | null = null;
+            if (isWebpackPattern && declaration.init.callee?.type === 'SequenceExpression') {
+              const memberExpr = declaration.init.callee.expressions[1] as any;
+              if (memberExpr?.property?.type === 'Identifier') {
+                webpackHookName = memberExpr.property.name;
+              }
+            }
 
-            // Check for direct useState pattern: useState("test")
+            // Check for direct pattern
+            const directCallee = declaration.init.callee as any;
             const isDirectPattern =
-              declaration.init.callee?.type === 'Identifier' &&
-              declaration.init.callee.name === 'useState';
+              directCallee?.type === 'Identifier' &&
+              (directCallee.name === 'useState' || directCallee.name === 'useReducer');
 
-            // Check for namespaced useState pattern: React.useState("test")
+            // Check for namespaced pattern
             const isNamespacedPattern =
               declaration.init.callee?.type === 'MemberExpression' &&
-              declaration.init.callee.property &&
-              isIdentifierWithName(declaration.init.callee.property, 'useState');
+              (declaration.init.callee as any).property?.type === 'Identifier' &&
+              ((declaration.init.callee as any).property.name === 'useState' ||
+                (declaration.init.callee as any).property.name === 'useReducer');
 
             if (isWebpackPattern || isDirectPattern || isNamespacedPattern) {
               const arrayPattern = processArrayPattern(declaration.id);
               if (arrayPattern) {
-                statements.push({
-                  hookName: arrayPattern.setter,
-                  varName: arrayPattern.getter,
-                });
+                const isReducer =
+                  webpackHookName === 'useReducer' ||
+                  (isDirectPattern && directCallee?.name === 'useReducer') ||
+                  (isNamespacedPattern &&
+                    (declaration.init.callee as any).property?.name === 'useReducer');
+
+                if (isReducer) {
+                  // Handle useReducer
+                  if (declaration.init.arguments?.length > 0) {
+                    const reducerName = extractReducerName(declaration.init.arguments[0]);
+                    if (reducerName) {
+                      statements.push({
+                        hookName: reducerName,
+                        varName: arrayPattern.getter,
+                      });
+                    }
+                  }
+                } else {
+                  // Handle useState
+                  statements.push({
+                    hookName: arrayPattern.setter,
+                    varName: arrayPattern.getter,
+                  });
+                }
               }
             }
           }

src/backend/controllers/timeJump.ts

@@ -94,6 +94,10 @@ async function updateReactFiberTree(
       for (let i = 0; i < stateEntries.length; i++) {
         const [key, value] = stateEntries[i];
         if (functionalComponent[i]?.dispatch) {
+          console.log('Dispatching state update:', {
+            key,
+            value,
+          });
           await functionalComponent[i].dispatch(value);
         } else {
           console.warn(`No dispatch found for hook ${i}:`, {
@@ -112,6 +116,7 @@ async function updateReactFiberTree(
       for (const reducerState of reducerStates) {
         const { state, reducerIndex } = reducerState;
         const reducer = functionalComponent[reducerIndex];
+        console.log('reducer', reducer);
 
         if (reducer?.dispatch) {
           console.log('Dispatching reducer update:', {