Merge branch 'dev' into feature/ragad

Author: ragad-mohammed

demo-app/src/client/Components/FunctionalReducerCounter.tsx

@@ -23,6 +23,19 @@ type CounterAction =
   | { type: 'RESET' }
   | { type: 'ADD'; payload: number };
 
+// New secondary reducer state and action types
+type SecondaryCounterState = {
+  count: number;
+  multiplier: number;
+  lastOperation: string;
+};
+
+type SecondaryCounterAction =
+  | { type: 'MULTIPLY' }
+  | { type: 'DIVIDE' }
+  | { type: 'SET_MULTIPLIER'; payload: number }
+  | { type: 'RESET' };
+
 function counterReducer(state: CounterState, action: CounterAction, step: number): CounterState {
   switch (action.type) {
     case 'INCREMENT':
@@ -64,6 +77,41 @@ function counterReducer(state: CounterState, action: CounterAction, step: number
   }
 }
 
+// New secondary reducer function
+function secondaryCounterReducer(
+  state: SecondaryCounterState,
+  action: SecondaryCounterAction,
+): SecondaryCounterState {
+  switch (action.type) {
+    case 'MULTIPLY':
+      return {
+        ...state,
+        count: state.count * state.multiplier,
+        lastOperation: `Multiplied by ${state.multiplier}`,
+      };
+    case 'DIVIDE':
+      return {
+        ...state,
+        count: state.count / state.multiplier,
+        lastOperation: `Divided by ${state.multiplier}`,
+      };
+    case 'SET_MULTIPLIER':
+      return {
+        ...state,
+        multiplier: action.payload,
+        lastOperation: `Set multiplier to ${action.payload}`,
+      };
+    case 'RESET':
+      return {
+        count: 0,
+        multiplier: 2,
+        lastOperation: 'Reset',
+      };
+    default:
+      return state;
+  }
+}
+
 function FunctionalReducerCounter({
   initialCount = 0,
   step = 1,
@@ -76,6 +124,8 @@ function FunctionalReducerCounter({
   const [clickCount, setClickCount] = useState(0);
   const [lastClickTime, setLastClickTime] = useState<Date | null>(null);
   const [averageTimeBetweenClicks, setAverageTimeBetweenClicks] = useState<number>(0);
+
+  // First reducer
   const [state, dispatch] = useReducer(
     (state: CounterState, action: CounterAction) => counterReducer(state, action, step),
     {
@@ -85,6 +135,13 @@ function FunctionalReducerCounter({
     },
   );
 
+  // Second reducer
+  const [secondaryState, secondaryDispatch] = useReducer(secondaryCounterReducer, {
+    count: initialCount,
+    multiplier: 2,
+    lastOperation: 'none',
+  });
+
   return (
     <div
       className='reducer-counter'
@@ -94,8 +151,10 @@ function FunctionalReducerCounter({
       }}
     >
       <h2>{title}</h2>
+
+      {/* Primary Counter Section */}
       <div className='counter-value'>
-        <h3>Current Count: {state.count}</h3>
+        <h3>Primary Counter: {state.count}</h3>
       </div>
 
       <div className='counter-buttons'>
@@ -118,7 +177,36 @@ function FunctionalReducerCounter({
           ))}
         </div>
       </div>
+
+      {/* Secondary Counter Section */}
+      <div
+        className='secondary-counter'
+        style={{ marginTop: '2rem', borderTop: '1px solid #ccc', paddingTop: '1rem' }}
+      >
+        <h3>Secondary Counter: {secondaryState.count}</h3>
+        <div className='counter-buttons'>
+          <button onClick={() => secondaryDispatch({ type: 'MULTIPLY' })}>
+            Multiply by {secondaryState.multiplier}
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'DIVIDE' })}>
+            Divide by {secondaryState.multiplier}
+          </button>
+          <button
+            onClick={() =>
+              secondaryDispatch({ type: 'SET_MULTIPLIER', payload: secondaryState.multiplier + 1 })
+            }
+          >
+            Increase Multiplier
+          </button>
+          <button onClick={() => secondaryDispatch({ type: 'RESET' })}>Reset</button>
+        </div>
+        <div className='counter-info'>
+          <h4>Last Operation: {secondaryState.lastOperation}</h4>
+          <h4>Current Multiplier: {secondaryState.multiplier}</h4>
+        </div>
+      </div>
     </div>
   );
 }
+
 export default FunctionalReducerCounter;

demo-app/src/client/index.html

@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <title>Reactime</title>
+    <title>Demo App</title>
     <!-- <link rel="icon" type="image/x-icon" href="../../../assets/logos/blackWhiteSquareIcon.png"> -->
-    <link rel="stylesheet" type="text/css" href="./style.css">
+    <link rel="stylesheet" type="text/css" href="./style.css" />
   </head>
   <body>
     <main id="root"></main>

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,47 @@ 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,
+      };
+      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,30 +207,34 @@ export default function createTree(currentFiberNode: Fiber): Tree {
       if (memoizedState.queue) {
         try {
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
-          console.log('hook states', hooksStates);
-          // Get the hooks names by parsing the elementType
           const hooksNames = getHooksNames(elementType.toString());
-          // Intialize state & index:
+
           componentData.hooksState = {};
-          componentData.reducerState = null;
+          componentData.reducerStates = []; // New array to store reducer states
           componentData.hooksIndex = [];
 
-          hooksStates.forEach(({ state, component, isReducer }, i) => {
+          hooksStates.forEach(({ state, component, isReducer, lastAction, reducer }, i) => {
             componentData.hooksIndex.push(componentActionsRecord.saveNew(component));
 
             if (isReducer) {
-              // If it's a reducer, store its state
-              componentData.reducerState = state;
+              // Store reducer-specific information
+              componentData.reducerStates.push({
+                state,
+                lastAction,
+                reducerIndex: i,
+                hookName: hooksNames[i]?.hookName || `Reducer ${i}`,
+              });
+            } else {
+              // Regular useState hook
+              componentData.hooksState[hooksNames[i]?.varName || `State: ${i}`] = state;
             }
-            // Otherwise treat as useState
-            componentData.hooksState[hooksNames[i]?.varName || `Reducer: ${i}`] = state;
           });
-
-          // Pass to front end
-          newState = componentData.hooksState;
-          console.log('new state', newState);
+          newState = {
+            ...componentData.hooksState,
+            reducers: componentData.reducerStates,
+          };
         } catch (err) {
-          console.log('Error extracting functional component state:', {
+          console.log('Error extracting component state:', {
             componentName,
             memoizedState,
             error: err,