Page MenuHomePhabricator
Differential D7512

[native] Introduce `useRemoveUserAvatar` hook
ClosedPublic
Actions

Authored by atul on Apr 18 2023, 7:48 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 11, 3:28 AM
Unknown Object (File)
Wed, Apr 9, 6:24 AM
Unknown Object (File)
Fri, Mar 28, 9:27 AM
Unknown Object (File)
Mar 3 2025, 4:45 PM
Unknown Object (File)
Feb 25 2025, 6:25 AM
Unknown Object (File)
Feb 25 2025, 6:25 AM
Unknown Object (File)
Feb 24 2025, 5:25 PM
Unknown Object (File)
Feb 24 2025, 5:24 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
Commits
rCOMM683fb7914ed5: [native] Introduce `useRemoveUserAvatar` hook
Summary

We introduce the useRemoveUserAvatar hook so we can unset the user avatar. Will introduce something similar for threads momentarily.

Depends on D7511

Test Plan

Able to clear user avatar:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Apr 18 2023, 7:48 PM
Herald added a subscriber: tomek. · View Herald TranscriptApr 18 2023, 7:48 PM
atul published this revision for review.Apr 18 2023, 7:50 PM
atul edited the summary of this revision. (Show Details)
atul edited the test plan for this revision. (Show Details)
atul added a parent revision: D7511: [native] Introduce naive `useSelectFromGalleryAndUpdateThreadAvatar` hook.
atul added inline comments.Apr 18 2023, 8:01 PM
native/avatars/avatar-hooks.js
327–333 ↗(On Diff #25320)

Here's how it looks on Android:

Screenshot_1681873252.png (2×1 px, 145 KB)

atul attached a referenced file: F494908: Screenshot_1681873252.png. (Show Details)Apr 18 2023, 8:01 PM
Harbormaster completed remote builds in B18489: Diff 25320.Apr 18 2023, 8:05 PM
atul added a child revision: D7513: [native] Introduce `useRemoveThreadAvatar` hook.Apr 18 2023, 8:19 PM
ashoat accepted this revision.Apr 19 2023, 6:20 AM
ashoat added inline comments.
native/avatars/avatar-hooks.js
327–333 ↗(On Diff #25320)

Thanks for including this

This revision is now accepted and ready to land.Apr 19 2023, 6:20 AM
Closed by commit rCOMM683fb7914ed5: [native] Introduce `useRemoveUserAvatar` hook (authored by atul). · Explain WhyApr 19 2023, 9:28 AM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM683fb7914ed5: [native] Introduce `useRemoveUserAvatar` hook.

Revision Contents
Changeset List

PathSize
native/
avatars/
36 lines
10 lines

Diff 25359

View Options

native/avatars/avatar-hooks.js

// @flow // @flow
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import type { AccountUserInfo } from 'lib/types/user-types'; import type { AccountUserInfo } from 'lib/types/user-types';
import sleep from 'lib/utils/sleep.js'; import sleep from 'lib/utils/sleep.js';
import SWMansionIcon from './swmansion-icon.react.js'; import SWMansionIcon from './swmansion-icon.react.js';
import UserAvatar from '../avatars/user-avatar.react.js'; import UserAvatar from '../avatars/user-avatar.react.js';
import { SingleLine } from '../components/single-line.react.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
type Props = { type Props = {
+userInfo: AccountUserInfo, +userInfo: AccountUserInfo,
}; };
function UserProfile(props: Props): React.Node { function UserProfile(props: Props): React.Node {
const { userInfo } = props; const { userInfo } = props;
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Linesfunction UserProfile(props: Props): React.Node {
]); ]);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} /> <SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
<View style={styles.userInfoContainer}> <View style={styles.userInfoContainer}>
<UserAvatar size="profile" userID={userInfo.id} /> <UserAvatar size="profile" userID={userInfo.id} />
<View style={styles.usernameContainer}> <View style={styles.usernameContainer}>
<Text style={styles.usernameText}>{userInfo.username}</Text> <SingleLine style={styles.usernameText}>
{userInfo.username}
</SingleLine>
{copyUsernameButton} {copyUsernameButton}
</View> </View>
</View> </View>
</View> </View>
); );
} }
const unboundStyles = { const unboundStyles = {
container: { container: {
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
moreIcon: { moreIcon: {
color: 'modalButtonLabel', color: 'modalButtonLabel',
alignSelf: 'flex-end', alignSelf: 'flex-end',
}, },
userInfoContainer: { userInfoContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
usernameContainer: { usernameContainer: {
flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-start',
paddingLeft: 16, paddingLeft: 16,
}, },
usernameText: { usernameText: {
color: 'modalForegroundLabel', color: 'modalForegroundLabel',
fontSize: 18, fontSize: 18,
fontWeight: '500', fontWeight: '500',
}, },
copyUsernameContainer: { copyUsernameContainer: {
Show All 15 Lines
View Options

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

// @flow // @flow
import Clipboard from '@react-native-clipboard/clipboard'; import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native'; import { View, Text, TouchableOpacity } from 'react-native';
import type { AccountUserInfo } from 'lib/types/user-types'; import type { AccountUserInfo } from 'lib/types/user-types';
import sleep from 'lib/utils/sleep.js'; import sleep from 'lib/utils/sleep.js';
import SWMansionIcon from './swmansion-icon.react.js'; import SWMansionIcon from './swmansion-icon.react.js';
import UserAvatar from '../avatars/user-avatar.react.js'; import UserAvatar from '../avatars/user-avatar.react.js';
import { SingleLine } from '../components/single-line.react.js';
import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';
type Props = { type Props = {
+userInfo: AccountUserInfo, +userInfo: AccountUserInfo,
}; };
function UserProfile(props: Props): React.Node { function UserProfile(props: Props): React.Node {
const { userInfo } = props; const { userInfo } = props;
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Linesfunction UserProfile(props: Props): React.Node {
]); ]);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} /> <SWMansionIcon name="menu-vertical" size={24} style={styles.moreIcon} />
<View style={styles.userInfoContainer}> <View style={styles.userInfoContainer}>
<UserAvatar size="profile" userID={userInfo.id} /> <UserAvatar size="profile" userID={userInfo.id} />
<View style={styles.usernameContainer}> <View style={styles.usernameContainer}>
<Text style={styles.usernameText}>{userInfo.username}</Text> <SingleLine style={styles.usernameText}>
{userInfo.username}
</SingleLine>
{copyUsernameButton} {copyUsernameButton}
</View> </View>
</View> </View>
</View> </View>
); );
} }
const unboundStyles = { const unboundStyles = {
container: { container: {
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
moreIcon: { moreIcon: {
color: 'modalButtonLabel', color: 'modalButtonLabel',
alignSelf: 'flex-end', alignSelf: 'flex-end',
}, },
userInfoContainer: { userInfoContainer: {
flexDirection: 'row', flexDirection: 'row',
}, },
usernameContainer: { usernameContainer: {
flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'flex-start',
paddingLeft: 16, paddingLeft: 16,
}, },
usernameText: { usernameText: {
color: 'modalForegroundLabel', color: 'modalForegroundLabel',
fontSize: 18, fontSize: 18,
fontWeight: '500', fontWeight: '500',
}, },
copyUsernameContainer: { copyUsernameContainer: {
Show All 15 Lines