Feat/android view reaction bottomsheet

android/app/src/main/java/com/goliath/emojihub/GlobalContext.kt

@@ -2,7 +2,12 @@ package com.goliath.emojihub
 
 import androidx.compose.runtime.compositionLocalOf
 import androidx.navigation.NavController
+import com.goliath.emojihub.data_sources.BottomSheetController
 
 val LocalNavController = compositionLocalOf<NavController> {
     throw RuntimeException("")
+}
+
+val LocalBottomSheetController = compositionLocalOf<BottomSheetController> {
+    throw RuntimeException("")
 }

android/app/src/main/java/com/goliath/emojihub/RootActivity.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.BottomNavigation
 import androidx.compose.material.BottomNavigationItem
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
@@ -20,15 +19,14 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
-import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import com.goliath.emojihub.data_sources.ApiErrorController
+import com.goliath.emojihub.data_sources.bottomSheet
 import com.goliath.emojihub.ui.theme.EmojiHubTheme
 import com.goliath.emojihub.viewmodels.UserViewModel
 import com.goliath.emojihub.views.BottomNavigationBar
 import com.goliath.emojihub.views.LoginNavigation
-import com.goliath.emojihub.views.LoginPage
 import com.goliath.emojihub.views.components.CustomDialog
 import com.goliath.emojihub.views.pageItemList
 import dagger.hilt.android.AndroidEntryPoint
@@ -70,7 +68,6 @@ class RootActivity : ComponentActivity() {
     }
 }
 
