Changeset View
Changeset View
Standalone View
Standalone View
web/settings/account-settings.react.js
| // @flow | // @flow | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js'; | import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js'; | ||||
| import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
| import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; | import SWMansionIcon from 'lib/components/SWMansionIcon.react.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 { accountHasPassword } from 'lib/shared/account-utils.js'; | import { accountHasPassword } from 'lib/shared/account-utils.js'; | ||||
| import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | |||||
| import { | import { | ||||
| useDispatchActionPromise, | useDispatchActionPromise, | ||||
| useServerCall, | useServerCall, | ||||
| } from 'lib/utils/action-utils.js'; | } from 'lib/utils/action-utils.js'; | ||||
| import css from './account-settings.css'; | import css from './account-settings.css'; | ||||
| import PasswordChangeModal from './password-change-modal.js'; | import PasswordChangeModal from './password-change-modal.js'; | ||||
| import BlockListModal from './relationship/block-list-modal.react.js'; | import BlockListModal from './relationship/block-list-modal.react.js'; | ||||
| import FriendListModal from './relationship/friend-list-modal.react.js'; | import FriendListModal from './relationship/friend-list-modal.react.js'; | ||||
| import Avatar from '../components/avatar.react.js'; | |||||
| import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
| import { useSelector } from '../redux/redux-utils.js'; | import { useSelector } from '../redux/redux-utils.js'; | ||||
| function AccountSettings(): React.Node { | function AccountSettings(): React.Node { | ||||
| const sendLogoutRequest = useServerCall(logOut); | const sendLogoutRequest = useServerCall(logOut); | ||||
| const preRequestUserState = useSelector(preRequestUserStateSelector); | const preRequestUserState = useSelector(preRequestUserStateSelector); | ||||
| const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
| const logOutUser = React.useCallback( | const logOutUser = React.useCallback( | ||||
| Show All 22 Lines | function AccountSettings(): React.Node { | ||||
| ); | ); | ||||
| const isAccountWithPassword = useSelector(state => | const isAccountWithPassword = useSelector(state => | ||||
| accountHasPassword(state.currentUserInfo), | accountHasPassword(state.currentUserInfo), | ||||
| ); | ); | ||||
| const currentUserInfo = useSelector(state => state.currentUserInfo); | const currentUserInfo = useSelector(state => state.currentUserInfo); | ||||
| const stringForUser = useStringForUser(currentUserInfo); | const stringForUser = useStringForUser(currentUserInfo); | ||||
| const avatarInfo = React.useMemo( | |||||
| () => getAvatarForUser(currentUserInfo), | |||||
| [currentUserInfo], | |||||
| ); | |||||
| if (!currentUserInfo || currentUserInfo.anonymous) { | if (!currentUserInfo || currentUserInfo.anonymous) { | ||||
| return null; | return null; | ||||
| } | } | ||||
| let changePasswordSection; | let changePasswordSection; | ||||
| if (isAccountWithPassword) { | if (isAccountWithPassword) { | ||||
| changePasswordSection = ( | changePasswordSection = ( | ||||
| <li> | <li> | ||||
| <span>Password</span> | <span>Password</span> | ||||
| <span className={css.passwordContainer}> | <span className={css.passwordContainer}> | ||||
| <span className={css.password}>******</span> | <span className={css.password}>******</span> | ||||
| <a className={css.editPasswordLink} onClick={showPasswordChangeModal}> | <a className={css.editPasswordLink} onClick={showPasswordChangeModal}> | ||||
| <SWMansionIcon icon="edit-1" size={22} /> | <SWMansionIcon icon="edit-1" size={22} /> | ||||
| </a> | </a> | ||||
| </span> | </span> | ||||
| </li> | </li> | ||||
| ); | ); | ||||
| } | } | ||||
| return ( | return ( | ||||
| <div className={css.container}> | <div className={css.container}> | ||||
| <h4 className={css.header}>My Account</h4> | <h4 className={css.header}>My Account</h4> | ||||
| <Avatar avatarInfo={avatarInfo} size="profile" /> | |||||
| <div className={css.content}> | <div className={css.content}> | ||||
| <ul> | <ul> | ||||
| <li> | <li> | ||||
| <p className={css.logoutContainer}> | <p className={css.logoutContainer}> | ||||
| <span className={css.logoutLabel}>{'Logged in as '}</span> | <span className={css.logoutLabel}>{'Logged in as '}</span> | ||||
| <span className={css.username}>{stringForUser}</span> | <span className={css.username}>{stringForUser}</span> | ||||
| </p> | </p> | ||||
| <Button variant="text" onClick={logOutUser}> | <Button variant="text" onClick={logOutUser}> | ||||
| Show All 23 Lines | |||||