NT-1943: UI/UX – Empty state

[sunday-okpoluaefe]

📲 What

UI/UX – Empty state

🤔 Why

Someone has to be the first to comment, let's make sure they have a nice experience!

🛠 How

• Added empty textview placeholder to activity_comments_layout

<androidx.appcompat.widget.AppCompatTextView
           android:id="@+id/no_comments"
           android:visibility="gone"
           android:layout_marginTop="@dimen/grid_11"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           android:layout_width="wrap_content"
           android:text="@string/No_comments_yet"
           style="@style/CalloutSecondary"
           android:layout_height="wrap_content"/>

• Subscribed to commentEnvelope, checked for totalCount . show comments if > 0; else show empty state

commentEnvelope
                .filter { ObjectUtils.isNotNull(it) }
                .compose(bindToLifecycle())
                .subscribe {
                    it.totalCount?.let { count ->
                        if (count > 0) {
                            this.setEmptyState.onNext(false)
                            commentsList.onNext(it.comments)
                        } else this.setEmptyState.onNext(true)
                    }
                }

• Added tests

  /*
     * test when no comment available
     */
    @Test
    fun testCommentsViewModel_EmptyCommentState() {
        val env = environment().toBuilder().apolloClient(object : MockApolloClient() {
            override fun getProjectComments(slug: String, cursor: String?, limit: Int): Observable<CommentEnvelope> {
                return Observable.just(CommentEnvelopeFactory.emptyCommentsEnvelope())
            }
        }).build()
        val vm = CommentsViewModel.ViewModel(env)
        vm.outputs.setEmptyState().subscribe(showEmptyState)

        // Start the view model with an update.
        vm.intent(Intent().putExtra(IntentKey.UPDATE, UpdateFactory.update()))
        showEmptyState.assertValue(true)
    }

 /*
     * test when comment(s) available
     */
    @Test
    fun testCommentsViewModel_CommentsAvailableState() {
        val env = environment().toBuilder().apolloClient(object : MockApolloClient() {
            override fun getProjectComments(slug: String, cursor: String?, limit: Int): Observable<CommentEnvelope> {
                return Observable.just(CommentEnvelopeFactory.commentsEnvelope())
            }
        }).build()
        val vm = CommentsViewModel.ViewModel(env)
        vm.outputs.setEmptyState().subscribe(showEmptyState)

        // Start the view model with an update.
        vm.intent(Intent().putExtra(IntentKey.UPDATE, UpdateFactory.update()))
        showEmptyState.assertValue(false)
    }

👀 See

Before 🐛	After 🦋

📋 QA

record.mp4

Story 📖

https://kickstarter.atlassian.net/browse/NT-1943

[codecov]

Codecov Report

Merging #1258 (d9b10d8) into master (0615810) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1258   +/-   ##
=========================================
  Coverage     74.50%   74.50%           
  Complexity      739      739           
=========================================
  Files           221      221           
  Lines          6632     6632           
  Branches        404      404           
=========================================
  Hits           4941     4941           
  Misses         1555     1555           
  Partials        136      136           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0615810...d9b10d8. Read the comment docs.

[Arkariang]

you could refactor these lines to be
this.setEmptyState.onNext(count > 0)
so you don't need the if condition inside the let block

[sunday-okpoluaefe]

great. thanks this.setEmptyState.onNext(count < 1)

[Arkariang]

Small comment left, once it's addressed feel free to merge :)