Train of likes animation

[develric]

Fixes #15251

Internal Ref: pctCYC-8w-p2
iOS main PR: wordpress-mobile/WordPress-iOS#16936

Due to AFKs and Sabbaticals pinging folks outside of my team, thanks for any support you can give; trying to give a bit more context in the description below 🙇 .

The following is the final result (avatar duplication intended to not show other users avatar)

Screen.Recording.2021-08-26.at.16.19.51.mov

The original implementation (without the animation) had the "n bloggers like this" text outside the recycler; since we need a synched animation it seemed fair to bring the text inside the recycler and leverage the fade in/out recycler built in animation.

Files involved are a few in number but the changes were pretty related and hopefully are not too heavy to review 🤞 (in GH at least for me it rendered better using the split diff view); just adding a bit of grouping in the hope that it helps:

• Files under android.ui.reader package are the main modification. They:
  • Move the "n bloggers like this" as an item inside the recycler
  • Decouple ReaderPostDetailViewModel and EngagedPeopleListViewModel introducing a dedicated TrainOfFacesUiState + relevant Diff Callback and View Holders
  • Manage the like/unlike operation locally in the reader details screen, without querying the endpoint
• 4 files (those under android.ui.engagement package) are changes that remove unused fields from EngagedPeopleListUiState + the "limit and retry" logic that is no more needed given we use pageLength for the limit and manage the like/unlike operation locally without requesting the likers data from the endpoint
• remaining 8 files are unit testing and small layout changes.

A last note about the "n bloggers like this"; given the You is the current user, possible state we expect are:

• You like this: current user is the only liker
• You and 1 blogger like this
• You and n bloggers like this
• 1 blogger likes this
• n blogger like this

To test

1. Borrowing below the test steps from the iOS linked PR:

   • Open a post with 0 likes.
     • Verify the likes view is shown when the post is liked.
     • Verify the likes view is hidden when the post is unliked.
   • Open a post where you're the only one liking the post.
     • Verify the likes view is hidden when the post is unliked.
     • Verify the likes view is shown when the post is liked.
   • Open a post with more than 5 likes from other people.
     • Verify that it shows 6 avatars when the post is liked.
     • Verify that it shows 5 avatars when the post is unliked.
   • Verify that the animation works fine when the post is liked and unliked.
   • Verify that the animation direction is correct in RTL language.

2. Smoke test likers list by tapping on the train of faces and accessing from Notifications > Likes

Regression Notes

1. Potential unintended areas of impact
   List of likes in ReaderPostDetails and Notifications > Likes

2. What I did to test those areas of impact (or what existing automated tests I relied on)
   Manual testing + already existing unit testing

3. What automated tests I added (or what prevented me from doing so)
   Added a few unit tests where applicable

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading the APKs:

• Jetpack-pr-15248-build-114722.apk
• WordPress-pr-15248-build-114722.apk

[peril-wordpress-mobile]

	Warnings
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

[antonis]

Thank you for the ping @develric
I will try to get into this later today or on Monday (unless @ashiagr gets there first) 🙇

[ashiagr]

Great job @develric! I absolutely loved this "train of likes" animation and the current user avatar at the end. It feels so much better from the previous one 🎉 .

Also KUDOS for handling animation direction in RTL language, and taking care of accessibility. Everything worked as described in my testing. I'm approving this PR as nothing is blocking functionality-wise. I just left super minor code-level suggestions, so not merging it. Shouldn't take much of your time🤞.

Another thing, since this is a user-facing change, let's add it to release notes, I'm sure users will love to know about this cute little improvement :).

[develric]

Thanks for the review @ashiagr, from a quick reading all your suggestions makes sense to me 👍. I ended up running out of time today but will take care on Monday. Have a great we 😎.

[develric]

Hi @ashiagr 👋 , followed up to your suggestions, should be ready for another pass 🙇 .

[ashiagr]

Thank you for all the updates @develric! 🙇‍♀️

Smoke-tested once again, everything looks good. Great work!

Merging it now.