Support comments

README.md

@@ -1,4 +1,5 @@
-[![Build Status](https://travis-ci.org/paug/openfeedback-android-sdk.svg?branch=master)](https://travis-ci.org/paug/openfeedback-android-sdk) [ ![Download](https://api.bintray.com/packages/openfeedback/Android/feedback-android-sdk-ui/images/download.svg) ](https://bintray.com/openfeedback/Android/feedback-android-sdk-ui/_latestVersion)
+[![BuildStatus](https://github.com/paug/openfeedback-android-sdk/actions/workflows/ci.yaml/badge.svg)](https://github.com/paug/openfeedback-android-sdk/actions/workflows/ci.yaml/badge.svg)
+
 # Open-Feedback Android SDK
 
 An Android client for Open-Feeedback https://github.com/HugoGresse/open-feedback:
@@ -31,8 +32,7 @@ val openfeedbackFirebaseConfig = OpenFeedbackFirebaseConfig(
 OpenFeedback(
     config = (application as MyApp).openfeedbackFirebaseConfig,
     projectId = "<your-open-feedback-project-id>",
-    sessionId = "<your-open-feedback-session-id>",
-    language = "<language-code>"
+    sessionId = "<your-open-feedback-session-id>"
 )
 ```
 
@@ -64,7 +64,3 @@ dependencies {
     implementation("io.openfeedback:feedback-android-sdk-viewmodel:$openfeedbackVersion")
 }
 ```
-
-## Limitations and TODO
-
-The SDK is still very young and misses some features, most notably comments. Feedbacks welcome.

openfeedback-m2/src/main/java/io/openfeedback/android/m2/OpenFeedbackLayout.kt

@@ -8,7 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import io.openfeedback.android.viewmodels.OpenFeedbackFirebaseConfig
@@ -22,16 +22,16 @@ fun OpenFeedback(
     config: OpenFeedbackFirebaseConfig,
     projectId: String,
     sessionId: String,
-    language: String,
     modifier: Modifier = Modifier,
     loading: @Composable () -> Unit = { Loading(modifier = modifier) }
 ) {
+    val systemConfig = LocalConfiguration.current
     val viewModel: OpenFeedbackViewModel = viewModel(
         factory = OpenFeedbackViewModel.Factory.create(
             firebaseApp = config.firebaseApp,
             projectId = projectId,
             sessionId = sessionId,
-            language = language
+            locale = systemConfig.locale
         )
     )
     val uiState = viewModel.uiState.collectAsState()

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/Comment.kt

@@ -0,0 +1,89 @@
+package io.openfeedback.android.m3
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.material3.contentColorFor
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.openfeedback.android.R
+import io.openfeedback.android.viewmodels.models.UIComment
+import io.openfeedback.android.viewmodels.models.UIDot
+
+@Composable
+fun Comment(
+    comment: UIComment,
+    modifier: Modifier = Modifier,
+    containerColor: Color = MaterialTheme.colorScheme.surfaceVariant,
+    contentColor: Color = contentColorFor(backgroundColor = containerColor),
+    style: TextStyle = MaterialTheme.typography.bodyMedium,
+    subStyle: TextStyle = MaterialTheme.typography.labelMedium,
+    shape: Shape = MaterialTheme.shapes.medium,
+    onClick: (UIComment) -> Unit
+) {
+    Surface(
+        color = containerColor,
+        contentColor = contentColor,
+        shape = shape,
+        modifier = modifier,
+        onClick = { onClick(comment) }
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .drawDots(comment.dots)
+                .padding(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            Text(text = comment.message, style = style)
+            Row(
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = stringResource(
+                        id = R.string.openfeedback_comments_upvotes,
+                        comment.upVotes
+                    ),
+                    color = contentColor.copy(alpha = .7f),
+                    style = subStyle
+                )
+                Text(
+                    text = comment.createdAt,
+                    color = contentColor.copy(alpha = .7f),
+                    style = subStyle
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CommentPreview() {
+    MaterialTheme {
+        Comment(
+            comment = UIComment(
+                id = "",
+                voteItemId = "",
+                message = "Super talk and great speakers!",
+                createdAt = "08 August 2023",
+                upVotes = 8,
+                dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                votedByUser = true
+            ),
+            onClick = {}
+        )
+    }
+}

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/CommentInput.kt

@@ -0,0 +1,57 @@
+package io.openfeedback.android.m3
+
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Send
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.tooling.preview.Preview
+import io.openfeedback.android.R
+
+@Composable
+fun CommentInput(
+    value: String,
+    onValueChange: (String) -> Unit,
+    onSubmit: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true
+) {
+    TextField(
+        value = value,
+        onValueChange = onValueChange,
+        modifier = modifier,
+        label = { Text(text = stringResource(id = R.string.openfeedback_comments_title_input)) },
+        trailingIcon = {
+            IconButton(onClick = onSubmit) {
+                Icon(
+                    imageVector = Icons.Outlined.Send,
+                    contentDescription = stringResource(id = R.string.openfeedback_comments_send)
+                )
+            }
+        },
+        enabled = enabled,
+        keyboardActions = KeyboardActions(onDone = { onSubmit() }),
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+        maxLines = 5
+    )
+}
+
+@Preview
+@Composable
+private fun CommentInputPreview() {
+    MaterialTheme {
+        CommentInput(
+            value = "My comment",
+            onValueChange = {},
+            onSubmit = {}
+        )
+    }
+}

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/CommentItems.kt

@@ -0,0 +1,73 @@
+package io.openfeedback.android.m3
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import io.openfeedback.android.R
+import io.openfeedback.android.viewmodels.models.UIComment
+import io.openfeedback.android.viewmodels.models.UIDot
+
+@Composable
+internal fun CommentItems(
+    comments: List<UIComment>,
+    modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(8.dp),
+    commentInput: @Composable ColumnScope.() -> Unit,
+    comment: @Composable ColumnScope.(UIComment) -> Unit
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = verticalArrangement
+    ) {
+        Text(
+            text = stringResource(id = R.string.openfeedback_comments_title),
+            style = MaterialTheme.typography.titleMedium
+        )
+        commentInput()
+        comments.forEachIndexed { index, uiComment ->
+            comment(uiComment)
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun VoteItemsPreview() {
+    MaterialTheme {
+        CommentItems(
+            comments = listOf(
+                UIComment(
+                    id = "",
+                    voteItemId = "",
+                    message = "Nice comment",
+                    createdAt = "08 August 2023",
+                    upVotes = 8,
+                    dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                    votedByUser = true
+                ),
+                UIComment(
+                    id = "",
+                    voteItemId = "",
+                    message = "Another comment",
+                    createdAt = "08 August 2023",
+                    upVotes = 0,
+                    dots = listOf(UIDot(x = .5f, y = .5f, color = "FF00CC")),
+                    votedByUser = true
+                )
+            ),
+            commentInput = {
+                CommentInput(value = "", onValueChange = {}, onSubmit = {})
+            },
+            comment = {
+                Comment(comment = it, onClick = {})
+            }
+        )
+    }
+}

openfeedback-m3/src/main/kotlin/io/openfeedback/android/m3/DotModifier.kt

@@ -0,0 +1,26 @@
+package io.openfeedback.android.m3
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Fill
+import androidx.compose.ui.unit.dp
+import io.openfeedback.android.viewmodels.models.UIDot
+
+fun Modifier.drawDots(dots: List<UIDot>): Modifier = drawBehind {
+    dots.forEach { dot ->
+        val offset = Offset(x = this.size.width * dot.x, y = this.size.height * dot.y)
+        drawCircle(
+            color = Color(
+                red = dot.color.substring(0, 2).toInt(16),
+                green = dot.color.substring(2, 4).toInt(16),
+                blue = dot.color.substring(4, 6).toInt(16),
+                alpha = 255 / 3
+            ),
+            radius = 30.dp.value,
+            center = offset,
+            style = Fill
+        )
+    }
+}