Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add user profile feature #1923

Merged
merged 38 commits into from
Jan 25, 2024
Merged

Add user profile feature #1923

merged 38 commits into from
Jan 25, 2024

Conversation

leblowl
Copy link
Collaborator

@leblowl leblowl commented Oct 5, 2023

Sorry about the large PR, I can split it up if desired.

This PR adds a user profile feature for desktop.

On the frontend, the user profile sidebar panel simply shows the current user's
name and profile photo. Clicking on the profile photo brings up a context menu
that shows the profile and profile actions (only 'edit profile' for now).
Clicking the 'edit profile' action changes the context menu view such that you
can edit the profile photo. This commit also adds user profile photos to channel
messages. A jdenticon is showed in place of user profile photo if it doesn't
exist.

On the backend, there is a new shared orbitdb user profiles key/value store. The
key/value store maps user public keys with profiles. It uses a custom index so
that we can filter invalid entries thoroughly. In state-manager, a new
saveUserProfile saga is added which signs the profile data and sends it to the
backend.

Relevant chromatic stories:

Solution for #615

Pull Request Checklist

  • I have linked this PR to related GitHub issue.
  • I have updated the CHANGELOG.md file with relevant changes (the file is located at the root of monorepo).

(Optional) Mobile checklist

Please ensure you completed the following checks if you did any changes to the mobile package:

  • I have run e2e tests for mobile
  • I have updated base screenshots for visual regression tests

screen1
screen

On the frontend, the user profile sidebar panel simply shows the current user's
name and profile photo. Clicking on the profile photo brings up a context menu
that shows the profile and profile actions (only 'edit profile' for now).
Clicking the 'edit profile' action changes the context menu view such that you
can edit the profile photo. This commit also adds user profile photos to channel
messages. A jdenticon is showed in place of user profile photo if it doesn't
exist.

On the backend, there is a new shared orbitdb user profiles key/value store. The
key/value store maps user public keys with profiles. It uses a custom index so
that we can filter invalid entries thoroughly. In state-manager, a new
saveUserProfile saga is added which signs the profile data and sends it to the
backend.
@leblowl leblowl marked this pull request as ready for review October 11, 2023 19:56
})}
</List>
)
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've separated these out to make the context menu more general purpose. Not all context menu views will have item lists.

console.log('Saving user profile', userProfile)

yield* apply(socket, socket.emit, applyEmitParams(SocketActionTypes.SAVE_USER_PROFILE, userProfile))
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving most of this logic to the backend in a future PR will make it easier to test and review.

@leblowl leblowl marked this pull request as draft October 11, 2023 21:24
Now using the same version as backend which also fixes our common JS
issues for now.
@leblowl leblowl marked this pull request as ready for review October 11, 2023 23:21
export function* saveUserProfileSaga(socket: Socket, action: PayloadAction<{ photo?: File }>): Generator {
const identity = yield* select(identitySelectors.currentIdentity)

if (!identity?.userCsr || !action.payload.photo) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if this is the case so don't bother if it's not important in this context but if you want to make sure user is a part of a community you should not only check the presence of csr, but also a replication of the community's metadata. On current develop there's a "communityMembership" selector in the identity structure

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I'm just doing some validation here.

@siepra
Copy link
Contributor

siepra commented Oct 12, 2023

I wouldn't be myself if I didn't ask: what about mobile?

@holmesworcester
Copy link
Contributor

I think we should make two separate issues for mobile. One would be to display avatars if they exist. The other would be to add and update them.

On mobile the minimum viable feature for the latter requires quite a bit more work. We need to implement our design for picking photos, and I think we need compression too: a mobile user will never know how to resize a photo manually on their phone, or if they do we shouldn't ask them to. It's already a stretch on desktop but on mobile an image size limit would feel too broken to be releasable, in my view.

The other reason to not go farther now is that this issue was not top of backlog and was chosen as an onboarding task that would give Lucas a good tour of how data moves through the app. I'd rather have Lucas move on to more fundamental stuff on mobile like iOS push notifications experiments.

Copy link
Contributor

@holmesworcester holmesworcester left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes sense to me and I think I understood the important stuff about how it works. Great work!

I don't think any of my comments required specific changes, but I'm interested in your responses to the questions I raised.

packages/backend/src/nest/storage/UserProfileStore.ts Outdated Show resolved Hide resolved
packages/backend/src/nest/storage/UserProfileStore.ts Outdated Show resolved Hide resolved
packages/backend/src/nest/storage/UserProfileStore.ts Outdated Show resolved Hide resolved
packages/backend/src/nest/storage/UserProfileStore.ts Outdated Show resolved Hide resolved
@leblowl leblowl merged commit d016be5 into develop Jan 25, 2024
28 of 34 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants