Differential D6662 Diff 22267 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 { updateNavInfoActionType } from '../redux/action-types.js';			import {
				clearCalendarCommunityFilter,
				updateNavInfoActionType,
				} from '../redux/action-types';
	import { useSelector } from '../redux/redux-utils.js';			import { useSelector } from '../redux/redux-utils.js';
	import CommunityDrawer from './community-drawer.react';			import CommunityDrawer from './community-drawer.react';
	import css from './community-picker.css';			import css from './community-picker.css';

	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,			[css.inactiveContainer]: !isSettingsOpen,
	});			});

	const openChat = React.useCallback(			const tab = useSelector(state => state.navInfo.tab);
				michalUnsubmitted Not Done Inline Actions Actually after looking at it more, maybe it would be better to do something like const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar'); like we do in `isSettingsOpen` and `isInboxOpen` michal: Actually after looking at it more, maybe it would be better to do something like ``` const…

				const onPressInbox = React.useCallback(
	(event: SyntheticEvent<HTMLAnchorElement>) => {			(event: SyntheticEvent<HTMLAnchorElement>) => {
	event.preventDefault();			event.preventDefault();
				if (tab === 'calendar') {
				dispatch({
				type: clearCalendarCommunityFilter,
				});
				} else {
	dispatch({			dispatch({
	type: updateNavInfoActionType,			type: updateNavInfoActionType,
	payload: { tab: 'chat' },			payload: { tab: 'chat' },
	});			});
				}
	},			},
	[dispatch],			[dispatch, tab],
	);			);
	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,			[css.inactiveContainer]: !isInboxOpen,
	});			});

				const inboxButtonTitle = tab === 'calendar' ? 'All communities' : 'Inbox';

	return (			return (
	<div className={css.container}>			<div className={css.container}>
	<a className={inboxButtonContainerClass} onClick={openChat}>			<a className={inboxButtonContainerClass} onClick={onPressInbox}>
	<SWMansionIcon icon="inbox" size={36} />			<SWMansionIcon icon="inbox" size={36} />
				<div className={css.inboxButtonTitle}> {inboxButtonTitle} </div>
	</a>			</a>
	<div className={css.drawerWrapper}>			<div className={css.drawerWrapper}>
	<CommunityDrawer />			<CommunityDrawer />
	</div>			</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;