-
 @Composable
 fun LoginView() {
     val navController = rememberNavController()
@@ -85,9 +82,11 @@ fun LoginView() {
 @Composable
 fun RootView(modifier: Modifier = Modifier) {
     val navController = rememberNavController()
+    val bottomSheet = bottomSheet()
 
     CompositionLocalProvider(
-        LocalNavController provides navController
+        LocalNavController provides navController,
+        LocalBottomSheetController provides bottomSheet
     ) {
         Scaffold(
             bottomBar =  {

android/app/src/main/java/com/goliath/emojihub/data_sources/BottomSheetController.kt

@@ -0,0 +1,48 @@
+package com.goliath.emojihub.data_sources
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.ModalBottomSheetState
+import androidx.compose.material.ModalBottomSheetValue
+import androidx.compose.material.rememberModalBottomSheetState
+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.Modifier
+import androidx.compose.ui.unit.dp
+
+@OptIn(ExperimentalMaterialApi::class)
+interface BottomSheetController {
+    val state: ModalBottomSheetState
+    var content: @Composable ColumnScope.() -> Unit
+    val isVisible: Boolean get() = state.isVisible
+    fun setSheetContent(n: @Composable ColumnScope.() -> Unit) { content = n }
+    suspend fun show() = state.show()
+    suspend fun hide()
+}
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun bottomSheet(): BottomSheetController {
+    return object : BottomSheetController {
+        override val state: ModalBottomSheetState = rememberModalBottomSheetState(
+            initialValue = ModalBottomSheetValue.Hidden,
+            skipHalfExpanded = true,
+        )
+
+        override var content by remember {
+            mutableStateOf<@Composable ColumnScope.() -> Unit>({
+                Box(modifier = Modifier.size(1.dp))
+            },)
+        }
+
+        override suspend fun hide() {
+            state.hide()
+            content = { Box(modifier = Modifier.size(1.dp)) }
+        }
+    }
+}

android/app/src/main/java/com/goliath/emojihub/data_sources/DataSourceModule.kt

@@ -4,7 +4,6 @@ import com.goliath.emojihub.data_sources.local.X3dDataSource
 import com.goliath.emojihub.data_sources.local.X3dDataSourceImpl
 import dagger.Binds
 import dagger.Module
-import dagger.Provides
 import dagger.hilt.InstallIn
 import dagger.hilt.components.SingletonComponent
 

android/app/src/main/java/com/goliath/emojihub/extensions/Extensions.kt

@@ -7,4 +7,23 @@ fun String.toEmoji(): String {
     } catch (e: Exception){
         "\u2764\uFE0F"
     }
+}
+
+fun reactionsToString (reactions: List<String>): String {
+    var emojisStr = ""
+
+    if (reactions.size >= 3) {
+        for (emoji in reactions) {
+            emojisStr += emoji
+            emojisStr += " "
+        }
+        emojisStr += "외 ${reactions.size - 3}개의 반응"
+    } else {
+        for (emoji in reactions) {
+            emojisStr += emoji
+            emojisStr += " "
+        }
+        emojisStr += "${reactions.size}개의 반응"
+    }
+    return emojisStr
 }

android/app/src/main/java/com/goliath/emojihub/models/Post.kt

@@ -10,8 +10,7 @@ class Post(
     val modifiedAt: String = dto.modifiedAt
     val createdBy: String = dto.createdBy
     val content: String = dto.content
-    val reaction: List<String> = listOf()
-    //val reaction: List<String> = dto.reaction
+    val reaction: List<String> = dto.reaction
 }
 
 data class PostDto(
@@ -20,7 +19,7 @@ data class PostDto(
     @SerializedName("modified_at") val modifiedAt: String,
     @SerializedName("created_by") val createdBy: String,
     val content: String,
-    //@SerializedName("reaction") val reaction: List<String>
+    @SerializedName("reactions") val reaction: List<String>
 )
 
 data class UploadPostDto(
@@ -35,7 +34,7 @@ val dummyPost = Post(
         content = "조금 전에 앞에 계신 분이 실수로 지갑을 흘리셨다. " +
                 "지갑이 하수구 구멍으로 빠지려는 찰나, 발로 굴러가는 지갑을 막아서 다행히 참사는 막을 수 있었다. " +
                 "지갑 주인분께서 감사하다고 카페 드림에서 커피도 한 잔 사주셨다.",
-        modifiedAt = "2023.10.23"
-        //reaction = listOf("good", "check", "good")
+        modifiedAt = "2023.10.23",
+        reaction = listOf("good", "check", "good")
     )
 )

android/app/src/main/java/com/goliath/emojihub/viewmodels/EmojiViewModel.kt

@@ -11,6 +11,7 @@ import androidx.paging.cachedIn
 import com.goliath.emojihub.models.CreatedEmoji
 import com.goliath.emojihub.models.Emoji
 import com.goliath.emojihub.usecases.EmojiUseCase
+import com.goliath.emojihub.views.components.BottomSheetContent
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
@@ -24,7 +25,7 @@ class EmojiViewModel @Inject constructor(
 ): ViewModel() {
     var videoUri: Uri = Uri.EMPTY
     var currentEmoji: Emoji? = null
-    var isBottomSheetShown by mutableStateOf(false)
+    var bottomSheetContent by mutableStateOf(BottomSheetContent.EMPTY)
 
     val emojiList = emojiUseCase.emojiList
 

android/app/src/main/java/com/goliath/emojihub/views/FeedPage.kt

@@ -1,52 +1,39 @@
 package com.goliath.emojihub.views
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.grid.GridCells
-import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ButtonDefaults
-import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
-import androidx.compose.material.OutlinedButton
-import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Divider
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.paging.compose.collectAsLazyPagingItems
+import com.goliath.emojihub.LocalBottomSheetController
 import com.goliath.emojihub.LocalNavController
 import com.goliath.emojihub.NavigationDestination
 import com.goliath.emojihub.models.createDummyEmoji
 import com.goliath.emojihub.ui.theme.Color
 import com.goliath.emojihub.ui.theme.Color.EmojiHubDividerColor
 import com.goliath.emojihub.viewmodels.EmojiViewModel
 import com.goliath.emojihub.viewmodels.PostViewModel
-import com.goliath.emojihub.views.components.EmojiCell
+import com.goliath.emojihub.views.components.CustomBottomSheet
 import com.goliath.emojihub.views.components.PostCell
 import com.goliath.emojihub.views.components.TopNavigationBar
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun FeedPage() {
     val navController = LocalNavController.current
+    val bottomSheetController = LocalBottomSheetController.current
+
     val emojiViewModel = hiltViewModel<EmojiViewModel>()
     val postViewModel = hiltViewModel<PostViewModel>()
 
@@ -90,74 +77,13 @@ fun FeedPage() {
         }
     }
 
-    if (emojiViewModel.isBottomSheetShown) {
-        ModalBottomSheet(
-            onDismissRequest = {
-                emojiViewModel.isBottomSheetShown = false
-                navController.popBackStack()
-            }
-        ) {
-            Column(Modifier.padding(horizontal = 16.dp)) {
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween,
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    OutlinedButton(
-                        onClick = {
-                            // TODO: fetch user's emojis and display
-                        },
-                        modifier = Modifier
-                            .padding(horizontal = 15.dp),
-                        shape = RoundedCornerShape(50.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            backgroundColor = androidx.compose.ui.graphics.Color.White,
-                            contentColor = androidx.compose.ui.graphics.Color.Black
-                        )
-                    )
-                    {
-                        Text(
-                            text = "내가 만든 이모지",
-                            fontWeight = FontWeight.Bold
-                        )
-                    }
-                    OutlinedButton(
-                        onClick = {
-                            // TODO: fetch user's saved emojis and display
-                        },
-                        modifier = Modifier
-                            .padding(horizontal = 15.dp),
-                        shape = RoundedCornerShape(50.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            backgroundColor = androidx.compose.ui.graphics.Color.White,
-                            contentColor = androidx.compose.ui.graphics.Color.Black
-                        )
-                    ) {
-                        Text(
-                            text = "저장된 이모지",
-                            fontWeight = FontWeight.Bold
-                        )
-                    }
-                }
-            }
-
-            Spacer(modifier = Modifier.weight(1f))
-
-            Column(Modifier.padding(horizontal = 16.dp)) {
-                LazyVerticalGrid(
-                    columns = GridCells.Fixed(2),
-                    modifier = Modifier.padding(top = 18.dp),
-                    horizontalArrangement = Arrangement.spacedBy(4.dp),
-                    verticalArrangement = Arrangement.spacedBy(4.dp),
-                ) {
-                    items(emojiList, key = { it.id }) { emoji ->
-                        EmojiCell(emoji = emoji) {
-                            emojiViewModel.currentEmoji = emoji
-                            navController.navigate(NavigationDestination.PlayEmojiVideo)
-                        }
-                    }
-                }
-            }
+    if (bottomSheetController.isVisible) {
+        CustomBottomSheet(
+            bottomSheetContent = emojiViewModel.bottomSheetContent,
+            emojiList = emojiList
+        ) { emoji ->
+            emojiViewModel.currentEmoji = emoji
+            navController.navigate(NavigationDestination.PlayEmojiVideo)
         }
     }
 }