From 7a648a77b092581676d85e35f23f06078177bbff Mon Sep 17 00:00:00 2001 From: Harsh Shandilya Date: Tue, 7 Nov 2023 13:09:05 +0530 Subject: [PATCH] feat(common): add swipe action for saving posts --- CHANGELOG.md | 1 + .../claw/android/ui/lists/LobstersListItem.kt | 26 ++++++++- .../claw/common/posts/LobstersCard.kt | 56 ++++--------------- 3 files changed, 35 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd64aed5..27da243b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 * Start work on integrating Shiori (https://github.com/go-shiori/shiori/) as a remote backup target for saved posts * Make top app bar color match bottom bar +* Add a left-to-right swipe action to save a post ## [1.37.0] - 2023-10-06 diff --git a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/lists/LobstersListItem.kt b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/lists/LobstersListItem.kt index e2651480..a2fa74c3 100644 --- a/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/lists/LobstersListItem.kt +++ b/android/src/main/kotlin/dev/msfjarvis/claw/android/ui/lists/LobstersListItem.kt @@ -8,10 +8,15 @@ package dev.msfjarvis.claw.android.ui.lists import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.Reply +import androidx.compose.material.icons.filled.Favorite +import androidx.compose.material.icons.filled.FavoriteBorder import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.produceState +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.rememberVectorPainter import dev.msfjarvis.claw.common.posts.LobstersCard @@ -29,20 +34,37 @@ fun LobstersListItem( modifier: Modifier = Modifier, ) { val read by produceState(false, item.shortId) { value = isRead(item.shortId) } + var saved by remember(item.shortId) { mutableStateOf(isSaved(item)) } val commentsAction = SwipeAction( icon = rememberVectorPainter(Icons.AutoMirrored.Filled.Reply), background = MaterialTheme.colorScheme.tertiary, onSwipe = { postActions.viewCommentsPage(item.commentsUrl) }, ) + val saveAction = + SwipeAction( + icon = + rememberVectorPainter(if (saved) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder), + background = MaterialTheme.colorScheme.tertiary, + onSwipe = { + postActions.toggleSave(item) + saved = isSaved(item) + }, + ) SwipeableActionsBox( + startActions = listOf(saveAction), endActions = listOf(commentsAction), ) { LobstersCard( post = item, - isSaved = isSaved(item), + isSaved = saved, isRead = read, - postActions = postActions, + viewComments = postActions::viewComments, + toggleSave = { post -> + postActions.toggleSave(post) + saved = isSaved(post) + }, + viewPost = postActions::viewPost, modifier = modifier, ) } diff --git a/common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt b/common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt index 0100214f..d5dc8502 100644 --- a/common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt +++ b/common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt @@ -36,10 +36,6 @@ import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text 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.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip @@ -52,9 +48,6 @@ import dev.msfjarvis.claw.common.theme.LobstersTheme import dev.msfjarvis.claw.common.ui.NetworkImage import dev.msfjarvis.claw.common.ui.preview.ThemePreviews import dev.msfjarvis.claw.database.local.SavedPost -import dev.msfjarvis.claw.model.LinkMetadata -import dev.msfjarvis.claw.model.LobstersPostDetails -import dev.msfjarvis.claw.model.User import kotlinx.collections.immutable.ImmutableList import kotlinx.collections.immutable.toImmutableList @@ -63,15 +56,16 @@ fun LobstersCard( post: SavedPost, isSaved: Boolean, isRead: Boolean, - postActions: PostActions, + viewComments: (String) -> Unit, + toggleSave: (SavedPost) -> Unit, + viewPost: (String, String, String) -> Unit, modifier: Modifier = Modifier, ) { - var localSavedState by remember(post, isSaved) { mutableStateOf(isSaved) } Box( modifier = modifier .fillMaxWidth() - .clickable { postActions.viewPost(post.shortId, post.url, post.commentsUrl) } + .clickable { viewPost(post.shortId, post.url, post.commentsUrl) } .background(MaterialTheme.colorScheme.background) .padding(start = 16.dp, top = 16.dp, end = 4.dp, bottom = 16.dp), ) { @@ -90,12 +84,8 @@ fun LobstersCard( horizontalAlignment = Alignment.CenterHorizontally, ) { SaveButton( - isSaved = localSavedState, - modifier = - Modifier.clickable(role = Role.Button) { - localSavedState = !localSavedState - postActions.toggleSave(post) - }, + isSaved = isSaved, + modifier = Modifier.clickable(role = Role.Button) { toggleSave(post) }, ) HorizontalDivider(modifier = Modifier.width(48.dp)) CommentsButton( @@ -103,7 +93,7 @@ fun LobstersCard( modifier = Modifier.clickable( role = Role.Button, - onClick = { postActions.viewComments(post.shortId) }, + onClick = { viewComments(post.shortId) }, ), ) } @@ -267,35 +257,9 @@ fun LobstersCardPreview() { ), isRead = true, isSaved = true, - postActions = - object : PostActions { - override fun viewPost(postId: String, postUrl: String, commentsUrl: String) {} - - override fun viewComments(postId: String) {} - - override fun viewCommentsPage(commentsUrl: String) {} - - override fun toggleSave(post: SavedPost) {} - - override suspend fun getComments(postId: String): LobstersPostDetails { - return LobstersPostDetails( - shortId = "ooga", - title = "Simple Anomaly Detection Using Plain SQL", - url = "https://hakibenita.com/sql-anomaly-detection", - createdAt = "2020-09-21T08:04:24.000-05:00", - commentCount = 1, - commentsUrl = "https://lobste.rs/s/q1hh1g/simple_anomaly_detection_using_plain_sql", - tags = listOf("databases", "apis"), - description = "", - submitter = User("Haki", "", "", "", ""), - comments = emptyList(), - ) - } - - override suspend fun getLinkMetadata(url: String): LinkMetadata { - return LinkMetadata("", "") - } - }, + viewPost = { _, _, _ -> }, + viewComments = {}, + toggleSave = {}, ) } }