FE - Update Input Component with Legend State for State Management

[sanjaysah101]

Issue Description

This issue proposes updating the existing Input component to leverage Legend State for managing its state and props. This will improve efficiency and simplify state handling in the component.

Current Approach:

• The Input component manages its state using traditional React props (value, onChange, etc.).
• This approach can lead to boilerplate code and difficulty managing complex input states (e.g., validation errors, loading states).

Proposed Update:

• Utilize Legend State to create observables for the following:
  • value: The current value of the input field.
  • isValid: Boolean flag indicating the validity of the input (optional).
  • errorMessage: Optional error message to display if isValid is false.
• Update the component to use observables instead of props:
  • Access the value observable using useObservable hook from Legend State.
  • Bind the onChange event handler to update the value observable.
  • Conditionally render validation errors based on the isValid and errorMessage observables.

Benefits:

• Improved state management with Legend State's reactivity.
• Reduced boilerplate code by eliminating the need for multiple props.
• Easier handling of complex input states (e.g., validation, loading).

ref: https://github.com/LegendApp/legend-state