Page MenuHomePhabricator
Differential D8286

[web] Remove `LoadingIndicator` from `EditUserAvatar`
ClosedPublic
Actions

Authored by atul on Jun 21 2023, 3:39 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 4:35 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:02 PM
Unknown Object (File)
Wed, Mar 5, 4:01 PM
Unknown Object (File)
Wed, Mar 5, 3:57 PM
Unknown Object (File)
Wed, Feb 26, 11:12 AM
Unknown Object (File)
Tue, Feb 25, 1:05 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
Commits
rCOMMce4888d64b5f: [web] Remove `LoadingIndicator` from `EditUserAvatar`
Summary

In D8285 we introduced a showSpinner prop to the Avatar component. In this diff we remove the LoadingIndicator from EditUserAvatar component and instead pass showSpinner down to Avatar to take advantage of that.

This deduplicates redundant spinner code. Now that we have a "toggleable" spinner in Avatar, components derived from it can use that spinner "for free."

Depends on D8285

Test Plan

Things continue to look as expected:

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

atul created this revision.Jun 21 2023, 3:39 PM
Herald added a subscriber: tomek. · View Herald TranscriptJun 21 2023, 3:39 PM
atul published this revision for review.Jun 21 2023, 3:40 PM
atul edited the test plan for this revision. (Show Details)
atul edited the summary of this revision. (Show Details)
atul edited the summary of this revision. (Show Details)
Harbormaster completed remote builds in B20413: Diff 27985.Jun 21 2023, 4:03 PM
atul added a child revision: D8287: [web] Split `EmojiAvatarSelectionModal` into "Emoji" and "Color" tab.Jun 21 2023, 4:04 PM
rohan accepted this revision.Jun 22 2023, 6:29 AM
This revision is now accepted and ready to land.Jun 22 2023, 6:29 AM
atul updated this revision to Diff 28082.Jun 23 2023, 1:56 PM

rebase before landing

