added SET STATE action in reducers

Author: garrettlchow

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

@@ -21,20 +21,22 @@ type CounterAction =
   | { type: 'DECREMENT' }
   | { type: 'DOUBLE' }
   | { type: 'RESET' }
-  | { type: 'ADD'; payload: number };
+  | { type: 'ADD'; payload: number }
+  | { type: 'SET_STATE'; payload: CounterState };
 
-// New secondary reducer state and action types
 type SecondaryCounterState = {
   count: number;
   multiplier: number;
   lastOperation: string;
+  history: number[];
 };
 
 type SecondaryCounterAction =
   | { type: 'MULTIPLY' }
   | { type: 'DIVIDE' }
   | { type: 'SET_MULTIPLIER'; payload: number }
-  | { type: 'RESET' };
+  | { type: 'RESET' }
+  | { type: 'SET_STATE'; payload: SecondaryCounterState };
 
 function counterReducer(state: CounterState, action: CounterAction, step: number): CounterState {
   switch (action.type) {
@@ -72,12 +74,16 @@ function counterReducer(state: CounterState, action: CounterAction, step: number
         history: [...state.history, state.count + action.payload],
         lastAction: `ADD ${action.payload}`,
       };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastAction: 'SET_STATE',
+      };
     default:
       return state;
   }
 }
 
