[native] Set user avatar after registering in registration flow
Summary:
I initially considered passing the avatar directly to the registration endpoint, but realized that gets complicated since we need a logged-in user in order to do a media upload.
Instead, we handle the user avatar after the registration call, but we block the UI from appearing logged-in until after the avatar upload concludes.
If the avatar upload fails, we'll log the user in anyways, and display an error Alert. The user can then go and change their avatar using the normal flow. I opted for this approach because I figured trying to "undo" the registration would be more complicated, and leaving the registration in a half-complete state would be confusing to the user.
Note that I had to implement this in multiple "steps", with subsequent steps handled by a useEffect. The reason for this is that if everything was done in one async function, the Redux-bound values in the callback wouldn't be rebound after registration. See the new code comment at the top of the file for more context.
Depends on D8151
Test Plan:
The whole stack was tested as follows:
- Try creating an account with the default avatar
- Try creating an account with an emoji avatar
- Try creating an account with an image avatar (that needs to be uploaded)
- Try creating an Ethereum account with an ENS avatar
I made sure of the following:
- Loading spinner appeared on the button, not on the avatar, and was present throughout
- After the RegistrationNavigator is dismissed, the avatar that appears for the user's PRIVATE chat in the ChatThreadList is correct
- Subsequent delete-account-and-then-register-again worked correctly
- Various error cases are triggered correctly
Reviewers: atul, ginsu
Reviewed By: atul
Subscribers: tomek
Differential Revision: https://phab.comm.dev/D8152