Introduce FeedScreenState to separate UI related logic, state and UI

uicomponent-compose/core/src/main/java/io/github/droidkaigi/feeder/core/UnidirectionalViewModel.kt

@@ -28,6 +28,18 @@ inline fun <reified STATE, EFFECT, EVENT> use(
     )
 }
 
+@Composable
+inline fun <reified STATE> UnidirectionalViewModel<*, *, STATE>.state(): STATE {
+    val state by state.collectAsState()
+    return state
+}
+
+inline fun <reified EVENT> UnidirectionalViewModel<EVENT, *, *>.dispatcher(): (EVENT) -> Unit {
+    return { event ->
+        event(event)
+    }
+}
+
 interface UnidirectionalViewModel<EVENT, EFFECT, STATE> {
     val state: StateFlow<STATE>
     val effect: Flow<EFFECT>

uicomponent-compose/feed/src/main/java/io/github/droidkaigi/feeder/feed/FeedScreen.kt

@@ -11,24 +11,20 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.BackdropScaffold
 import androidx.compose.material.BackdropScaffoldState
-import androidx.compose.material.BackdropValue
 import androidx.compose.material.Divider
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ScrollableTabRow
 import androidx.compose.material.SnackbarHost
-import androidx.compose.material.SnackbarResult
 import androidx.compose.material.Surface
 import androidx.compose.material.Tab
 import androidx.compose.material.Text
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.primarySurface
-import androidx.compose.material.rememberBackdropScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.MutableState
@@ -40,7 +36,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.semantics
@@ -62,15 +57,13 @@ import io.github.droidkaigi.feeder.FeedContents
 import io.github.droidkaigi.feeder.FeedItem
 import io.github.droidkaigi.feeder.Filters
 import io.github.droidkaigi.feeder.Theme
-import io.github.droidkaigi.feeder.core.R as CoreR
 import io.github.droidkaigi.feeder.core.TabIndicator
-import io.github.droidkaigi.feeder.core.getReadableMessage
 import io.github.droidkaigi.feeder.core.theme.AppThemeWithBackground
 import io.github.droidkaigi.feeder.core.theme.greenDroid
-import io.github.droidkaigi.feeder.core.use
 import io.github.droidkaigi.feeder.core.util.collectInLaunchedEffect
-import kotlin.reflect.KClass
 import kotlinx.coroutines.launch
+import kotlin.reflect.KClass
+import io.github.droidkaigi.feeder.core.R as CoreR
 
 sealed class FeedTab(val name: String, val routePath: String) {
     object Home : FeedTab("Home", "home")
@@ -97,76 +90,43 @@ sealed class FeedTab(val name: String, val routePath: String) {
 @OptIn(ExperimentalPagerApi::class, ExperimentalMaterialApi::class)
 @Composable
 fun FeedScreen(
-    selectedTab: FeedTab,
+    pagerState: PagerState,
     onSelectedTab: (FeedTab) -> Unit,
     onNavigationIconClick: () -> Unit,
     onDroidKaigi2021ArticleClick: () -> Unit,
     isDroidKaigiEnd: MutableState<Boolean>,
     onDetailClick: (FeedItem) -> Unit,
 ) {
-    val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed)
-    val pagerState = rememberPagerState(
-        initialPage = FeedTab.values().indexOf(selectedTab)
-    )
-
-    val (
-        state,
-        effectFlow,
-        dispatch,
-    ) = use(feedViewModel())
-
-    val (
-        fmPlayerState,
-        fmPlayerEffectFlow,
-        fmPlayerDispatch,
-    ) = use(fmPlayerViewModel())
-
-    val context = LocalContext.current
+    val feedScreenState: FeedScreenState = rememberFeedScreenState()
 
-    effectFlow.collectInLaunchedEffect { effect ->
+    feedScreenState.effect.collectInLaunchedEffect { effect ->
         when (effect) {
             is FeedViewModel.Effect.ErrorMessage -> {
-                when (
-                    scaffoldState.snackbarHostState.showSnackbar(
-                        message = effect.appError.getReadableMessage(context),
-                        actionLabel = "Reload",
-                    )
-                ) {
-                    SnackbarResult.ActionPerformed -> {
-                        dispatch(FeedViewModel.Event.ReloadContent)
-                    }
-                    SnackbarResult.Dismissed -> {
-                    }
-                }
+                feedScreenState.onErrorMessage(effect)
+
             }
         }
     }
-    val tabLazyListStates = FeedTab.values()
-        .map { it to rememberLazyListState() }
-        .toMap()
 
+    val uiState = feedScreenState.uiState
     FeedScreen(
-        scaffoldState = scaffoldState,
+        scaffoldState = feedScreenState.scaffoldState,
         pagerState = pagerState,
-        tabLazyListStates = tabLazyListStates,
-        feedContents = state.filteredFeedContents,
-        fmPlayerState = fmPlayerState,
-        filters = state.filters,
+        tabLazyListStates = feedScreenState.tabLazyListStates,
+        feedContents = uiState.filteredFeedContents,
+        fmPlayerState = feedScreenState.fmPlayerUiState,
+        filters = uiState.filters,
         onSelectTab = onSelectedTab,
         onNavigationIconClick = onNavigationIconClick,
         onFavoriteChange = {
-            dispatch(FeedViewModel.Event.ToggleFavorite(feedItem = it))
+            feedScreenState.onFavoriteChange(it)
         },
         onFavoriteFilterChanged = {
-            dispatch(
-                FeedViewModel.Event.ChangeFavoriteFilter(
-                    filters = state.filters.copy(filterFavorite = it)
-                )
-            )
+            feedScreenState.onFavoriteFilterChange(uiState.filters, it)
         },
         onClickFeed = onDetailClick,
         onClickPlayPodcastButton = {
-            fmPlayerDispatch(FmPlayerViewModel.Event.ChangePlayerState(it.podcastLink))
+            feedScreenState.onPotcastPlayButtonClick(it)
         },
         onClickDroidKaigi2021Article = onDroidKaigi2021ArticleClick,
         isDroidKaigiEnd = isDroidKaigiEnd
@@ -477,7 +437,9 @@ fun PreviewFeedScreen() {
             provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
         ) {
             FeedScreen(
-                selectedTab = FeedTab.Home,
+                pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(FeedTab.Home)
+                ),
                 onSelectedTab = {},
                 onNavigationIconClick = {},
                 onDroidKaigi2021ArticleClick = {},
@@ -499,7 +461,9 @@ fun PreviewDarkFeedScreen() {
             provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
         ) {
             FeedScreen(
-                selectedTab = FeedTab.Home,
+                pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(FeedTab.Home)
+                ),
                 onSelectedTab = {},
                 onNavigationIconClick = {},
                 onDroidKaigi2021ArticleClick = {},
@@ -519,7 +483,9 @@ fun PreviewFeedScreenWhenDroidKaigiEnd() {
             provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
         ) {
             FeedScreen(
-                selectedTab = FeedTab.Home,
+                pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(FeedTab.Home)
+                ),
                 onSelectedTab = {},
                 onNavigationIconClick = {},
                 onDroidKaigi2021ArticleClick = {},
@@ -541,7 +507,9 @@ fun PreviewDarkFeedScreenWhenDroidKaigiEnd() {
             provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
         ) {
             FeedScreen(
-                selectedTab = FeedTab.Home,
+                pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(FeedTab.Home)
+                ),
                 onSelectedTab = {},
                 onNavigationIconClick = {},
                 onDroidKaigi2021ArticleClick = {},
@@ -561,7 +529,9 @@ fun PreviewFeedScreenWithStartBlog() {
             provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
         ) {
             FeedScreen(
-                selectedTab = FeedTab.FilteredFeed.Blog,
+                pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(FeedTab.FilteredFeed.Blog)
+                ),
                 onSelectedTab = {},
                 onNavigationIconClick = {},
                 onDroidKaigi2021ArticleClick = {},

uicomponent-compose/feed/src/main/java/io/github/droidkaigi/feeder/feed/FeedScreenState.kt

@@ -0,0 +1,85 @@
+package io.github.droidkaigi.feeder.feed
+
+import android.content.Context
+import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material.BackdropScaffoldState
+import androidx.compose.material.BackdropValue
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.SnackbarResult
+import androidx.compose.material.rememberBackdropScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.platform.LocalContext
+import io.github.droidkaigi.feeder.FeedItem
+import io.github.droidkaigi.feeder.Filters
+import io.github.droidkaigi.feeder.core.dispatcher
+import io.github.droidkaigi.feeder.core.getReadableMessage
+import io.github.droidkaigi.feeder.core.state
+import kotlinx.coroutines.flow.Flow
+
+@OptIn(ExperimentalMaterialApi::class)
+class FeedScreenState(
+    private val feedViewModel: FeedViewModel,
+    private val fmPlayerViewModel: FmPlayerViewModel,
+    val scaffoldState: BackdropScaffoldState,
+    val context: Context,
+) {
+    val uiState: FeedViewModel.State @Composable get() = feedViewModel.state()
+    private val dispatcher: (FeedViewModel.Event) -> Unit get() = feedViewModel.dispatcher()
+    val effect: Flow<FeedViewModel.Effect> get() = feedViewModel.effect
+
+    val fmPlayerUiState: FmPlayerViewModel.State @Composable get() = fmPlayerViewModel.state()
+    private val fmPlayerDispatcher: (FmPlayerViewModel.Event) -> Unit
+        get() = fmPlayerViewModel.dispatcher()
+
+    val tabLazyListStates
+        @Composable get() = FeedTab.values()
+            .map { it to rememberLazyListState() }
+            .toMap()
+
+
+    suspend fun onErrorMessage(effect: FeedViewModel.Effect.ErrorMessage) {
+        when (
+            scaffoldState.snackbarHostState.showSnackbar(
+                message = effect.appError.getReadableMessage(context),
+                actionLabel = "Reload",
+            )
+        ) {
+            SnackbarResult.ActionPerformed -> {
+                dispatcher(FeedViewModel.Event.ReloadContent)
+            }
+            SnackbarResult.Dismissed -> {
+            }
+        }
+    }
+
+    fun onFavoriteChange(feedItem: FeedItem) {
+        dispatcher(FeedViewModel.Event.ToggleFavorite(feedItem = feedItem))
+    }
+
+    fun onFavoriteFilterChange(currentFilters: Filters, isFavoriteFiltered: Boolean) {
+        dispatcher(
+            FeedViewModel.Event.ChangeFavoriteFilter(
+                filters = currentFilters.copy(filterFavorite = isFavoriteFiltered)
+
+            )
+        )
+    }
+
+    fun onPotcastPlayButtonClick(podcast: FeedItem.Podcast) {
+        fmPlayerDispatcher(FmPlayerViewModel.Event.ChangePlayerState(podcast.podcastLink))
+    }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun rememberFeedScreenState(
+    feedViewModel: FeedViewModel = feedViewModel(),
+    fmPlayerViewModel: FmPlayerViewModel = fmPlayerViewModel(),
+    scaffoldState: BackdropScaffoldState = rememberBackdropScaffoldState(BackdropValue.Concealed),
+    context: Context = LocalContext.current,
+): FeedScreenState {
+    return remember {
+        FeedScreenState(feedViewModel, fmPlayerViewModel, scaffoldState, context)
+    }
+}

uicomponent-compose/main/build.gradle

@@ -50,6 +50,8 @@ dependencies {
     implementation Dep.Accompanist.insets
     implementation Dep.Accompanist.systemuicontroller
 
+    implementation Dep.Accompanist.pager
+
     implementation (Dep.Coroutines.core) {
         version {
             strictly Versions.coroutines

uicomponent-compose/main/src/main/java/io/github/droidkaigi/feeder/AppContent.kt

@@ -22,6 +22,8 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.navArgument
 import androidx.navigation.navDeepLink
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.rememberPagerState
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import io.github.droidkaigi.feeder.core.R as CoreR
 import io.github.droidkaigi.feeder.core.navigation.chromeCustomTabs
@@ -44,6 +46,7 @@ private const val TIMETABLE_DETAIL_PATH = "timetable/detail/"
 
 private val drawerOpenedStatusBarColor = Color.Black.copy(alpha = 0.48f)
 
+@OptIn(ExperimentalPagerApi::class)
 @Composable
 fun AppContent(
     modifier: Modifier = Modifier,
@@ -104,9 +107,12 @@ fun AppContent(
                 )
                 val selectedTab = FeedTab.ofRoutePath(routePath.value)
                 drawerContentState.onSelectDrawerContent(selectedTab)
+                val pagerState = rememberPagerState(
+                    initialPage = FeedTab.values().indexOf(selectedTab)
+                )
                 FeedScreen(
                     onNavigationIconClick = onNavigationIconClick,
-                    selectedTab = selectedTab,
+                    pagerState = pagerState,
                     onSelectedTab = { feedTab ->
                         // We don't use navigation component transitions here for animation.
                         routePath.value = feedTab.routePath