Page MenuHomePhabricator
Differential D7510

[native] Introduce naive `useSelectFromGalleryAndUpdateUserAvatar` hook
ClosedPublic
Actions

Authored by atul on Apr 18 2023, 6:43 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 28, 12:04 PM
Unknown Object (File)
Mar 6 2025, 10:06 AM
Unknown Object (File)
Feb 27 2025, 3:45 AM
Unknown Object (File)
Feb 27 2025, 3:13 AM
Unknown Object (File)
Feb 27 2025, 3:12 AM
Unknown Object (File)
Feb 25 2025, 6:24 AM
Unknown Object (File)
Feb 25 2025, 6:23 AM
Unknown Object (File)
Feb 24 2025, 5:25 PM
View All Files
Subscribers
ginsu
tomek

Details

Reviewers
ashoat
ginsu
Commits
rCOMM3ece4b60c42e: [native] Introduce naive `useSelectFromGalleryAndUpdateUserAvatar` hook
Summary

This hook composes together the previously created image avatar-related hooks (eg useProcessSelectedMedia, useUploadProcessedMedia, etc) to

  1. Display system image picker to user so they can pick image
  2. Processes the selected image
  3. Uploads the processed image
  4. Updates the user avatar with the uploadID of the uploaded processed image

There's still work to be done in terms of displaying status/progress, handling errors (eg cleaning up temporary files), etc... but this diff gets things working "end to end." Putting it up now to unblock @ginsu's camera work.

NOTE: Reusing this hook in EditThreadAvatar for now as a placeholder to satisfy Flow/ESLint/etc. Will introduce equivalent for threads in next diff.
NOTE: Renamed useSelectAndUploadFromGallery to useSelectFromGallery after "pulling out" useProcessSelectedMedia and useUploadProcessedMedia calls. Those are now handled in the higher level useSelectFromGalleryAndUpdateUserAvatar hook (and upcoming thread avatar equivalent).

Depends on D7509

Test Plan

Able to successfully set image avatar:

Simulator Screenshot - Fresh iPhone 14 Pro - 2023-04-18 at 21.42.33.png (2×1 px, 386 KB)

Simulator Screenshot - Fresh iPhone 14 Pro - 2023-04-18 at 21.42.28.png (2×1 px, 231 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Apr 18 2023, 6:43 PM
Herald added a subscriber: tomek. · View Herald TranscriptApr 18 2023, 6:43 PM
atul edited the test plan for this revision. (Show Details)Apr 18 2023, 6:44 PM
atul added inline comments.
native/avatars/avatar-hooks.js
144–159 ↗(On Diff #25318)

Yes this error handling leaves plenty to be desired.. I'm actively working on it.

atul published this revision for review.Apr 18 2023, 6:44 PM
Harbormaster completed remote builds in B18487: Diff 25318.Apr 18 2023, 7:03 PM
atul added a child revision: D7511: [native] Introduce naive `useSelectFromGalleryAndUpdateThreadAvatar` hook.Apr 18 2023, 7:06 PM
ashoat accepted this revision.Apr 19 2023, 6:09 AM
ashoat added inline comments.
native/avatars/avatar-hooks.js
116 ↗(On Diff #25318)

Can we explicitly return undefined here?

275 ↗(On Diff #25318)

Does this actually get used outside of this file?

This revision is now accepted and ready to land.Apr 19 2023, 6:09 AM
atul marked an inline comment as done.Apr 19 2023, 9:16 AM
atul added inline comments.
native/avatars/avatar-hooks.js
116 ↗(On Diff #25318)

Will update

275 ↗(On Diff #25318)

No, will remove

atul updated this revision to Diff 25351.Apr 19 2023, 9:17 AM
atul marked an inline comment as done.

address feedback

This revision was landed with ongoing or failed builds.Apr 19 2023, 9:28 AM
Closed by commit rCOMM3ece4b60c42e: [native] Introduce naive `useSelectFromGalleryAndUpdateUserAvatar` hook (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM3ece4b60c42e: [native] Introduce naive `useSelectFromGalleryAndUpdateUserAvatar` hook.
Harbormaster completed remote builds in B18514: Diff 25351.Apr 19 2023, 9:35 AM

Revision Contents
Changeset List

PathSize
native/
avatars/
87 lines
9 lines
9 lines

Diff 25357

View Options

native/avatars/avatar-hooks.js

Show All 21 Lines
a { a {
text-decoration: none; text-decoration: none;
color: #2a5db0; color: #2a5db0;
} }
img, img,
iframe { iframe {
display: block; display: block;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
textarea { textarea {
atulUnsubmitted
Not Done
Inline Actions

Moving the global input styling and moving it to the input component.

Then why are we keeping styles like border and border-radius?

Don't these styles also affect the <textarea> tag? Are you sure we want to be removing these styles for that as well? Or should we break this into two separate selectors (one for input and another for textarea)?

atul: > Moving the global input styling and moving it to the input component. Then why are we…
benschacAuthorUnsubmitted
Done
Inline Actions

Yeah, I should break these styles out a bit more. I don't think they really do anything. But you make a good point that this will also effect textarea elements.

benschac: Yeah, I should break these styles out a bit more. I don't think they really do anything. But…
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 1px; border-radius: 1px;
font-family: var(--font-stack); font-family: var(--font-stack);
} }
:global(#react-root) { :global(#react-root) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines
View Options

native/avatars/edit-thread-avatar.react.js

Show All 21 Lines
a { a {
text-decoration: none; text-decoration: none;
color: #2a5db0; color: #2a5db0;
} }
img, img,
iframe { iframe {
display: block; display: block;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
textarea { textarea {
atulUnsubmitted
Not Done
Inline Actions

Moving the global input styling and moving it to the input component.

Then why are we keeping styles like border and border-radius?

Don't these styles also affect the <textarea> tag? Are you sure we want to be removing these styles for that as well? Or should we break this into two separate selectors (one for input and another for textarea)?

atul: > Moving the global input styling and moving it to the input component. Then why are we…
benschacAuthorUnsubmitted
Done
Inline Actions

Yeah, I should break these styles out a bit more. I don't think they really do anything. But you make a good point that this will also effect textarea elements.

benschac: Yeah, I should break these styles out a bit more. I don't think they really do anything. But…
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 1px; border-radius: 1px;
font-family: var(--font-stack); font-family: var(--font-stack);
} }
:global(#react-root) { :global(#react-root) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines
View Options

native/avatars/edit-user-avatar.react.js

Show All 21 Lines
a { a {
text-decoration: none; text-decoration: none;
color: #2a5db0; color: #2a5db0;
} }
img, img,
iframe { iframe {
display: block; display: block;
} }
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
textarea { textarea {
atulUnsubmitted
Not Done
Inline Actions

Moving the global input styling and moving it to the input component.

Then why are we keeping styles like border and border-radius?

Don't these styles also affect the <textarea> tag? Are you sure we want to be removing these styles for that as well? Or should we break this into two separate selectors (one for input and another for textarea)?

atul: > Moving the global input styling and moving it to the input component. Then why are we…
benschacAuthorUnsubmitted
Done
Inline Actions

Yeah, I should break these styles out a bit more. I don't think they really do anything. But you make a good point that this will also effect textarea elements.

benschac: Yeah, I should break these styles out a bit more. I don't think they really do anything. But…
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0;
border: 1px solid #dddddd; border: 1px solid #dddddd;
border-radius: 1px; border-radius: 1px;
font-family: var(--font-stack); font-family: var(--font-stack);
} }
:global(#react-root) { :global(#react-root) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
▲ Show 20 Lines • Show All 243 Lines • Show Last 20 Lines