-// New secondary reducer function
 function secondaryCounterReducer(
   state: SecondaryCounterState,
   action: SecondaryCounterAction,
@@ -87,26 +93,35 @@ function secondaryCounterReducer(
       return {
         ...state,
         count: state.count * state.multiplier,
+        history: [...state.history, state.count * state.multiplier],
         lastOperation: `Multiplied by ${state.multiplier}`,
       };
     case 'DIVIDE':
       return {
         ...state,
         count: state.count / state.multiplier,
+        history: [...state.history, state.count / state.multiplier],
         lastOperation: `Divided by ${state.multiplier}`,
       };
     case 'SET_MULTIPLIER':
       return {
         ...state,
         multiplier: action.payload,
+        history: [...state.history],
         lastOperation: `Set multiplier to ${action.payload}`,
       };
     case 'RESET':
       return {
         count: 0,
         multiplier: 2,
+        history: [],
         lastOperation: 'Reset',
       };
+    case 'SET_STATE':
+      return {
+        ...action.payload,
+        lastOperation: 'SET_STATE',
+      };
     default:
       return state;
   }
@@ -125,7 +140,6 @@ function FunctionalReducerCounter({
   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),
     {
@@ -135,10 +149,10 @@ function FunctionalReducerCounter({
     },
   );
 
-  // Second reducer
   const [secondaryState, secondaryDispatch] = useReducer(secondaryCounterReducer, {
     count: initialCount,
     multiplier: 2,
+    history: [],
     lastOperation: 'none',
   });
 
@@ -152,7 +166,6 @@ function FunctionalReducerCounter({
     >
       <h2>{title}</h2>
 
-      {/* Primary Counter Section */}
       <div className='counter-value'>
         <h3>Primary Counter: {state.count}</h3>
       </div>
@@ -166,7 +179,6 @@ function FunctionalReducerCounter({
       </div>
 
       <div className='counter-info'>
-        <h4>Last Action: {state.lastAction}</h4>
         <h4>History:</h4>
         <div className='history-list'>
           {state.history.map((value, index) => (
@@ -178,7 +190,6 @@ function FunctionalReducerCounter({
         </div>
       </div>
 
-      {/* Secondary Counter Section */}
       <div
         className='secondary-counter'
         style={{ marginTop: '2rem', borderTop: '1px solid #ccc', paddingTop: '1rem' }}
@@ -201,8 +212,16 @@ function FunctionalReducerCounter({
           <button onClick={() => secondaryDispatch({ type: 'RESET' })}>Reset</button>
         </div>
         <div className='counter-info'>
-          <h4>Last Operation: {secondaryState.lastOperation}</h4>
           <h4>Current Multiplier: {secondaryState.multiplier}</h4>
+          <h4>History:</h4>
+          <div className='history-list'>
+            {secondaryState.history.map((value, index) => (
+              <span key={index}>
+                {value}
+                {index < secondaryState.history.length - 1 ? ' → ' : ''}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     </div>

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

@@ -80,7 +80,6 @@ function FunctionalStateCounter({
       </div>
 
       <div className='counter-info'>
-        <h4>Last Action: {lastAction}</h4>
         <h4>History:</h4>
         <div className='history-list'>
           {history.map((value, index) => (

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

@@ -123,7 +123,6 @@ class ReducerCounter extends Component<CounterProps, CounterState> {
         </div>
 
         <div className='counter-info'>
-          <h4>Last Action: {this.state.lastAction}</h4>
           <h4>History:</h4>
           <div className='history-list'>
             {this.state.history.map((value, index) => (

src/backend/controllers/createTree.ts

@@ -242,19 +242,13 @@ export default function createTree(currentFiberNode: Fiber): Tree {
         }
       }
     }
-
-    if (tag === ContextProvider) {
-      // Extract context information
-      console.log('ele', elementType);
-      console.log('memo', memoizedState);
-      const contextData = {
-        displayName: elementType._context?.displayName || 'Anonymous Context',
-        currentValue: memoizedState?.deps?.[0]?._currentValue || memoizedProps?.value,
-        defaultValue: elementType._context?._defaultValue,
-        consumers: [], // how do we track consumers?
-      };
-
-      componentData.context = contextData;
+    if (tag === ContextProvider && !elementType._context.displayName) {
+      let stateData = memoizedProps.value;
+      if (stateData === null || typeof stateData !== 'object') {
+        stateData = { CONTEXT: stateData };
+      }
+      componentData.context = filterAndFormatData(stateData);
+      componentName = 'Context';
     }
 
     // -----------------ADD COMPONENT DATA TO THE OUTPUT TREE-------------------

src/backend/controllers/timeJump.ts

@@ -3,47 +3,21 @@ import { Status } from '../types/backendTypes';
 import Tree from '../models/tree';
 import { update } from 'lodash';
 
-// THIS FILE CONTAINS NECCESSARY FUNCTIONALITY FOR TIME-TRAVEL FEATURE
-
-/**
- *
- * This is a closure function to keep track of mode (jumping or not jumping)
- * @param mode - The current mode (i.e. jumping)
- * @returns an async function that takes an `targetSnapshot`, then invokes `updateReactFiberTree` based on the state provided within that target snapshot
- *
- */
 export default function timeJumpInitiation(mode: Status) {
-  /**
-   * This function is to reset jumping mode to false when user hover the mouse over the browser body
-   */
   const resetJumpingMode = (): void => {
     mode.jumping = false;
   };
-  /**
-   * This function that takes a `targetSnapshot` then invokes `updateReactFiberTree` to update the React Application on the browser to match states provided by the `targetSnapshot`
-   * @param targetSnapshot - The target snapshot to re-render. The payload from index.ts is assigned to targetSnapshot
-   */
+
   return async function timeJump(targetSnapshot: Tree): Promise<void> {
     mode.jumping = true;
-    // Reset mode.navigating
     delete mode.navigating;
-    // Traverse the snapshotTree to update ReactFiberTree
     updateReactFiberTree(targetSnapshot).then(() => {
-      // Remove Event listener for mouse over
       document.removeEventListener('mouseover', resetJumpingMode);
-      // Since in order to change state, user will need to navigate to browser
-      // => set an event listener to resetJumpingMode when mouse is over the browser
       document.addEventListener('mouseover', resetJumpingMode, { once: true });
     });
   };
 }
 
-/**
- * This recursive function receives the target snapshot from front end and will update the state of the fiber tree if the component is stateful
- * @param targetSnapshot - Target snapshot portrays some past state we want to travel to.
- * @param circularComponentTable - A table contains visited components
- *
- */
 async function updateReactFiberTree(
   targetSnapshot,
   circularComponentTable: Set<any> = new Set(),
@@ -92,68 +66,21 @@ async function updateReactFiberTree(
         const reducer = functionalComponent[reducerIndex];
 
         if (reducer?.dispatch) {
-          console.log('Current reducer state:', {
-            hookName,
-            currentState: reducer.lastRenderedState,
-            targetState,
-          });
-
-          // Store original values
-          const originalReducer = reducer.lastRenderedReducer;
-          const originalState = reducer.lastRenderedState;
-
           try {
-            // Set the new state directly
-            reducer.lastRenderedState = targetState;
-
-            // Override the reducer temporarily
-            reducer.lastRenderedReducer = (state: any, action: any) => {
-              if (action.type === '@@REACTIME/FORCE_STATE_UPDATE') {
-                return action.payload;
-              }
-              return originalReducer ? originalReducer(state, action) : state;
-            };
-
-            // Dispatch the force update action
-            const forceUpdateAction = {
-              type: '@@REACTIME/FORCE_STATE_UPDATE',
+            // Use SET_STATE action to update the state
+            const setStateAction = {
+              type: 'SET_STATE',
               payload: targetState,
             };
 
-            await reducer.dispatch(forceUpdateAction);
-
-            console.log('Post-dispatch state:', {
-              hookName,
-              newState: reducer.lastRenderedState,
-              success: JSON.stringify(reducer.lastRenderedState) === JSON.stringify(targetState),
-            });
+            await reducer.dispatch(setStateAction);
           } catch (error) {
             console.error('Error updating reducer state:', {
               hookName,
               error,
               componentName: targetSnapshot.name,
             });
-            // Restore original state on error
-            reducer.lastRenderedState = originalState;
-          } finally {
-            // Restore original reducer
-            reducer.lastRenderedReducer = originalReducer;
-
-            console.log('Final reducer state check:', {
-              hookName,
-              originalState,
-              targetState,
-              finalState: reducer.lastRenderedState,
-              stateMatchesTarget:
-                JSON.stringify(reducer.lastRenderedState) === JSON.stringify(targetState),
-            });
           }
-        } else {
-          console.warn('No dispatch found for reducer:', {
-            hookName,
-            reducerIndex,
-            componentName: targetSnapshot.name,
-          });
         }
       }
     }