🚀 3단계 - GitHub(UI 상태)

README.md

@@ -22,3 +22,12 @@
   - [x] 비지니스 로직 구현
   - [x] UI 연결
   - [x] ViewModelFactory
+
+# step3 UI state
+
+## Response 응답에 따른 상태 UI 노출 
+
+- [x] 목록 로딩 전, 로딩 UI 노출
+- [x] 빈 목록일 경우, 빈 화면 UI 노출
+- [x] 오류 발생 시, 재시도 가능한 스낵바 노출 
+- [x] UI 테스트 작성 -> Preview 로 대체

app/src/main/java/nextstep/github/MainActivity.kt

@@ -3,19 +3,15 @@ package nextstep.github
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.activity.viewModels
 import nextstep.github.ui.GithubRepositoryScreen
-import nextstep.github.ui.GithubRepositoryViewModel
 
 class MainActivity : ComponentActivity() {
 
-    private val viewModel: GithubRepositoryViewModel by viewModels<GithubRepositoryViewModel> { GithubRepositoryViewModel.Factory }
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
 
         setContent {
-            GithubRepositoryScreen(viewModel = viewModel)
+            GithubRepositoryScreen()
         }
     }
 }

app/src/main/java/nextstep/github/data/GithubRemoteDataSource.kt

