DEV Community

Cover image for Day 15. Reactions
Kiolk
Kiolk

Posted on

Day 15. Reactions

I had two problems. I found two solutions, but I feel that they are not optimal. I am not sure that an ideal solution exist. So, I will have to live with them. 

What I did:

Today, I focused on the reaction buttons that display the count and icons for the reactions added to the articles. Everything was straightforward; I just spent a little time displaying the icons, which partially overlapped each other. 
Reaction button

I didn't find a pre-build solution, so I implemented my own. Maybe It looks slightly overcomplicated. I would be happy If you could suggest a more efficient of solution.

Box {
    articleUi.reactionsUi.types.forEachIndexed { index, reactionType ->
        Row(modifier = Modifier.align(Alignment.BottomEnd)) {
            Box(
                modifier = Modifier.size(20.dp).background(color = Color.LightGray, shape = CircleShape)
                    .border(border = BorderStroke(1.dp, color = MaterialTheme.colors.background), shape = CircleShape)
            ) {
                Image(modifier = Modifier.padding(4.dp), painter = painterResource(reactionType.resId), contentDescription = null)
            }
            Spacer(modifier = Modifier.width((index * 10).dp))
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Additionally, I found that the documented API for Dev.to doesn't provide all the required data to display the home screen. I need information about which types of reactions the article has, but this information is absent in the API call to https://dev.to/api/articles. To solve this problem, I started inspecting the main page in Chrome. I found what I was looking for after 30 minutes of shuffling through scrips. I found the call https://dev.to/stories/feed/?page=1, which isn't documented. So, I decided to use it. I haven't completed this logic today; I am planing to finish it tomorrow.

What I will do:

  • Add Detekt(a static code analysis tool) to the project.
  • Update README file with description of project.
  • Create a GitHub project to manage the tasks for future collaboration.

If you want to join the project, just leave a comment here, or write a message in LinkedIn.

What help I'm looking for:

Designer (create design of application in Figma)
Android/KMM developer
Any other help related to the project.

My timeline:

Day 1. Deep breath and dive
Day 2. Networking layer.
Day 3. Loading of articles.
Day 4. ArticleItem.
Day 5. Localization.
Day 6. Work on Sunday.
Day 7. First week.
Day 8. Enjoying coding.
Day 9. Expect/actual.
Day 10. TODOs.
Day 11. Friday evening.
Day 12. Frustration.
Day 13. Blocker
Day 14. Monday

You can buy coffee me here :+)

See you tomorrow. 

Top comments (0)