React Transition Tracking Component

This challenge focuses on building a reusable React component that tracks and displays the transition state of another component. This is useful for debugging, visualizing animations, or providing user feedback during transitions (e.g., showing a loading indicator while a component is transitioning). You'll create a TransitionTracker component that wraps another component and monitors its transition state, providing a visual representation of the state changes.

Problem Description

You need to build a TransitionTracker component in React using TypeScript. This component will accept a child component as a prop and track its transition state. The transition state will be one of the following: Entering, EnteringDone, Exiting, ExitingDone, or Finished. The TransitionTracker should display the current transition state as a simple text label. The TransitionTracker should also provide a callback function to the child component that the child can call to signal the completion of a transition phase.

Key Requirements:

• child prop: Accepts a React element (the component to be tracked).
• onTransitionComplete prop: Accepts a callback function. This function should be called by the child component when a transition phase is complete.
• Transition States: The component must accurately track and display the following states: Entering, EnteringDone, Exiting, ExitingDone, and Finished.
• Initial State: The initial state should be Entering.
• State Transitions: The state transitions should occur in the following order: Entering -> EnteringDone -> Exiting -> ExitingDone -> Finished.
• Callback Integration: The onTransitionComplete callback should be invoked when the state transitions to EnteringDone, ExitingDone, and Finished.
• Rendering: The component should render a simple <div> displaying the current transition state.

Expected Behavior:

1. When the TransitionTracker mounts, it should immediately set its state to Entering.
2. The child component should be rendered within the TransitionTracker.
3. The child component should call the onTransitionComplete callback at appropriate times during its transition phases.
4. The TransitionTracker should update its state based on the calls to onTransitionComplete.
5. The TransitionTracker should display the current transition state in a readable format.

Edge Cases to Consider:

• What happens if the child component doesn't call onTransitionComplete at all? The component should eventually reach the Finished state, but it might take some time.
• What happens if the child component calls onTransitionComplete multiple times in a row? The state should only transition once per call.
• What happens if the child component calls onTransitionComplete out of order? (e.g., calls ExitingDone before Exiting). The component should still function correctly, but the state might not reflect the intended transition sequence.

Examples

Example 1:

Input:
<TransitionTracker
  child={<MyComponent onTransitionComplete={() => console.log("MyComponent transition complete")}/>}
/>

Output:
Initially: "Entering"
After MyComponent calls onTransitionComplete: "EnteringDone"
Later: "Exiting"
Later: "ExitingDone"
Finally: "Finished"

Explanation: The TransitionTracker starts in Entering, transitions to EnteringDone when MyComponent calls onTransitionComplete, then to Exiting, ExitingDone, and finally Finished.

Example 2:

Input:
<TransitionTracker
  child={<MyComponent onTransitionComplete={() => console.log("Exiting Complete")}/>}
/>

Output: Initially: "Entering" After MyComponent calls onTransitionComplete: "EnteringDone" Later: "Exiting" Later: "ExitingDone" Finally: "Finished"

Explanation: Similar to Example 1, but focuses on the `Exiting` phase.

**Example 3:** (Edge Case - Child doesn't call onTransitionComplete)

Input: <TransitionTracker child={<MyComponent />} />

Output:
Initially: "Entering"
After a delay (simulating the component eventually finishing): "EnteringDone"
Later: "Exiting"
Later: "ExitingDone"
Finally: "Finished"

Explanation: The component will eventually transition to Finished even if the child doesn't explicitly call onTransitionComplete, simulating a timeout or default behavior.

Constraints

• The component must be written in TypeScript.
• The component should be reusable and not tightly coupled to any specific child component.
• The component should be performant and avoid unnecessary re-renders.
• The onTransitionComplete callback should be invoked only once per transition phase.
• The component should handle potential errors gracefully.

Notes

• Consider using the useState hook to manage the transition state.
• Think about how to ensure that the state transitions occur in the correct order.
• You can use a simple text label to display the transition state. Styling is not required for this challenge.
• The MyComponent in the examples is a placeholder; you don't need to implement it. Focus on the TransitionTracker component.
• The onTransitionComplete callback is crucial for triggering the state transitions. Make sure the child component can reliably call this callback.