React Concurrent Form Editing with Conflict Resolution

Building collaborative applications often involves multiple users editing the same data simultaneously. This challenge focuses on implementing a basic conflict resolution mechanism within a React form, allowing multiple users to edit the same field concurrently and gracefully handling potential conflicts. This is a crucial skill for building real-time collaborative tools.

Problem Description

You are tasked with creating a React component that represents a simple text field with concurrent editing capabilities. Multiple instances of this component can exist, potentially representing different users editing the same underlying data. The component should:

1. Maintain a local state: Each component instance should maintain its own local state for the text field's value.
2. Simulate Concurrent Edits: The component should provide a button to simulate a concurrent edit. Clicking this button will asynchronously update the component's state after a short delay (e.g., 1 second).
3. Implement Conflict Detection: When a component's state is updated (either through direct user input or the simulated concurrent edit), it should compare its current value with a "source of truth" value (provided as a prop).
4. Resolve Conflicts: If a conflict is detected (i.e., the local state and the source of truth are different), the component should display a conflict message to the user and not automatically update the source of truth. Instead, it should provide a button labeled "Resolve Conflict" that, when clicked, merges the local state with the source of truth, prioritizing the source of truth.
5. Handle No Conflicts: If no conflict is detected, the component should update the source of truth with the local state.

Key Requirements:

• Use TypeScript for type safety.
• Utilize React state management (useState).
• Implement asynchronous updates to simulate concurrent edits.
• Clearly display conflict messages to the user.
• Provide a mechanism to resolve conflicts by merging with the source of truth.
• The component should be reusable and independent.

Expected Behavior:

• The component should initially display the value provided by the sourceOfTruth prop.
• When the user types in the text field, the local state should update immediately.
• Clicking the "Simulate Concurrent Edit" button should asynchronously update the local state after a delay.
• If the local state and sourceOfTruth are different after either of these updates, a conflict message should be displayed.
• The "Resolve Conflict" button should update the local state to match the sourceOfTruth and remove the conflict message.
• If no conflict exists, the local state should update the sourceOfTruth prop.

Edge Cases to Consider:

• What happens if the sourceOfTruth prop changes while a conflict is pending? (Prioritize the source of truth on resolution).
• How should the component handle initial loading of the sourceOfTruth? (Assume it's available immediately for this challenge).
• Consider the user experience when multiple concurrent edits occur.

Examples

Example 1:

Input: sourceOfTruth = "Initial Value", User types "Edited Value", Simulate Concurrent Edit (updates to "Concurrent Edit")
Output: Conflict Message: "Conflict Detected! Local Value: Edited Value, Source of Truth: Concurrent Edit" and a "Resolve Conflict" button.
Explanation: The user's edit and the simulated edit create a conflict. The component displays a conflict message and a button to resolve it.

Example 2:

Input: sourceOfTruth = "Initial Value", User types "Edited Value", Simulate Concurrent Edit (no update)
Output: sourceOfTruth is updated to "Edited Value".
Explanation: The simulated edit hasn't occurred yet, so no conflict is detected, and the source of truth is updated.

Example 3:

Input: sourceOfTruth = "Value A", User types "Value B", Simulate Concurrent Edit (updates to "Value C"), User clicks "Resolve Conflict"
Output: Local state and sourceOfTruth are updated to "Value C", Conflict Message disappears.
Explanation: The user clicks the resolve conflict button, merging the local state with the source of truth, prioritizing the source of truth.

Constraints

• The delay for the "Simulate Concurrent Edit" button should be between 500ms and 2000ms.
• The component should be implemented as a functional component using React Hooks.
• The component should accept a sourceOfTruth prop of type string and a function updateSourceOfTruth of type (newValue: string) => void.
• The component should render a text input field and a button labeled "Simulate Concurrent Edit".
• The component should handle potential errors gracefully (though error handling beyond conflict detection is not required for this challenge).

Notes

• Focus on the core conflict resolution logic. Styling and advanced UI features are not required.
• Consider using setTimeout to simulate the asynchronous nature of concurrent edits.
• Think about how to efficiently compare the local state and the sourceOfTruth.
• The updateSourceOfTruth function is provided to allow the parent component to manage the global state. Your component should not directly modify the global state; it should only call this function when a conflict is resolved or when there is no conflict.