Differential D6686 Diff 22591 web/sidebar/community-picker.react.js

Changeset View

Standalone View

web/sidebar/community-picker.react.js

Show All 21 Lines	(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 settingsButtonContainerClass = classNames({
[css.activeContainer]: isSettingsOpen,
[css.inactiveContainer]: !isSettingsOpen,
});

const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar');		const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar');

const onPressInbox = React.useCallback(		const onPressInbox = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {		(event: SyntheticEvent<HTMLAnchorElement>) => {
event.preventDefault();		event.preventDefault();
if (isCalendarOpen) {		if (isCalendarOpen) {
dispatch({		dispatch({
type: clearCalendarCommunityFilter,		type: clearCalendarCommunityFilter,
});		});
} else {		} else {
dispatch({		dispatch({
type: updateNavInfoActionType,		type: updateNavInfoActionType,
payload: { tab: 'chat' },		payload: { tab: 'chat' },
});		});
}		}
},		},
[dispatch, isCalendarOpen],		[dispatch, isCalendarOpen],
);		);

		const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox';

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 isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
[css.activeContainer]: isInboxOpen,
[css.inactiveContainer]: !isInboxOpen,
});

const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox';		const sideLineInbox = classNames({
		[css.sideLine]: true,
		[css.sideLineActive]: isInboxOpen,
		});
		const sideLineSettings = classNames({
		[css.sideLine]: true,
		[css.sideLineActive]: isSettingsOpen,
		});

return (		return (
<div className={css.container}>		<div className={css.container}>
<a className={inboxButtonContainerClass} onClick={onPressInbox}>		<div className={css.header}>
<SWMansionIcon icon="inbox" size={36} />		<a className={css.itemContainer} onClick={onPressInbox}>
<div className={css.inboxButtonTitle}> {inboxButtonTitle} </div>		<div className={sideLineInbox} />
		<SWMansionIcon icon="inbox" size={24} />
		<div className={css.buttonTitle}> {inboxButtonTitle} </div>
</a>		</a>
		</div>
<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={css.footer}>
<a className={css.settingsIcon} onClick={openAccountSettings}>		<a className={css.itemContainer} onClick={openAccountSettings}>
		<div className={sideLineSettings} />
		<div className={css.settingsIcon} onClick={openAccountSettings}>
<SWMansionIcon icon="settings" size={22} />		<SWMansionIcon icon="settings" size={22} />
		</div>
		<div className={css.buttonTitle}>Settings</div>
</a>		</a>
</div>		</div>
</div>		</div>
);		);
}		}

export default CommunityPicker;		export default CommunityPicker;