Differential D6164 Diff 22527 web/sidebar/community-picker.react.js

Changeset View

Standalone View

web/sidebar/community-picker.react.js

	// @flow			// @flow

	import classNames from 'classnames';			import classNames from 'classnames';
	import * as React from 'react';			import * as React from 'react';
	import { useDispatch } from 'react-redux';			import { useDispatch } from 'react-redux';

	import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';			import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';

				import CommunityDrawer from './community-drawer.react.js';
	import css from './community-picker.css';			import css from './community-picker.css';
	import { updateNavInfoActionType } from '../redux/action-types.js';			import { updateNavInfoActionType } from '../redux/action-types.js';
	import { useSelector } from '../redux/redux-utils.js';			import { useSelector } from '../redux/redux-utils.js';

	function CommunityPicker(): React.Node {			function CommunityPicker(): React.Node {
	const dispatch = useDispatch();			const dispatch = useDispatch();

	const openAccountSettings = React.useCallback(			const openAccountSettings = React.useCallback(
	(event: SyntheticEvent<HTMLButtonElement>) => {			(event: SyntheticEvent<HTMLButtonElement>) => {
	event.preventDefault();			event.preventDefault();
	dispatch({			dispatch({
	type: updateNavInfoActionType,			type: updateNavInfoActionType,
	payload: { tab: 'settings', settingsSection: 'account' },			payload: { tab: 'settings', settingsSection: 'account' },
	});			});
	},			},
	[dispatch],			[dispatch],
	);			);
	const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');			const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
	const settingsButtonContainerClass = classNames({			const settingsButtonContainerClass = classNames({
	[css.activeContainer]: isSettingsOpen,			[css.activeContainer]: isSettingsOpen,
				[css.inactiveContainer]: !isSettingsOpen,
	});			});

	const openChat = React.useCallback(			const openChat = React.useCallback(
	(event: SyntheticEvent<HTMLAnchorElement>) => {			(event: SyntheticEvent<HTMLAnchorElement>) => {
	event.preventDefault();			event.preventDefault();
	dispatch({			dispatch({
	type: updateNavInfoActionType,			type: updateNavInfoActionType,
	payload: { tab: 'chat' },			payload: { tab: 'chat' },
	});			});
	},			},
	[dispatch],			[dispatch],
	);			);
	const isInboxOpen = useSelector(			const isInboxOpen = useSelector(
	state =>			state =>
	state.navInfo.tab === 'chat' \|\|			state.navInfo.tab === 'chat' \|\|
	state.navInfo.tab === 'apps' \|\|			state.navInfo.tab === 'apps' \|\|
	state.navInfo.tab === 'calendar',			state.navInfo.tab === 'calendar',
	);			);
	const inboxButtonContainerClass = classNames({			const inboxButtonContainerClass = classNames({
	[css.activeContainer]: isInboxOpen,			[css.activeContainer]: isInboxOpen,
				[css.inactiveContainer]: !isInboxOpen,
	});			});

	return (			return (
	<div className={css.container}>			<div className={css.container}>
	<a className={inboxButtonContainerClass} onClick={openChat}>			<a className={inboxButtonContainerClass} onClick={openChat}>
	<SWMansionIcon icon="inbox" size={36} />			<SWMansionIcon icon="inbox" size={36} />
	</a>			</a>
				<div className={css.drawerWrapper}>
				<CommunityDrawer />
				</div>
	<div className={css.spacer} />			<div className={css.spacer} />
	<div className={settingsButtonContainerClass}>			<div className={settingsButtonContainerClass}>
	<a className={css.settingsIcon} onClick={openAccountSettings}>			<a className={css.settingsIcon} onClick={openAccountSettings}>
	<SWMansionIcon icon="settings" size={22} />			<SWMansionIcon icon="settings" size={22} />
	</a>			</a>
	</div>			</div>
	</div>			</div>
	);			);
	}			}

	export default CommunityPicker;			export default CommunityPicker;