Merge pull request #550 from code-payments/feat/create-chat-flow

chore: add initial create chat flow stub screen

Author: bmc08gt

app/src/main/java/com/getcode/navigation/screens/ChatScreens.kt

@@ -4,7 +4,9 @@ import android.widget.Toast
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Text
@@ -30,17 +32,14 @@ import com.getcode.model.chat.Reference
 import com.getcode.navigation.core.LocalCodeNavigator
 import com.getcode.theme.CodeTheme
 import com.getcode.ui.components.chat.UserAvatar
-import com.getcode.ui.components.chat.utils.localized
 import com.getcode.util.formatDateRelatively
-import com.getcode.view.main.chat.ChatScreen
-import com.getcode.view.main.chat.ChatViewModel
 import com.getcode.view.main.chat.conversation.ChatConversationScreen
 import com.getcode.view.main.chat.conversation.ConversationViewModel
+import com.getcode.view.main.chat.create.byusername.ChatByUsernameScreen
 import com.getcode.view.main.chat.list.ChatListScreen
 import com.getcode.view.main.chat.list.ChatListViewModel
 import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.launchIn
-import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
 import kotlinx.parcelize.IgnoredOnParcel
 import kotlinx.parcelize.Parcelize
@@ -61,48 +60,32 @@ data object ChatListModal: ChatGraph, ModalRoot {
         ) {
             val viewModel = getViewModel<ChatListViewModel>()
 //            val conversations = viewModel.conversations.collectAsLazyPagingItems()
-            ChatListScreen(dispatch = {})
+            ChatListScreen(viewModel)
         }
     }
 }
 
 @Parcelize
-data class ChatScreen(val chatId: ID) : ChatGraph, ModalContent {
+data object ChatByUsernameScreen: ChatGraph, ModalContent {
     @IgnoredOnParcel
     override val key: ScreenKey = uniqueScreenKey
 
+    override val name: String
+        @Composable get() = stringResource(id = R.string.title_whatsTheirUsername)
+
     @Composable
     override fun Content() {
-        val vm = getViewModel<ChatViewModel>()
-        val state by vm.stateFlow.collectAsState()
-        val navigator = LocalCodeNavigator.current
-
         ModalContainer(
-            titleString = { state.title.localized },
-            backButtonEnabled = { it is ChatScreen },
+            backButtonEnabled = { it is ChatByUsernameScreen },
         ) {
-            val messages = vm.chatMessages.collectAsLazyPagingItems()
-            ChatScreen(state = state, messages = messages, dispatch = vm::dispatchEvent)
-        }
-
-        LaunchedEffect(vm) {
-            vm.eventFlow
-                .filterIsInstance<ChatViewModel.Event.OpenMessageChat>()
-                .map { it.reference }
-                .filterIsInstance<Reference.IntentId>()
-                .map { it.id }
-                .onEach { navigator.push(ChatMessageConversationScreen(intentId = it)) }
-                .launchIn(this)
-        }
-
-        LaunchedEffect(chatId) {
-            vm.dispatchEvent(ChatViewModel.Event.OnChatIdChanged(chatId))
+            ChatByUsernameScreen(getViewModel())
         }
     }
 }
 
 @Parcelize
 data class ChatMessageConversationScreen(
+    val username: String? = null,
     val chatId: ID? = null,
     val intentId: ID? = null
 ) : AppScreen(), ChatGraph, ModalContent {
@@ -144,6 +127,10 @@ data class ChatMessageConversationScreen(
                                 }
                             )
                         }
