Changeset View
Changeset View
Standalone View
Standalone View
native/profile/profile-screen.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { View, Text, Alert, Platform, ScrollView } from 'react-native'; | import { View, Text, Alert, Platform, ScrollView } from 'react-native'; | ||||
import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js'; | import { logOutActionTypes, logOut } from 'lib/actions/user-actions.js'; | ||||
import { useStringForUser } from 'lib/hooks/ens-cache.js'; | import { useStringForUser } from 'lib/hooks/ens-cache.js'; | ||||
import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js'; | import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js'; | ||||
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; | import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; | ||||
import { accountHasPassword } from 'lib/shared/account-utils.js'; | import { accountHasPassword } from 'lib/shared/account-utils.js'; | ||||
import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | |||||
import type { LogOutResult } from 'lib/types/account-types.js'; | import type { LogOutResult } from 'lib/types/account-types.js'; | ||||
import { type PreRequestUserState } from 'lib/types/session-types.js'; | import { type PreRequestUserState } from 'lib/types/session-types.js'; | ||||
import { type CurrentUserInfo } from 'lib/types/user-types.js'; | import { type CurrentUserInfo } from 'lib/types/user-types.js'; | ||||
import { | import { | ||||
type DispatchActionPromise, | type DispatchActionPromise, | ||||
useDispatchActionPromise, | useDispatchActionPromise, | ||||
useServerCall, | useServerCall, | ||||
} from 'lib/utils/action-utils.js'; | } from 'lib/utils/action-utils.js'; | ||||
import type { ProfileNavigationProp } from './profile.react.js'; | import type { ProfileNavigationProp } from './profile.react.js'; | ||||
import { deleteNativeCredentialsFor } from '../account/native-credentials.js'; | import { deleteNativeCredentialsFor } from '../account/native-credentials.js'; | ||||
import Action from '../components/action-row.react.js'; | import Action from '../components/action-row.react.js'; | ||||
import Avatar from '../components/avatar.react.js'; | |||||
import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
import EditSettingButton from '../components/edit-setting-button.react.js'; | import EditSettingButton from '../components/edit-setting-button.react.js'; | ||||
import { SingleLine } from '../components/single-line.react.js'; | import { SingleLine } from '../components/single-line.react.js'; | ||||
import type { NavigationRoute } from '../navigation/route-names.js'; | import type { NavigationRoute } from '../navigation/route-names.js'; | ||||
import { | import { | ||||
EditPasswordRouteName, | EditPasswordRouteName, | ||||
DeleteAccountRouteName, | DeleteAccountRouteName, | ||||
BuildInfoRouteName, | BuildInfoRouteName, | ||||
▲ Show 20 Lines • Show All 82 Lines • ▼ Show 20 Lines | if (accountHasPassword(this.props.currentUserInfo)) { | ||||
onPress={this.onPressEditPassword} | onPress={this.onPressEditPassword} | ||||
canChangeSettings={true} | canChangeSettings={true} | ||||
style={this.props.styles.editPasswordButton} | style={this.props.styles.editPasswordButton} | ||||
/> | /> | ||||
</Action.Row> | </Action.Row> | ||||
); | ); | ||||
} | } | ||||
const avatarInfo = getAvatarForUser(this.props.currentUserInfo); | |||||
const avatar = ( | |||||
<View style={this.props.styles.avatarSection}> | |||||
<Avatar size="profile" avatarInfo={avatarInfo} /> | |||||
</View> | |||||
); | |||||
return ( | return ( | ||||
<View style={this.props.styles.container}> | <View style={this.props.styles.container}> | ||||
<ScrollView | <ScrollView | ||||
contentContainerStyle={this.props.styles.scrollViewContentContainer} | contentContainerStyle={this.props.styles.scrollViewContentContainer} | ||||
style={this.props.styles.scrollView} | style={this.props.styles.scrollView} | ||||
> | > | ||||
<Text style={this.props.styles.header}>USER AVATAR</Text> | |||||
<View style={this.props.styles.section}>{avatar}</View> | |||||
<Text style={this.props.styles.header}>ACCOUNT</Text> | <Text style={this.props.styles.header}>ACCOUNT</Text> | ||||
<View style={this.props.styles.section}> | <View style={this.props.styles.section}> | ||||
<Action.Row> | <Action.Row> | ||||
<Text style={this.props.styles.loggedInLabel}>Logged in as </Text> | <Text style={this.props.styles.loggedInLabel}>Logged in as </Text> | ||||
<SingleLine | <SingleLine | ||||
style={[this.props.styles.label, this.props.styles.username]} | style={[this.props.styles.label, this.props.styles.username]} | ||||
> | > | ||||
{this.props.stringForUser} | {this.props.stringForUser} | ||||
▲ Show 20 Lines • Show All 143 Lines • ▼ Show 20 Lines | class ProfileScreen extends React.PureComponent<Props> { | ||||
}; | }; | ||||
onPressBlockList = () => { | onPressBlockList = () => { | ||||
this.navigateIfActive(BlockListRouteName); | this.navigateIfActive(BlockListRouteName); | ||||
}; | }; | ||||
} | } | ||||
const unboundStyles = { | const unboundStyles = { | ||||
avatarSection: { | |||||
alignItems: 'center', | |||||
paddingVertical: 16, | |||||
}, | |||||
container: { | container: { | ||||
flex: 1, | flex: 1, | ||||
}, | }, | ||||
content: { | content: { | ||||
flex: 1, | flex: 1, | ||||
}, | }, | ||||
deleteAccountButton: { | deleteAccountButton: { | ||||
paddingHorizontal: 24, | paddingHorizontal: 24, | ||||
▲ Show 20 Lines • Show All 107 Lines • Show Last 20 Lines |