Differential D6733 Diff 23277 web/navigation-panels/topbar.react.js

Changeset View

Standalone View

	// @flow			// @flow

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

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

	import AppSwitcher from './app-switcher.react.js';			import AppSwitcher from './app-switcher.react.js';
	import css from './topbar.css';			import css from './topbar.css';
				import Button from '../components/button.react.js';
				import { updateNavInfoActionType } from '../redux/action-types.js';

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

				const onClickApps = React.useCallback(() => {
				dispatch({
				type: updateNavInfoActionType,
				payload: {
				tab: 'apps',
				},
				});
				}, [dispatch]);

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

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

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

	export default MemoizedTopbar;			export default MemoizedTopbar;