@@ -5,7 +5,12 @@ import nextstep.github.network.Result
 class GithubRemoteDataSource(
     private val githubService: GithubService
 ) {
-     suspend fun fetchRepositories(organization: String): Result<List<GithubRepositoryEntity>> {
-        return githubService.getRepositories(organization)
+    suspend fun fetchRepositories(
+        organization: String,
+        onPreLoad: () -> Unit = {},
+    ): Result<List<GithubRepositoryEntity>> {
+        return githubService
+            .also { onPreLoad.invoke() }
+            .getRepositories(organization)
     }
 }

app/src/main/java/nextstep/github/data/GithubRepository.kt

@@ -8,7 +8,13 @@ class GithubRepository(
     private val remoteDataSource: GithubRemoteDataSource = GithubRemoteDataSource(githubService)
     private val localDataSource: GithubLocalDataSource = GithubLocalDataSource()
 
-    suspend fun getRepositories(organization: String): Result<List<GithubRepositoryEntity>> {
-        return remoteDataSource.fetchRepositories(organization)
+    suspend fun getRepositories(
+        organization: String,
+        onPreLoad: () -> Unit
+    ): Result<List<GithubRepositoryEntity>> {
+        return remoteDataSource.fetchRepositories(
+            organization = organization,
+            onPreLoad = onPreLoad
+        )
     }
 }

app/src/main/java/nextstep/github/network/Result.kt

@@ -1,16 +1,18 @@
 package nextstep.github.network
 
 sealed class Result<out R> {
-    fun onSuccess(func: (R) -> Unit) {
+    fun onSuccess(func: (R) -> Unit): Result<R> {
         if (this is Success) {
             func.invoke(this.data)
         }
+        return this
     }
 
-    fun onError(func: (Throwable) -> Unit) {
+    fun onError(func: (Throwable) -> Unit): Result<R> {
         if (this is Error) {
             func.invoke(this.exception)
         }
+        return this
     }
 
     data class Success<out T>(val data: T) : Result<T>()

app/src/main/java/nextstep/github/ui/GithubRepositoryScreen.kt

@@ -2,36 +2,132 @@ package nextstep.github.ui
 
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
+import nextstep.github.ui.component.GithubRepositoryEmpty
 import nextstep.github.ui.component.GithubRepositoryList
+import nextstep.github.ui.component.GithubRepositoryLoading
+import nextstep.github.ui.component.GithubRepositorySnackBar
 import nextstep.github.ui.component.GithubRepositoryTopBar
+import nextstep.github.ui.component.dummyList
 import nextstep.github.ui.theme.GithubTheme
 
 @Composable
 internal fun GithubRepositoryScreen(
     viewModel: GithubRepositoryViewModel = viewModel<GithubRepositoryViewModel>(factory = GithubRepositoryViewModel.Factory),
 ) {
-    val githubRepositories by viewModel.githubRepositories.collectAsStateWithLifecycle()
+    val repositoryUiState by viewModel.state.repositoryUiState.collectAsStateWithLifecycle()
+
+    GithubRepositoryScreen(
+        repositoryUiState = repositoryUiState,
+        showSnackBar = repositoryUiState is GithubRepositoryState.RepositoryUiState.Error,
+        onClickSnackBarRetry = { viewModel.loadRepositories() }
+    )
+}
+
+@Composable
+private fun GithubRepositoryScreen(
+    repositoryUiState: GithubRepositoryState.RepositoryUiState,
+    showSnackBar: Boolean,
+    onClickSnackBarRetry: () -> Unit,
+) {
+
+    val snackBarHostState = remember { SnackbarHostState() }
 
     Scaffold(
-        topBar = { GithubRepositoryTopBar() }
+        topBar = { GithubRepositoryTopBar() },
+        snackbarHost = { SnackbarHost(hostState = snackBarHostState) },
     ) { innerPadding ->
-        GithubRepositoryList(
-            model = githubRepositories,
-            modifier = Modifier.padding(innerPadding),
+        val modifier = Modifier.padding(innerPadding)
+
+        when (repositoryUiState) {
+            is GithubRepositoryState.RepositoryUiState.Loading -> GithubRepositoryLoading(modifier)
+            is GithubRepositoryState.RepositoryUiState.Empty -> GithubRepositoryEmpty(modifier)
+            is GithubRepositoryState.RepositoryUiState.Data -> GithubRepositoryList(
+                model = repositoryUiState.items,
+                modifier = modifier
+            )
+
+            else -> {
+                /** do nothing */
+            }
+        }
+    }
+
+    if (showSnackBar) {
+        GithubRepositorySnackBar(
+            snackBarHostState = snackBarHostState,
+            onRetryAction = {
+                onClickSnackBarRetry()
+            }
         )
     }
 }
 
+@Composable
+private fun GithubRepositoryScreen(
+    repositoryUiState: GithubRepositoryState.RepositoryUiState,
+) {
+    GithubRepositoryScreen(
+        repositoryUiState = repositoryUiState,
+        showSnackBar = false,
+        onClickSnackBarRetry = {},
+    )
+}
+
 @Preview
 @Composable
-private fun GithubRepositoryScreePreview() {
+private fun GithubRepositoryScreeLoadingPreview() {
     GithubTheme {
-        GithubRepositoryScreen()
+        GithubRepositoryScreen(repositoryUiState = GithubRepositoryState.RepositoryUiState.Loading)
+    }
+}
+
+@Preview
+@Composable
+private fun GithubRepositoryScreeEmptyPreview() {
+    GithubTheme {
+        GithubRepositoryScreen(repositoryUiState = GithubRepositoryState.RepositoryUiState.Empty)
+    }
+}
+
+@Preview
+@Composable
+private fun GithubRepositoryScreeRepositoryPreview() {
+    GithubTheme {
+        GithubRepositoryScreen(
+            repositoryUiState = GithubRepositoryState.RepositoryUiState.Data(
+                dummyList()
+            )
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun GithubRepositoryScreeErrorPreview() {
+    var repositoryState by remember {
+        mutableStateOf<GithubRepositoryState.RepositoryUiState>(
+            GithubRepositoryState.RepositoryUiState.Error()
+        )
+    }
+
+    GithubTheme {
+        GithubRepositoryScreen(
+            repositoryUiState = repositoryState,
+            showSnackBar = repositoryState is GithubRepositoryState.RepositoryUiState.Error,
+            onClickSnackBarRetry = {
+                repositoryState = GithubRepositoryState.RepositoryUiState.Empty
+            },
+        )
     }
 }

app/src/main/java/nextstep/github/ui/GithubRepositoryViewModel.kt

@@ -7,7 +7,7 @@ import androidx.lifecycle.viewModelScope
 import androidx.lifecycle.viewmodel.initializer
 import androidx.lifecycle.viewmodel.viewModelFactory
 import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import nextstep.github.GithubApplication
@@ -19,33 +19,70 @@ class GithubRepositoryViewModel(
     private val githubRepository: GithubRepository,
 ) : ViewModel() {
 
-    private val _githubRepositories = MutableStateFlow<List<GithubRepositoryModel>>(emptyList())
-    val githubRepositories = _githubRepositories.asStateFlow()
+    private val _state = GithubRepositoryStateImpl()
+    val state: GithubRepositoryState = _state
 
     init {
         loadRepositories()
     }
 
-    private fun loadRepositories() {
+    fun loadRepositories() {
         viewModelScope.launch {
-            githubRepository.getRepositories(NEXT_STEP_ORGANIZATION)
+            githubRepository.getRepositories(
+                organization = NEXT_STEP_ORGANIZATION,
+                onPreLoad = {
+                    _state.repositoryUiState.update { GithubRepositoryState.RepositoryUiState.Loading }
+                }
+            )
                 .onSuccess { data ->
                     val result = data.mapNotNull { it.toGithubRepositoryModel() }
-                    _githubRepositories.update { result }
+                    _state.repositoryUiState.update {
+                        if (result.isEmpty()) {
+                            GithubRepositoryState.RepositoryUiState.Empty
+                        } else {
+                            GithubRepositoryState.RepositoryUiState.Data(result)
+                        }
+                    }
+                }
+                .onError { t ->
+                    _state.repositoryUiState.update {
+                        GithubRepositoryState.RepositoryUiState.Error(t)
+                    }
                 }
         }
     }
 
     companion object {
         val Factory: ViewModelProvider.Factory = viewModelFactory {
             initializer {
-                val githubRepository = (this[APPLICATION_KEY] as GithubApplication)
-                    .appContainer
-                    .githubRepository
+                val githubRepository =
+                    (this[APPLICATION_KEY] as GithubApplication).appContainer.githubRepository
                 GithubRepositoryViewModel(githubRepository)
             }
         }
     }
 }
 
+interface GithubRepositoryState {
+    val repositoryUiState: StateFlow<RepositoryUiState>
+
+    sealed interface RepositoryUiState {
+        data object Idle : RepositoryUiState
+        data object Loading : RepositoryUiState
+        data object Empty : RepositoryUiState
+        data class Data(val items: List<GithubRepositoryModel>) : RepositoryUiState
+        data class Error(val t: Throwable? = null) : RepositoryUiState
+    }
+}
+
+class GithubRepositoryStateImpl(
+    override val repositoryUiState: MutableStateFlow<GithubRepositoryState.RepositoryUiState> = MutableStateFlow(
+        GithubRepositoryState.RepositoryUiState.Idle
+    )
+) : GithubRepositoryState
+
+sealed interface GithubRepositoryEvent {
+    data object ShowSnackBar : GithubRepositoryEvent
+}
+
 private const val NEXT_STEP_ORGANIZATION = "next-step"

app/src/main/java/nextstep/github/ui/component/GithubRepositoryEmpty.kt

@@ -0,0 +1,39 @@
+package nextstep.github.ui.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import nextstep.github.R
+import nextstep.github.ui.theme.GithubTheme
+import nextstep.github.ui.theme.Typography
+
+@Composable
+internal fun GithubRepositoryEmpty(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+            .background(color = MaterialTheme.colorScheme.surface),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = stringResource(R.string.github_repositories_empty),
+            style = Typography.headlineSmall,
+        )
+    }
+}
+
+
+@Preview(showBackground = true)
+@Composable
+private fun GithubRepositoryEmptyPreview() {
+    GithubTheme {
+        GithubRepositoryEmpty()
+    }
+}

app/src/main/java/nextstep/github/ui/component/GithubRepositoryList.kt

@@ -13,11 +13,11 @@ import nextstep.github.ui.theme.GithubTheme
 
 @Composable
 internal fun GithubRepositoryList(
-    model: List<GithubRepositoryModel>, modifier: Modifier = Modifier
+    model: List<GithubRepositoryModel>,
+    modifier: Modifier = Modifier,
 ) {
     LazyColumn(
-        modifier = modifier
-    ) {
+        modifier = modifier) {
         items(
             items = model,
             key = { it.id }
@@ -39,7 +39,7 @@ private fun GithubRepositoryListPreview() {
     }
 }
 
-private fun dummyList() = buildList {
+internal fun dummyList() = buildList {
     for (index in 0..30) {
         add(
             GithubRepositoryModel(