+
+                        if (state.users.isEmpty()) {
+                            Spacer(modifier = Modifier.requiredWidth(CodeTheme.dimens.grid.x3))
+                        }
                     }
 
                     Column {

app/src/main/java/com/getcode/navigation/screens/MainScreens.kt

@@ -4,23 +4,28 @@ import androidx.compose.material.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.BubbleChart
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.lifecycle.Lifecycle
+import androidx.paging.compose.collectAsLazyPagingItems
 import cafe.adriel.voyager.core.lifecycle.LifecycleEffect
 import cafe.adriel.voyager.core.screen.ScreenKey
 import cafe.adriel.voyager.core.screen.uniqueScreenKey
 import cafe.adriel.voyager.hilt.getViewModel
 import cafe.adriel.voyager.navigator.currentOrThrow
 import com.getcode.LocalSession
 import com.getcode.R
+import com.getcode.model.ID
+import com.getcode.model.chat.Reference
 import com.getcode.models.DeepLinkRequest
 import com.getcode.navigation.core.LocalCodeNavigator
 import com.getcode.ui.components.SheetTitleDefaults
+import com.getcode.ui.components.chat.utils.localized
 import com.getcode.ui.utils.RepeatOnLifecycle
 import com.getcode.ui.utils.getActivityScopedViewModel
 import com.getcode.utils.trace
@@ -29,11 +34,15 @@ import com.getcode.view.main.account.AccountHome
 import com.getcode.view.main.account.AccountSheetViewModel
 import com.getcode.view.main.balance.BalanceScreen
 import com.getcode.view.main.balance.BalanceSheetViewModel
+import com.getcode.view.main.chat.ChatScreen
+import com.getcode.view.main.chat.ChatViewModel
 import com.getcode.view.main.giveKin.GiveKinScreen
-import com.getcode.view.main.scanner.ScanScreen
 import com.getcode.view.main.requestKin.RequestKinScreen
+import com.getcode.view.main.scanner.ScanScreen
+import kotlinx.coroutines.flow.filterIsInstance
 import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.mapNotNull
 import kotlinx.coroutines.flow.onEach
 import kotlinx.parcelize.IgnoredOnParcel
@@ -261,6 +270,40 @@ data object BalanceModal : ChatGraph, ModalRoot {
     }
 }
 