This revision was landed with ongoing or failed builds.Jun 23 2023, 2:07 PM
Closed by commit rCOMMce4888d64b5f: [web] Remove `LoadingIndicator` from `EditUserAvatar` (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMce4888d64b5f: [web] Remove `LoadingIndicator` from `EditUserAvatar`.
Harbormaster completed remote builds in B20496: Diff 28082.Jun 23 2023, 2:45 PM

Revision Contents
Changeset List

Diff 28082

View Options

web/avatars/edit-user-avatar.css

Show All 40 Linesfunction ManagePublicLinkScreen(props: Props): React.Node {
let errorComponent = null; let errorComponent = null;
if (error) { if (error) {
errorComponent = <Text style={styles.error}>{error}</Text>; errorComponent = <Text style={styles.error}>{error}</Text>;
} }
const onDisableButtonClick = React.useCallback(() => { const onDisableButtonClick = React.useCallback(() => {
Alert.alert( Alert.alert(
'Disable public link', 'Disable public link',
'Are you sure you want to disable your public link? Members who have your community’s public link but have not joined will not able to with the disabled link. \n' + 'Are you sure you want to disable your public link?\n' +
'\n' + '\n' +
'Other communities may also claim your previous public link url.', 'Other communities will be able to claim the same URL.',
[ [
{ {
text: 'Confirm disable', text: 'Confirm disable',
style: 'destructive', style: 'destructive',
onPress: disableInviteLink, onPress: disableInviteLink,
}, },
{ {
text: 'Cancel', text: 'Cancel',
Show All 18 Lines disablePublicLinkButton = (
</View> </View>
); );
} }
return ( return (
<View> <View>
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionText}> <Text style={styles.sectionText}>
Let your community be more accessible with your own unique public Invite links make it easy for your friends to join your community.
link. By enabling a public link, you are allowing anyone who has your Anybody who knows your community’s invite link will be able to join
link to join your community.{'\n\n'} it. Note that if you change your public link’s URL, other communities
Editing your community’s public link allows other communities to claim will be able to claim the old URL.
ashoatUnsubmitted
Not Done
Inline Actions

From the screenshot, this looks like too much text in a row. We could try separating out the third sentence into its own paragraph. We could also try showing the three sentences as three bullet points. @ted, any thoughts?

ashoat: From the screenshot, this looks like too much text in a row. We could try separating out the…
tomekAuthorUnsubmitted
Done
Inline Actions

In the original design, the last sentence was separated by an empty line. It probably makes sense to do the same here.

native-manage-newline.png (497×407 px, 38 KB)

tomek: In the original design, the last sentence was separated by an empty line. It probably makes…
your previous URL.
</Text> </Text>
</View> </View>
<Text style={styles.sectionTitle}>INVITE URL</Text> <Text style={styles.sectionTitle}>INVITE URL</Text>
<View style={styles.section}> <View style={styles.section}>
<View style={styles.inviteLink}> <View style={styles.inviteLink}>
<Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text> <Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
▲ Show 20 Lines • Show All 108 Lines • Show Last 20 Lines
View Options

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

Show All 40 Linesfunction ManagePublicLinkScreen(props: Props): React.Node {
let errorComponent = null; let errorComponent = null;
if (error) { if (error) {
errorComponent = <Text style={styles.error}>{error}</Text>; errorComponent = <Text style={styles.error}>{error}</Text>;
} }
const onDisableButtonClick = React.useCallback(() => { const onDisableButtonClick = React.useCallback(() => {
Alert.alert( Alert.alert(
'Disable public link', 'Disable public link',
'Are you sure you want to disable your public link? Members who have your community’s public link but have not joined will not able to with the disabled link. \n' + 'Are you sure you want to disable your public link?\n' +
'\n' + '\n' +
'Other communities may also claim your previous public link url.', 'Other communities will be able to claim the same URL.',
[ [
{ {
text: 'Confirm disable', text: 'Confirm disable',
style: 'destructive', style: 'destructive',
onPress: disableInviteLink, onPress: disableInviteLink,
}, },
{ {
text: 'Cancel', text: 'Cancel',
Show All 18 Lines disablePublicLinkButton = (
</View> </View>
); );
} }
return ( return (
<View> <View>
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionText}> <Text style={styles.sectionText}>
Let your community be more accessible with your own unique public Invite links make it easy for your friends to join your community.
link. By enabling a public link, you are allowing anyone who has your Anybody who knows your community’s invite link will be able to join
link to join your community.{'\n\n'} it. Note that if you change your public link’s URL, other communities
Editing your community’s public link allows other communities to claim will be able to claim the old URL.
ashoatUnsubmitted
Not Done
Inline Actions

From the screenshot, this looks like too much text in a row. We could try separating out the third sentence into its own paragraph. We could also try showing the three sentences as three bullet points. @ted, any thoughts?

ashoat: From the screenshot, this looks like too much text in a row. We could try separating out the…
tomekAuthorUnsubmitted
Done
Inline Actions

In the original design, the last sentence was separated by an empty line. It probably makes sense to do the same here.

native-manage-newline.png (497×407 px, 38 KB)

tomek: In the original design, the last sentence was separated by an empty line. It probably makes…
your previous URL.
</Text> </Text>
</View> </View>
<Text style={styles.sectionTitle}>INVITE URL</Text> <Text style={styles.sectionTitle}>INVITE URL</Text>
<View style={styles.section}> <View style={styles.section}>
<View style={styles.inviteLink}> <View style={styles.inviteLink}>
<Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text> <Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
▲ Show 20 Lines • Show All 108 Lines • Show Last 20 Lines
View Options

web/avatars/user-avatar.react.js

Show All 40 Linesfunction ManagePublicLinkScreen(props: Props): React.Node {
let errorComponent = null; let errorComponent = null;
if (error) { if (error) {
errorComponent = <Text style={styles.error}>{error}</Text>; errorComponent = <Text style={styles.error}>{error}</Text>;
} }
const onDisableButtonClick = React.useCallback(() => { const onDisableButtonClick = React.useCallback(() => {
Alert.alert( Alert.alert(
'Disable public link', 'Disable public link',
'Are you sure you want to disable your public link? Members who have your community’s public link but have not joined will not able to with the disabled link. \n' + 'Are you sure you want to disable your public link?\n' +
'\n' + '\n' +
'Other communities may also claim your previous public link url.', 'Other communities will be able to claim the same URL.',
[ [
{ {
text: 'Confirm disable', text: 'Confirm disable',
style: 'destructive', style: 'destructive',
onPress: disableInviteLink, onPress: disableInviteLink,
}, },
{ {
text: 'Cancel', text: 'Cancel',
Show All 18 Lines disablePublicLinkButton = (
</View> </View>
); );
} }
return ( return (
<View> <View>
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionText}> <Text style={styles.sectionText}>
Let your community be more accessible with your own unique public Invite links make it easy for your friends to join your community.
link. By enabling a public link, you are allowing anyone who has your Anybody who knows your community’s invite link will be able to join
link to join your community.{'\n\n'} it. Note that if you change your public link’s URL, other communities
Editing your community’s public link allows other communities to claim will be able to claim the old URL.
ashoatUnsubmitted
Not Done
Inline Actions

From the screenshot, this looks like too much text in a row. We could try separating out the third sentence into its own paragraph. We could also try showing the three sentences as three bullet points. @ted, any thoughts?

ashoat: From the screenshot, this looks like too much text in a row. We could try separating out the…
tomekAuthorUnsubmitted
Done
Inline Actions

In the original design, the last sentence was separated by an empty line. It probably makes sense to do the same here.

native-manage-newline.png (497×407 px, 38 KB)

tomek: In the original design, the last sentence was separated by an empty line. It probably makes…
your previous URL.
</Text> </Text>
</View> </View>
<Text style={styles.sectionTitle}>INVITE URL</Text> <Text style={styles.sectionTitle}>INVITE URL</Text>
<View style={styles.section}> <View style={styles.section}>
<View style={styles.inviteLink}> <View style={styles.inviteLink}>
<Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text> <Text style={styles.inviteLinkPrefix}>{inviteLinkUrl('')}</Text>
<TextInput <TextInput
style={styles.input} style={styles.input}
▲ Show 20 Lines • Show All 108 Lines • Show Last 20 Lines