Page MenuHomePhabricator
Files F3408668

D8043.diff
No OneTemporary
Actions

D8043.diff
View Options

diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js
--- a/lib/shared/avatar-utils.js
+++ b/lib/shared/avatar-utils.js
@@ -347,6 +347,7 @@
export {
getRandomDefaultEmojiAvatar,
+ getDefaultAvatar,
getAvatarForUser,
getUserAvatarForThread,
getAvatarForThread,
diff --git a/native/account/registration/emoji-avatar-selection.react.js b/native/account/registration/emoji-avatar-selection.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/emoji-avatar-selection.react.js
@@ -0,0 +1,74 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import { getDefaultAvatar } from 'lib/shared/avatar-utils.js';
+
+import RegistrationContainer from './registration-container.react.js';
+import RegistrationContentContainer from './registration-content-container.react.js';
+import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import { EditUserAvatarContext } from '../../avatars/edit-user-avatar-provider.react.js';
+import EmojiAvatarCreation from '../../avatars/emoji-avatar-creation.react.js';
+import type { NavigationRoute } from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+
+export type EmojiAvatarSelectionParams = {
+ +usernameOrEthAddress: string,
+};
+
+type Props = {
+ +navigation: RegistrationNavigationProp<'EmojiAvatarSelection'>,
+ +route: NavigationRoute<'EmojiAvatarSelection'>,
+};
+function EmojiAvatarSelection(props: Props): React.Node {
+ const editUserAvatarContext = React.useContext(EditUserAvatarContext);
+ invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
+
+ const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
+
+ const { usernameOrEthAddress } = props.route.params;
+ const savedEmojiAvatarFunc = React.useCallback(
+ () => getDefaultAvatar(usernameOrEthAddress),
+ [usernameOrEthAddress],
+ );
+
+ const { goBack } = props.navigation;
+ const onSuccess = React.useCallback(
+ avatarRequest => {
+ goBack();
+ return setUserAvatar(avatarRequest);
+ },
+ [goBack, setUserAvatar],
+ );
+
+ const styles = useStyles(unboundStyles);
+ return (
+ <RegistrationContainer>
+ <RegistrationContentContainer style={styles.scrollViewContentContainer}>
+ <Text style={styles.header}>Select an emoji</Text>
+ <EmojiAvatarCreation
+ saveAvatarCall={onSuccess}
+ saveAvatarCallLoading={userAvatarSaveInProgress}
+ savedEmojiAvatarFunc={savedEmojiAvatarFunc}
+ />
+ </RegistrationContentContainer>
+ </RegistrationContainer>
+ );
+}
+
+const unboundStyles = {
+ scrollViewContentContainer: {
+ flexGrow: 1,
+ paddingHorizontal: 0,
+ },
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ paddingHorizontal: 16,
+ },
+};
+
+export default EmojiAvatarSelection;
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -10,6 +10,7 @@
import AvatarSelection from './avatar-selection.react.js';
import ConnectEthereum from './connect-ethereum.react.js';
import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
+import EmojiAvatarSelection from './emoji-avatar-selection.react.js';
import ExistingEthereumAccount from './existing-ethereum-account.react.js';
import KeyserverSelection from './keyserver-selection.react.js';
import PasswordSelection from './password-selection.react.js';
@@ -23,6 +24,7 @@
UsernameSelectionRouteName,
PasswordSelectionRouteName,
AvatarSelectionRouteName,
+ EmojiAvatarSelectionRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -83,6 +85,10 @@
name={AvatarSelectionRouteName}
component={AvatarSelection}
/>
+ <Registration.Screen
+ name={EmojiAvatarSelectionRouteName}
+ component={EmojiAvatarSelection}
+ />
</Registration.Navigator>
);
}
diff --git a/native/avatars/emoji-avatar-creation.react.js b/native/avatars/emoji-avatar-creation.react.js
--- a/native/avatars/emoji-avatar-creation.react.js
+++ b/native/avatars/emoji-avatar-creation.react.js
@@ -139,6 +139,7 @@
const unboundStyles = {
container: {
+ flexGrow: 1,
flex: 1,
justifyContent: 'space-between',
},
@@ -168,8 +169,10 @@
backgroundColor: 'modalSubtext',
},
buttonsContainer: {
+ flexGrow: 1,
paddingHorizontal: 16,
paddingBottom: 8,
+ justifyContent: 'flex-end',
},
saveButton: {
backgroundColor: 'purpleButton',
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -6,6 +6,7 @@
import type { InviteLinkModalParams } from './invite-link-modal.react';
import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js';
import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js';
+import type { EmojiAvatarSelectionParams } from '../account/registration/emoji-avatar-selection.react.js';
import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js';
import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js';
import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js';
@@ -113,6 +114,7 @@
export const MessageSearchRouteName = 'MessageSearch';
export const PasswordSelectionRouteName = 'PasswordSelection';
export const AvatarSelectionRouteName = 'AvatarSelection';
+export const EmojiAvatarSelectionRouteName = 'EmojiAvatarSelection';
export type RootParamList = {
+LoggedOutModal: void,
@@ -211,6 +213,7 @@
+UsernameSelection: UsernameSelectionParams,
+PasswordSelection: PasswordSelectionParams,
+AvatarSelection: AvatarSelectionParams,
+ +EmojiAvatarSelection: EmojiAvatarSelectionParams,
};
export type InviteLinkParamList = {

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 12:22 PM (17 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2617046
Default Alt Text
D8043.diff (6 KB)

Event Timeline