React Time Travel Debugger

Time travel debugging is a powerful feature found in tools like Redux DevTools, allowing developers to step through state changes in their application, rewind to previous states, and understand the sequence of events leading to a particular bug. This challenge asks you to implement a simplified version of this functionality within a React component, focusing on state persistence and navigation. This will help you understand how to manage state effectively and build interactive debugging tools.

Problem Description

You need to create a React component called TimeTravelComponent that allows users to navigate through a history of states. The component will maintain a stack of previous states and provide buttons to "Rewind" and "Fast Forward" through these states. The initial state should be a simple object containing a count property, initialized to 0. Each time the user clicks a button to increment or decrement the count, the current state is pushed onto the history stack. The component should display the current count value and the available navigation buttons.

Key Requirements:

• State History: Maintain a stack (array) of previous states.
• Navigation: Implement "Rewind" and "Fast Forward" buttons to move between states in the history stack.
• Current State: Display the current state's count value.
• Increment/Decrement: Provide buttons to increment and decrement the count value, adding the new state to the history.
• Initial State: The component should start with an initial state of { count: 0 }.
• Empty History Handling: Handle cases where the history stack is empty (no states to rewind to) or contains only the current state (no states to fast forward to). Disable the corresponding buttons in these scenarios.

Expected Behavior:

1. Initially, the component displays "count: 0" and "Rewind" is disabled. "Fast Forward" and "Increment/Decrement" buttons are enabled.
2. Clicking "Increment" updates the count to 1, pushes { count: 1 } onto the history stack, and enables "Rewind".
3. Clicking "Decrement" updates the count to 0, pushes { count: 0 } onto the history stack, and enables "Rewind".
4. Clicking "Rewind" reverts the state to the previous state in the history stack, disables "Rewind" if the stack is empty, and enables "Fast Forward" if there's a state after the current one.
5. Clicking "Fast Forward" moves to the next state in the history stack, disables "Fast Forward" if the stack is at the end, and enables "Rewind" if there's a state before the current one.

Edge Cases to Consider:

• Empty history stack.
• History stack with only the current state.
• Incrementing/Decrementing when the count is already at its minimum/maximum (optional, but good practice).

Examples

Example 1:

Input: Initial state: { count: 0 }, User clicks "Increment" twice.
Output: count: 2, History stack: [{ count: 0 }, { count: 1 }, { count: 2 }]
Explanation: The count is incremented twice, and each new state is pushed onto the history stack.

Example 2:

Input: count: 2, History stack: [{ count: 0 }, { count: 1 }, { count: 2 }], User clicks "Rewind"
Output: count: 1, History stack: [{ count: 0 }, { count: 1 }, { count: 2 }] (current state is now the second element)
Explanation: The state is reverted to the previous state (count: 1).

Example 3:

Input: count: 0, History stack: [{ count: 0 }], User clicks "Rewind"
Output: count: 0, Rewind button disabled, Fast Forward button enabled.
Explanation: The history stack is empty, so "Rewind" is disabled.

Constraints

• The component should be written in TypeScript.
• The state history should be stored in an array.
• The component should be a functional component using React Hooks.
• The component should be reasonably performant (avoid unnecessary re-renders).
• The count value should be a number.

Notes

• Consider using the useState hook to manage the current state and the history stack.
• Think about how to efficiently update the UI when navigating through the history stack.
• You don't need to implement a full-fledged debugger with advanced features like breakpoints or variable inspection. Focus on the core time travel functionality.
• The initial state is crucial for setting up the history stack correctly.
• Properly disabling the "Rewind" and "Fast Forward" buttons based on the history stack's contents is key to a good user experience.