Differential D6346 Diff 21202 web/settings/account-settings.react.js

Changeset 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';		import { logOut, logOutActionTypes } from 'lib/actions/user-actions';
import { useModalContext } from 'lib/components/modal-provider.react';		import { useModalContext } from 'lib/components/modal-provider.react';
import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';		import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';
import {		import {
useDispatchActionPromise,		useDispatchActionPromise,
useServerCall,		useServerCall,
} from 'lib/utils/action-utils';		} from 'lib/utils/action-utils';

import Button from '../components/button.react';		import Button from '../components/button.react';
import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
		import SettingsSwitcher from '../sidebar/settings-switcher.react';
import SWMansionIcon from '../SWMansionIcon.react';		import SWMansionIcon from '../SWMansionIcon.react';
import css from './account-settings.css';		import css from './account-settings.css';
import PasswordChangeModal from './password-change-modal';		import PasswordChangeModal from './password-change-modal';
import BlockListModal from './relationship/block-list-modal.react';		import BlockListModal from './relationship/block-list-modal.react';
import FriendListModal from './relationship/friend-list-modal.react';		import FriendListModal from './relationship/friend-list-modal.react';

function AccountSettings(): React.Node {		function AccountSettings(): React.Node {
const sendLogoutRequest = useServerCall(logOut);		const sendLogoutRequest = useServerCall(logOut);
Show All 26 Lines	function AccountSettings(): React.Node {

const currentUserInfo = useSelector(state => state.currentUserInfo);		const currentUserInfo = useSelector(state => state.currentUserInfo);
if (!currentUserInfo \|\| currentUserInfo.anonymous) {		if (!currentUserInfo \|\| currentUserInfo.anonymous) {
return null;		return null;
}		}
const { username } = currentUserInfo;		const { username } = currentUserInfo;

return (		return (
		<div className={css.outer}>
		<div className={css.switcher}>
		<SettingsSwitcher />
		</div>
<div className={css.container}>		<div className={css.container}>
<h4 className={css.header}>My Account</h4>		<h4 className={css.header}>My Account</h4>
<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}>{username}</span>		<span className={css.username}>{username}</span>
</p>		</p>
<Button variant="text" onClick={logOutUser}>		<Button variant="text" onClick={logOutUser}>
<p className={css.buttonText}>Log out</p>		<p className={css.buttonText}>Log out</p>
</Button>		</Button>
</li>		</li>
<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		<a
className={css.editPasswordLink}		className={css.editPasswordLink}
onClick={showPasswordChangeModal}		onClick={showPasswordChangeModal}
>		>
<SWMansionIcon icon="edit-1" size={22} />		<SWMansionIcon icon="edit-1" size={22} />
</a>		</a>
</span>		</span>
</li>		</li>
<li>		<li>
<span>Friend List</span>		<span>Friend List</span>
<Button variant="text" onClick={openFriendList}>		<Button variant="text" onClick={openFriendList}>
<p className={css.buttonText}>See List</p>		<p className={css.buttonText}>See List</p>
</Button>		</Button>
</li>		</li>
<li>		<li>
<span>Block List</span>		<span>Block List</span>
<Button variant="text" onClick={openBlockList}>		<Button variant="text" onClick={openBlockList}>
<p className={css.buttonText}>See List</p>		<p className={css.buttonText}>See List</p>
</Button>		</Button>
</li>		</li>
</ul>		</ul>
</div>		</div>
</div>		</div>
		</div>
);		);
}		}

export default AccountSettings;		export default AccountSettings;