Jetpack Compose - unresolved refence when using viewmodel value in LazyColumn - kotlin

Question

For my college project I want to use data from Firestore, and then use MVVM pattern to display the items on the Lazy Column.
Here is the code of the screen of where I want the values of viewmodel to be displayed:
fun HomeScreen (navController: NavController, viewModel: ArticleViewModel = hiltViewModel()){
var expanded = remember { mutableStateOf(false) }
val articleResponse = viewModel.articleState.value
Scaffold() {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
) {
items(items = articleResponse.data) {
ArticleList(model = it) { model ->
Log.d("TAG", "Clicked on $model")
navController.navigate(route = NavScreens.DetailScreen.name +"/$model")
}
}
}
}
}
Here is the field of where exactly I get the error that is I mentioned in the title:
here
Previously I used an array to display the item in the LazyColumn and it worked normally.
Perhaps, the problem lies in the ViewModel? Here is the ViewModel that I'm using:
#HiltViewModel
class ArticleViewModel #Inject constructor(
private val useCases: UseCases
):ViewModel() {
private val _articleState = mutableStateOf<Response<List<Article>>>(Response.Loading)
val articleState: State<Response<List<Article>>> = _articleState
init {
getArticles()
}
private fun getArticles() {
viewModelScope.launch {
useCases.getArticle().collect { response ->
_articleState.value = response
}
}
}
}
When I tried searching for the solution, I've read that the problem could be with the dependencies/plugins, I have tried changing couple of the dependencies but the issue still persists. I've heard that some of the plugins doesn't work with others since I'm new to jetpack compose it is harder for me to identify the issues within the dependencies.
Here is my Gradle files:
buildscript {
ext {
compose_version = '1.0.1'
hilt_version = "2.40.5"
gradle_version = "7.2.0"
kotlin_version = "1.6.20"
coroutines_version = "1.6.1"
google_services_version = "4.3.10"
hilt_version = "2.40.5"
core_version = "1.7.0"
appcompat_version = "1.4.1"
live_data_version = "2.4.1"
activity_compose_version = "1.4.0"
material_version = "1.6.0"
hilt_navigation_compose_version = "1.0.0"
firebase_bom_version = "30.0.0"
}
repositories {
google()
mavenCentral()
}
dependencies {
classpath 'com.google.gms:google-services:4.3.4'
classpath "com.google.dagger:hilt-android-gradle-plugin:$hilt_version"
classpath "com.android.tools.build:gradle:$gradle_version"
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
classpath "com.google.gms:google-services:$google_services_version"
}
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
id 'com.android.application' version '7.1.3' apply false
id 'com.android.library' version '7.1.3' apply false
id 'org.jetbrains.kotlin.android' version '1.5.21' apply false
}
task clean(type: Delete) {
delete rootProject.buildDir
}
plugins {
id 'com.android.application'
id 'kotlin-android'
id 'com.google.gms.google-services'
id 'dagger.hilt.android.plugin'
id 'kotlin-kapt'
}
android {
compileSdk 31
defaultConfig {
applicationId "com.example.flow"
minSdk 28
targetSdk 31
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary true
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion compose_version
kotlinCompilerVersion '1.5.21'
}
packagingOptions {
resources {
excludes += '/META-INF/{AL2.0,LGPL2.1}'
}
}
}
dependencies {
implementation "androidx.compose.compiler:compiler:1.0.0-beta08"
implementation 'androidx.core:core-ktx:1.7.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.0-alpha02'
implementation "androidx.appcompat:appcompat:$appcompat_version"
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
implementation "androidx.core:core-splashscreen:1.0.0-beta02"
implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
implementation("io.coil-kt:coil-compose:2.1.0")
implementation "com.google.firebase:firebase-firestore:22.0.1"
implementation "com.google.dagger:hilt-android:$hilt_version"
implementation platform("com.google.firebase:firebase-bom:$firebase_bom_version")
implementation "com.google.firebase:firebase-firestore-ktx"
kapt "com.google.dagger:hilt-android-compiler:$hilt_version"
kapt "androidx.hilt:hilt-compiler:1.0.0"
implementation "androidx.hilt:hilt-navigation-compose:$hilt_navigation_compose_version"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-play-services:$coroutines_version"
implementation "androidx.lifecycle:lifecycle-livedata-ktx:$live_data_version"
}
I would be grateful if you are able to assist me on finding the solution.

Answer 1

The problem is that articleState.value is Response not List. You can do something like that:
val articleResponse = viewModel.articleState.value
when (articleResponse) {
Response.Loading -> <LoadingComponenet />
Response.Error -> <ErrorComponent />
Response.Success -> Scaffold() {
.............
}
}