This Day In History Jetpack Compose App - Welcome Screen

Objective:

Build our Welcome Screen and connect it to a mock WelcomeViewModel. At the end of this exercise, the Welcome Screen will look and behave like below.

Welcome Screen functionalities

The welcome screen will do the following:

• Display initial welcome message in English.
• Request translation of the welcome message into the device language via translation API.
• Transition into the Language Selection screen and display the translated version of "Choose Your Language".

Code

Tag Constants

Add the following constants to the ui.constants package. We will need them for unit tests.

package com.coroutines.thisdayinhistory.ui.constants
//add:
const val WELCOME_MESSAGE_TEXT_TAG = "welcomeMessageText"

Data Models

And data class TranslateRequestParams to the com.coroutines.data.models in the Models project.

package com.coroutines.data.models

data class TranslateRequestParams(
    val language: String,
    val welcomeText: String,
    val languagePrompt: String
)

Welcome ViewModel (mock viewmodel for now)

Add IWelcomeViewModel interface to the com.coroutines.thisdayinhistory.ui.viewmodels in the app project.

package com.coroutines.thisdayinhistory.ui.viewmodels

import com.coroutines.data.models.TranslateRequestParams
import com.coroutines.thisdayinhistory.ui.state.WelcomeScreenUiState
import kotlinx.coroutines.flow.StateFlow

interface IWelcomeViewModel {
    val uiScreenState: StateFlow
    val prompt: String
    fun setDefaultLanguageWelcomeMessage(welcomeMessage: String)
    fun translate(translateRequestParams: TranslateRequestParams)
}

Welcome ViewModel (mock viewmodel for now)

Add WelcomeViewModelMock class to the com.coroutines.thisdayinhistory.ui.viewmodels in the app project.

package com.coroutines.thisdayinhistory.ui.viewmodels


import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import com.coroutines.data.models.TranslateRequestParams
import com.coroutines.thisdayinhistory.ui.state.WelcomeScreenUiState
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

class WelcomeViewModelMock(
    welcomeScreenUiState: WelcomeScreenUiState =
        WelcomeScreenUiState.Initial(DEFAULT_WELCOME_MESSAGE)
): IWelcomeViewModel, ViewModel()
{
    private var _prompt: String = DEFAULT_LANGUAGE_PROMPT
    private val _screenState = MutableStateFlow(
        value = welcomeScreenUiState
    )

    override val uiScreenState: StateFlow<WelcomeScreenUiState>
        get() = _screenState

    override val prompt by lazy {
        _prompt
    }

    override fun setDefaultLanguageWelcomeMessage(welcomeMessage: String){
        _screenState.value = WelcomeScreenUiState.Initial(welcomeMessage)
    }

    override fun translate(translateRequestParams: TranslateRequestParams){
        viewModelScope.launch {
            _screenState.value =  WelcomeScreenUiState.WaitingForTranslation(translateRequestParams.welcomeText)
            delay(2000)
             _prompt = "Choose your language:"
            _screenState.value = WelcomeScreenUiState.Success("this text is translated")

        }
    }
    companion object {
        private const val DEFAULT_WELCOME_MESSAGE  = "History Cat"
        private const val DEFAULT_LANGUAGE_PROMPT  =  "Please choose your language"
    }
}

Welcome Graph

Update the Languages Screen code in the Welcome Graph to accept the prompt parameter and retrieve it from the backstack:

package com.coroutines.thisdayinhistory.graph

import androidx.compose.runtime.getValue
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.navigation.NavController
import androidx.navigation.NavGraphBuilder
import androidx.navigation.NavType
import androidx.navigation.navigation
import androidx.navigation.compose.composable
import androidx.navigation.navArgument
import com.coroutines.thisdayinhistory.ui.screens.language.LanguageScreen
import com.coroutines.thisdayinhistory.ui.screens.welcome.WelcomeScreen
import com.coroutines.thisdayinhistory.ui.viewmodels.ISettingsViewModel
import com.coroutines.thisdayinhistory.ui.viewmodels.WelcomeViewModelMock

const val langPrompt = "prompt"
fun NavGraphBuilder.introGraph(navController: NavController, settingsViewModel: ISettingsViewModel) {
    navigation(startDestination = IntroNavOption.WelcomeScreen.name, route = NavRoutes.IntroRoute.name) {
        composable(IntroNavOption.WelcomeScreen.name){
            val appConfigState by settingsViewModel.appConfigurationState.collectAsStateWithLifecycle()
            WelcomeScreen(navController, appConfigState, WelcomeViewModelMock())
        }
        /*composable(IntroNavOption.LanguagesScreen.name){
            LanguageScreen(navController = navController, viewModel = settingsViewModel)
        }*/

        composable(IntroNavOption.LanguagesScreen.name + "/{$langPrompt}",
            arguments = listOf(navArgument(langPrompt) { type = NavType.StringType })){ backStackEntry ->
            val prompt = backStackEntry.arguments?.getString(langPrompt) ?: "Please choose your language"
            LanguageScreen(
                navController= navController,
                viewModel = settingsViewModel,
                languagePrompt =  prompt
            )
        }
    }
}

MainContent

Update the MainContent function to have isOnboarded parameter set to false to trigger the Welcome Workflow.

@Composable
fun MainContent(settingsViewModel: ISettingsViewModel, appConfigState: AppConfigurationState,){
    val navController = rememberNavController()
    ThisDayInHistoryTheme(
        viewModel = settingsViewModel
    ) {
        val appThemeColor = MaterialTheme.colorScheme.background
        Surface(
            modifier = Modifier.background(appThemeColor)
        ) {
            AppNavHost(
                navController = navController,
                settingsViewModel = settingsViewModel,
                isOnboarded = false
            )
        }
    }
}