Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce FeedScreenState to separate UI related logic, state and UI #753

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,36 +11,29 @@ 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
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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 @@ -64,10 +57,8 @@ 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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[spotless] reported by reviewdog 🐶

Suggested change
import io.github.droidkaigi.feeder.core.TabIndicator
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
Expand Down Expand Up @@ -97,77 +88,39 @@ sealed class FeedTab(val name: String, val routePath: String) {
@OptIn(ExperimentalPagerApi::class, ExperimentalMaterialApi::class)
@Composable
fun FeedScreen(
selectedTab: FeedTab,
feedScreenState: FeedScreenState = rememberFeedScreenState(),
pagerState: PagerState,
onSelectedTab: (FeedTab) -> Unit,
onNavigationIconClick: () -> Unit,
onDroidKaigi2021ArticleClick: () -> Unit,
isDroidKaigiEnd: MutableState<Boolean>,
isDroidKaigiEnd: 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

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))
},
onFavoriteChange = feedScreenState::onFavoriteChange,
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))
},
onClickPlayPodcastButton = feedScreenState::onPotcastPlayButtonClick,
onClickDroidKaigi2021Article = onDroidKaigi2021ArticleClick,
isDroidKaigiEnd = isDroidKaigiEnd
)
Expand All @@ -192,7 +145,7 @@ private fun FeedScreen(
onClickFeed: (FeedItem) -> Unit,
onClickPlayPodcastButton: (FeedItem.Podcast) -> Unit,
onClickDroidKaigi2021Article: () -> Unit,
isDroidKaigiEnd: MutableState<Boolean>,
isDroidKaigiEnd: Boolean,
) {
val density = LocalDensity.current
BackdropScaffold(
Expand Down Expand Up @@ -303,7 +256,7 @@ private fun FeedList(
onClickArticleItem: () -> Unit,
listState: LazyListState,
isFilterState: Boolean,
isDroidKaigiEnd: MutableState<Boolean>,
isDroidKaigiEnd: Boolean,
) {
val isHome = feedTab is FeedTab.Home
Surface(
Expand Down Expand Up @@ -332,14 +285,14 @@ private fun FeedList(
if (isHome && index == 0) {
if (isFilterState) {
FilterItemCountRow(feedContents.size.toString())
} else if (!isDroidKaigiEnd.value) {
} else if (!isDroidKaigiEnd) {
DroidKaigi2021ArticleItem(
onClick = onClickArticleItem,
shouldPadding = isFilterState,
)
}
}
if (isDroidKaigiEnd.value && isHome && index == 0) {
if (isDroidKaigiEnd && isHome && index == 0) {
FirstFeedItem(
feedItem = feedItem,
favorited = favorited,
Expand Down Expand Up @@ -477,11 +430,13 @@ fun PreviewFeedScreen() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
isDroidKaigiEnd = remember { mutableStateOf(false) },
isDroidKaigiEnd = false,
) { feedItem: FeedItem ->
}
}
Expand All @@ -499,11 +454,13 @@ fun PreviewDarkFeedScreen() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
isDroidKaigiEnd = remember { mutableStateOf(false) },
isDroidKaigiEnd = false,
) { feedItem: FeedItem ->
}
}
Expand All @@ -519,11 +476,13 @@ fun PreviewFeedScreenWhenDroidKaigiEnd() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
isDroidKaigiEnd = remember { mutableStateOf(true) },
isDroidKaigiEnd = true,
) { feedItem: FeedItem ->
}
}
Expand All @@ -541,11 +500,13 @@ fun PreviewDarkFeedScreenWhenDroidKaigiEnd() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.Home,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.Home)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
isDroidKaigiEnd = remember { mutableStateOf(true) },
isDroidKaigiEnd = true,
) { feedItem: FeedItem ->
}
}
Expand All @@ -561,11 +522,13 @@ fun PreviewFeedScreenWithStartBlog() {
provideFmPlayerViewModelFactory { fakeFmPlayerViewModel() }
) {
FeedScreen(
selectedTab = FeedTab.FilteredFeed.Blog,
pagerState = rememberPagerState(
initialPage = FeedTab.values().indexOf(FeedTab.FilteredFeed.Blog)
),
onSelectedTab = {},
onNavigationIconClick = {},
onDroidKaigi2021ArticleClick = {},
isDroidKaigiEnd = remember { mutableStateOf(false) },
isDroidKaigiEnd = false,
) { feedItem: FeedItem ->
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
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 = 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
Loading