Skip to content

Commit

Permalink
Introduce FeedScreenState to separate UI related logic, state and UI
Browse files Browse the repository at this point in the history
  • Loading branch information
takahirom committed Nov 5, 2021
1 parent c029156 commit 2ce7e40
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 62 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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")
Expand All @@ -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
Expand Down Expand Up @@ -477,7 +437,9 @@ fun PreviewFeedScreen() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
Expand All @@ -499,7 +461,9 @@ fun PreviewDarkFeedScreen() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
Expand All @@ -519,7 +483,9 @@ fun PreviewFeedScreenWhenDroidKaigiEnd() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
Expand All @@ -541,7 +507,9 @@ fun PreviewDarkFeedScreenWhenDroidKaigiEnd() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
Expand All @@ -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 = {},
Expand Down
Original file line number Diff line number Diff line change
@@ -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)
}
}
2 changes: 2 additions & 0 deletions uicomponent-compose/main/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 2ce7e40

Please sign in to comment.