Handle multiple predefined states

StatefulSurface<T> Composable

StatefulSurface Composable: A Versatile Component for Managing Multiple States

Purpose:

The StatefulSurface composable is a reusable component designed to handle multiple predefined states within a screen. It provides a structured way to manage the flow between different states and display the appropriate content based on the current state.

Parameters:

• state: A State object representing the current state of the component.

• initialContent: A composable function that returns the initial content to be displayed.

• loadingView: A composable function that returns a loading view to be displayed while data is being fetched.

• errorView: A composable function that takes an ErrMessage and returns an error view to be displayed in case of errors.

• resultContent: A composable function that takes the result data and returns the content to be displayed when the operation is successful.

Functionality:

1. Initial State: The component starts in the State.Init state, displaying the initialContent.

2. State Transitions: As the user interacts with the component, the state can transition to State.Loading (while data is being fetched) or State.Result (with either a success or error result).

3. Content Rendering: Based on the current state, the appropriate content is displayed:

   • State.Init: Displays the initialContent.

   • State.Loading: Displays the loadingView.

   • State.Result: Displays the resultContent if the result is successful, or the errorView if an error occurred.

Scenario: Signup Process

In the provided signup scenario, the StatefulSurface can be used to manage the different stages of the signup process:

1. Initial State: Show the login page with a signup button.

2. Signup Page: When the user clicks the signup button, transition to the signup page.

3. Verification Code Page: After the user submits the signup form, transition to the verification code page.

4. Success or Error: When the verification code is submitted, transition to either the success page (if the code is valid) or the verification code page with an error message (if the code is invalid).

Example Usage:

Kotlin

StatefulSurface(
    state = signupViewModel.state,
    initialContent = { LoginPage() },
    loadingView = { CircularProgressIndicator() },
    errorView = { errMsg -> Text(text = "Error: $errMsg") },
    resultContent = {
        if (it is Success) {
            SuccessPage()
        } else {
            VerificationCodePage(errorMessage = it as? Failure)
        }
    }
)

Key Benefits:

• Simplified State Management: Handles multiple states and transitions in a structured way.

• Customizable Views: Allows you to provide custom views for each state.

• Reusable Component: Can be reused in multiple parts of your application.

• Clear Structure: Encourages a consistent approach to managing view states.

By using StatefulSurface, you can streamline your UI development and improve the user experience by providing a clear and intuitive flow between different states.