Changeset View
Changeset View
Standalone View
Standalone View
web/sidebar/left-layout-aside.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { useSelector } from '../redux/redux-utils'; | |||||
import AppSwitcher from '../topbar/app-switcher.react'; | |||||
import CommunityPicker from './community-picker.react'; | import CommunityPicker from './community-picker.react'; | ||||
import css from './left-layout-aside.css'; | import css from './left-layout-aside.css'; | ||||
import SettingsSwitcher from './settings-switcher.react'; | |||||
function LeftLayoutAside(): React.Node { | function LeftLayoutAside(): React.Node { | ||||
const navInfo = useSelector(state => state.navInfo); | |||||
const navigationPanel = React.useMemo(() => { | |||||
if (navInfo.tab === 'settings') { | |||||
return <SettingsSwitcher />; | |||||
} | |||||
return <AppSwitcher />; | |||||
}, [navInfo.tab]); | |||||
return ( | return ( | ||||
<aside className={css.container}> | <aside className={css.container}> | ||||
<CommunityPicker /> | <CommunityPicker /> | ||||
{navigationPanel} | |||||
</aside> | </aside> | ||||
); | ); | ||||
} | } | ||||
const MemoizedLeftLayoutAside: React.ComponentType<{}> = React.memo<{}>( | const MemoizedLeftLayoutAside: React.ComponentType<{}> = React.memo<{}>( | ||||
LeftLayoutAside, | LeftLayoutAside, | ||||
); | ); | ||||
export default MemoizedLeftLayoutAside; | export default MemoizedLeftLayoutAside; |