Differential D6842 Diff 22964 web/navigation-panels/topbar.react.js

Changeset View

Standalone View

web/navigation-panels/topbar.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	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 AppSwitcher from './app-switcher.react.js';			import AppSwitcher from './app-switcher.react.js';
				import NavStateInfoBar from './nav-state-info-bar.react.js';
	import css from './topbar.css';			import css from './topbar.css';
	import Button from '../components/button.react.js';			import Button from '../components/button.react.js';
	import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';			import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
				import { useDrawerSelectedThreadID } from '../selectors/thread-selectors.js';
				import { useThreadInfoForPossiblyPendingThread } from '../utils/thread-utils.js';

	function Topbar(): React.Node {			function Topbar(): React.Node {
	const { pushModal } = useModalContext();			const { pushModal } = useModalContext();

	const onClickApps = React.useCallback(			const onClickApps = React.useCallback(
	(event: SyntheticEvent<HTMLAnchorElement>) => {			(event: SyntheticEvent<HTMLAnchorElement>) => {
	event.preventDefault();			event.preventDefault();
	pushModal(<AppsDirectory />);			pushModal(<AppsDirectory />);
	},			},
	[pushModal],			[pushModal],
	);			);

	const appNavigationItem = React.useMemo(			const appNavigationItem = React.useMemo(
	() => (			() => (
	<Button className={css.plusButton} onClick={onClickApps}>			<Button className={css.plusButton} onClick={onClickApps}>
	<SWMansionIcon icon="plus-small" size={24} />			<SWMansionIcon icon="plus-small" size={24} />
	</Button>			</Button>
	),			),
	[onClickApps],			[onClickApps],
	);			);

				const activeChatThreadID = useDrawerSelectedThreadID();
				const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID);

	return (			return (
				<>
				<NavStateInfoBar threadInfoInput={threadInfo} />
	<div className={css.container}>			<div className={css.container}>
	<div className={css.tabs}>			<div className={css.tabs}>
	<AppSwitcher />			<AppSwitcher />
	</div>			</div>
	{appNavigationItem}			{appNavigationItem}
	</div>			</div>
				</>
	);			);
	}			}

	const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);			const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar);

	export default MemoizedTopbar;			export default MemoizedTopbar;