+@Parcelize
+data class ChatScreen(val chatId: ID) : MainGraph, ModalContent {
+    @IgnoredOnParcel
+    override val key: ScreenKey = uniqueScreenKey
+
+    @Composable
+    override fun Content() {
+        val vm = getViewModel<ChatViewModel>()
+        val state by vm.stateFlow.collectAsState()
+        val navigator = LocalCodeNavigator.current
+
+        ModalContainer(
+            titleString = { state.title.localized },
+            backButtonEnabled = { it is ChatScreen },
+        ) {
+            val messages = vm.chatMessages.collectAsLazyPagingItems()
+            ChatScreen(state = state, messages = messages, dispatch = vm::dispatchEvent)
+        }
+
+        LaunchedEffect(vm) {
+            vm.eventFlow
+                .filterIsInstance<ChatViewModel.Event.OpenMessageChat>()
+                .map { it.reference }
+                .filterIsInstance<Reference.IntentId>()
+                .map { it.id }
+                .onEach { navigator.push(ChatMessageConversationScreen(intentId = it)) }
+                .launchIn(this)
+        }
+
+        LaunchedEffect(chatId) {
+            vm.dispatchEvent(ChatViewModel.Event.OnChatIdChanged(chatId))
+        }
+    }
+}
 
 @Composable
 fun <T> AppScreen.OnScreenResult(block: (T) -> Unit) {

app/src/main/java/com/getcode/view/main/chat/conversation/ConversationViewModel.kt

@@ -65,7 +65,6 @@ class ConversationViewModel @Inject constructor(
     data class State(
         val conversationId: ID?,
         val reference: Reference.IntentId?,
-        val title: String,
         val textFieldState: TextFieldState,
         val tipChatCash: Feature,
         val identityAvailable: Boolean,
@@ -88,7 +87,6 @@ class ConversationViewModel @Inject constructor(
                 conversationId = null,
                 reference = null,
                 tipChatCash = ConversationCashFeature(),
-                title = "Anonymous Tipper",
                 textFieldState = TextFieldState(),
                 identityAvailable = false,
                 identityRevealed = null,
@@ -114,7 +112,6 @@ class ConversationViewModel @Inject constructor(
         data class OnTipsChatCashChanged(val module: Feature) : Event
 
         data class OnUserActivity(val activity: Instant) : Event
-        data class OnTitleChanged(val title: String) : Event
         data object SendCash : Event
         data object SendMessage : Event
         data object RevealIdentity : Event
@@ -335,7 +332,6 @@ class ConversationViewModel @Inject constructor(
 
                     state.copy(
                         conversationId = conversation.id,
-                        title = conversation.name ?: "Anonymous Tipper",
                         identityRevealed = conversation.hasRevealedIdentity,
                         pointers = event.conversationWithPointers.pointers,
                         users = members.map {
@@ -354,12 +350,6 @@ class ConversationViewModel @Inject constructor(
                     )
                 }
 
-                is Event.OnTitleChanged -> { state ->
-                    state.copy(
-                        title = event.title
-                    )
-                }
-
                 is Event.OnPointersUpdated -> { state ->
                     state.copy(pointers = event.pointers)
                 }

app/src/main/java/com/getcode/view/main/chat/create/byusername/ChatByUsernameScreen.kt

@@ -0,0 +1,127 @@
+package com.getcode.view.main.chat.create.byusername
+
+import android.graphics.Paint.Align
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.getcode.R
+import com.getcode.navigation.core.LocalCodeNavigator
+import com.getcode.navigation.screens.ChatMessageConversationScreen
+import com.getcode.theme.CodeTheme
+import com.getcode.theme.inputColors
+import com.getcode.ui.components.ButtonState
+import com.getcode.ui.components.CodeButton
+import com.getcode.ui.components.CodeScaffold
+import com.getcode.ui.components.TextInput
+import com.getcode.ui.components.keyboardAsState
+import kotlinx.coroutines.delay
+import kotlinx.coroutines.flow.filterIsInstance
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.onEach
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalFoundationApi::class)
+@Composable
+fun ChatByUsernameScreen(
+    viewModel: ChatByUsernameViewModel
+) {
+    val state by viewModel.stateFlow.collectAsState()
+    val navigator = LocalCodeNavigator.current
+
+    val keyboardVisible by keyboardAsState()
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val composeScope = rememberCoroutineScope()
+    var isChecking by remember(state.checkingUsername) { mutableStateOf(false) }
+
+    val checkUsername = {
+        composeScope.launch {
+            isChecking = true
+            if (keyboardVisible) {
+                keyboardController?.hide()
+                delay(500)
+            }
+            viewModel.dispatchEvent(ChatByUsernameViewModel.Event.CheckUsername)
+        }
+    }
+
+    LaunchedEffect(viewModel) {
+        viewModel.eventFlow
+            .filterIsInstance<ChatByUsernameViewModel.Event.OnSuccess>()
+            .map { it.username }
+            .onEach {
+                navigator.push(ChatMessageConversationScreen(username = it))
+            }.launchIn(this)
+    }
+
+    CodeScaffold(
+        modifier = Modifier.fillMaxSize().imePadding(),
+        bottomBar = {
+            Box(modifier = Modifier.fillMaxWidth()) {
+                CodeButton(
+                    enabled = state.canAdvance,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = CodeTheme.dimens.inset)
+                        .padding(bottom = CodeTheme.dimens.grid.x2),
+                    buttonState = ButtonState.Filled,
+                    text = stringResource(R.string.action_next),
+                    isLoading = isChecking,
+                    isSuccess = state.isValidUsername
+                ) {
+                    checkUsername()
+                }
+            }
+        }
+    ) { padding ->
+        val focusRequester = remember { FocusRequester() }
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(padding)
+        ) {
+            TextInput(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .align(Alignment.Center)
+                    .padding(CodeTheme.dimens.inset)
+                    .focusRequester(focusRequester),
+                state = state.textFieldState,
+                colors = inputColors(
+                    backgroundColor = Color.Transparent,
+                    borderColor = Color.Transparent
+                ),
+                contentPadding = PaddingValues(horizontal = 20.dp),
+                style = CodeTheme.typography.displayMedium,
+                placeholderStyle = CodeTheme.typography.displayMedium,
+                placeholder = stringResource(R.string.subtitle_xUsername),
+            )
+        }
+
+        LaunchedEffect(focusRequester) {
+            focusRequester.requestFocus()
+        }
+    }
+}