Implement `ProfileHeader` Composable #18

hamorillo · 2025-06-25T08:33:26Z

Description

The main goal of this PR is to implement the ProfileHeader Composable. We need to add the Gravatar SDK dependencies for two reasons:

Fetch the profile of a given user
Use some of the UI components provided by the library (in this case, the Avatar Composable)

Note: I've hardcoded my user for the moment. Once the OAuth tasks are complete, we'll need to use that information to fetch the profile.

Testing Steps

Run the app and verify you can see the ProfileHeader in the Profile section.

hamorillo · 2025-06-25T08:36:49Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileHeader.kt

+
+@Composable
+fun ProfileHeader(
+    profile: Profile,


I'm using the Profile class from the Gravatar-SDK. If that were from a third-party library, it would be a good idea to map that object to another one managed by the app. In this case, since we are using our library, I consider it under our control.

Yeah, I have mixed feelings about this 😬, but the components expect the same models so it is how it is.

Copilot

Pull Request Overview

This PR implements the ProfileHeader Composable and integrates the Gravatar SDK to fetch and display user profile data. Key changes include the addition of tests for various ProfileHeader states, updates to the ProfileViewModel to fetch profiles (with a temporary hardcoded username), and adjustments to dependency injection along with updated build configurations.

Reviewed Changes

Copilot reviewed 9 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
ProfileHeaderTest.kt	Added screenshot tests covering different combinations of job title and company.
HomeScreenTest.kt	Updated package and test name to reflect the home screen context.
ProfileViewModel.kt	Introduced a ViewModel to fetch the profile using the Gravatar SDK with a temporary hardcoded username.
ProfileUiState.kt	Defined a new data state to represent profile loading and data.
ProfileScreen.kt	Updated UI to conditionally display the ProfileHeader or an error message based on loading state.
ProfileHeader.kt	Implemented the ProfileHeader Composable utilizing the Avatar component and handling job info display.
HomeUiModule.kt	Configured dependency injection for ProfileService and ProfileViewModel.
build.gradle.kts & libs.versions.toml	Added Gravatar and Koin dependencies to support the new functionality.

Comments suppressed due to low confidence (1)

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileScreen.kt:30

[nitpick] Consider refining the error message to be more user-friendly or to provide actionable guidance, such as suggesting a retry option.

                    Text("There was an error retrieving the profile.")

Copilot · 2025-06-25T08:52:00Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileViewModel.kt

+        fetchProfile()
+    }
+
+    private fun fetchProfile() {
+        viewModelScope.launch {
+            _uiState.update { currentState -> currentState.copy(isLoading = true) }
+            // -> Remove the hardcoded username <-
+            when (val result = profileService.retrieveCatching("hamorillo")) {


Consider removing the hardcoded username 'hamorillo' and parameterizing the profile retrieval to better support dynamic user data once OAuth integration is complete.

Suggested change

fetchProfile()

}

private fun fetchProfile() {

viewModelScope.launch {

_uiState.update { currentState -> currentState.copy(isLoading = true) }

// -> Remove the hardcoded username <-

when (val result = profileService.retrieveCatching("hamorillo")) {

// Replace with a dynamic username once OAuth or user session management is integrated

fetchProfile("hamorillo")

}

private fun fetchProfile(username: String) {

viewModelScope.launch {

_uiState.update { currentState -> currentState.copy(isLoading = true) }

when (val result = profileService.retrieveCatching(username)) {

We are implementing a basic ViewModel for the ProfileScreen using Gravatar-Core to load a profile.

AdamGrzybkowski

Looks good 👍 I've left some comments, but none are breaking.

AdamGrzybkowski · 2025-06-25T12:28:33Z

....homeUi.presentation.home.profile.ProfileHeaderTest.profileHeader_bothJobTitleAndCompany.png

💡 We can set a fake image loader for the screenshot test like we did in the SDK - https://github.com/Automattic/Gravatar-SDK-Android/blob/trunk/uitestutils/src/main/java/com/gravatar/uitestutils/RoborazziTest.kt#L60

Not a big deal, but it helps visualize the full component better.

Yeah, I was considering this, but if you don't mind, I'll open a different PR with it.

AdamGrzybkowski · 2025-06-25T12:31:03Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileHeader.kt

+import com.gravatar.ui.components.atomic.Avatar
+
+@Composable
+fun ProfileHeader(


⛏️ Missing internal modifier

AdamGrzybkowski · 2025-06-25T12:31:17Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileScreen.kt


 @Composable
-fun ProfileScreen() {
+fun ProfileScreen(viewModel: ProfileViewModel = koinViewModel()) {


We can make this internal as well.

AdamGrzybkowski · 2025-06-25T12:33:50Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileScreen.kt

    Box(
        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
    ) {
-        Text("Profile Screen")
+        if (uiState.isLoading) {
+            CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
+        } else {
+            uiState.profile.let { profile ->
+                if (profile != null) {
+                    ProfileHeader(profile = profile, modifier = Modifier.padding(16.dp))
+                } else {
+                    Text("There was an error retrieving the profile.")
+                }
+            }
+        }
    }


💡 I think we should extract this to a new ProfileScreen(uiState: ProfileUiState) component - otherwise it's hard to create previews or run screenshot tests for the whole screen.

Done! Also added a screenshot test.

AdamGrzybkowski · 2025-06-25T12:46:23Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileHeader.kt

+        Column {
+            Text(
+                text = profile.displayName,
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.Bold
+            )
+
+            profile.jobInfo().takeIf { it.isNotBlank() }?.let { jobInfo ->
+                Text(
+                    text = jobInfo,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f)
+                )
+            }
+        }


💡 We have a similar problem here like in the SDK - the card doesn't look good when you start scaling the font size. What if we used the autoSize and set those to single lines? Something like:

BasicText( text = profile.displayName, style = MaterialTheme.typography.titleMedium, maxLines = 1, autoSize = TextAutoSize.StepBased( maxFontSize = 16.sp ) )

It needs some styling but here's the difference with the max font scaling

Before After

AdamGrzybkowski · 2025-06-25T13:08:14Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileScreen.kt

+        } else {
+            uiState.profile.let { profile ->
+                if (profile != null) {
+                    ProfileHeader(profile = profile, modifier = Modifier.padding(16.dp))


❓ This will have to be a top bar. I wonder if we will need a scaffold here as well, or we will just keep it at the top? Have you thought about this?

I haven't thought much about it, as we'll implement the animation to collapse/expand the header, and that can require some changes. My idea was to keep it at the top for now.

AdamGrzybkowski · 2025-06-25T13:09:09Z

homeUi/src/main/kotlin/com/gravatar/app/homeUi/presentation/home/profile/ProfileHeader.kt

+
+@Composable
+fun ProfileHeader(
+    profile: Profile,


Yeah, I have mixed feelings about this 😬, but the components expect the same models so it is how it is.

hamorillo added the enhancement New feature or request label Jun 25, 2025

hamorillo force-pushed the hamorillo/GRA-214 branch from 3a3e08a to 83cf215 Compare June 25, 2025 08:34

hamorillo commented Jun 25, 2025

View reviewed changes

hamorillo force-pushed the hamorillo/GRA-214 branch from 83cf215 to 4a90a49 Compare June 25, 2025 08:42

hamorillo requested a review from Copilot June 25, 2025 08:51

Copilot AI reviewed Jun 25, 2025

View reviewed changes

hamorillo added 4 commits June 25, 2025 11:09

Added Gravatar-Sdk dependencies to HomeModule

41535c8

We are implementing a basic ViewModel for the ProfileScreen using Gravatar-Core to load a profile.

Implement ProfileHeader composable

1fc9b26

Renamed test package

f57b8e9

Added some screenshots for the ProfileHeader

439e598

hamorillo force-pushed the hamorillo/GRA-214 branch from 4a90a49 to 439e598 Compare June 25, 2025 09:10

hamorillo marked this pull request as ready for review June 25, 2025 09:22

hamorillo requested a review from AdamGrzybkowski June 25, 2025 09:22

AdamGrzybkowski approved these changes Jun 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Implement `ProfileHeader` Composable #18

Implement `ProfileHeader` Composable #18

Uh oh!

hamorillo commented Jun 25, 2025

Uh oh!

hamorillo Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jun 25, 2025

Uh oh!

AdamGrzybkowski left a comment

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

hamorillo Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

hamorillo Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

hamorillo Jun 25, 2025

Uh oh!

AdamGrzybkowski Jun 25, 2025

Uh oh!

Uh oh!

Implement ProfileHeader Composable #18

Are you sure you want to change the base?

Implement ProfileHeader Composable #18

Uh oh!

Conversation

hamorillo commented Jun 25, 2025

Description

Testing Steps

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

AdamGrzybkowski left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Implement `ProfileHeader` Composable #18

Implement `ProfileHeader` Composable #18