90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { SideMenuitem } from 'UI';
|
|
import { connect } from 'react-redux';
|
|
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
|
import { sessions, fflags, withSiteId, notes, bookmarks } from 'App/routes';
|
|
import { useStore } from 'App/mstore';
|
|
|
|
interface Props {
|
|
activeTab: string;
|
|
isEnterprise: boolean;
|
|
}
|
|
|
|
const TabToUrlMap = {
|
|
all: sessions() as '/sessions',
|
|
bookmark: bookmarks() as '/bookmarks',
|
|
notes: notes() as '/notes',
|
|
flags: fflags() as '/feature-flags'
|
|
};
|
|
|
|
function OverviewMenu(props: Props & RouteComponentProps) {
|
|
// @ts-ignore
|
|
const { activeTab, isEnterprise, history, match: { params: { siteId } }, location } = props;
|
|
const { searchStore } = useStore();
|
|
|
|
React.useEffect(() => {
|
|
const currentLocation = location.pathname;
|
|
const tab = Object.keys(TabToUrlMap).find((tab: keyof typeof TabToUrlMap) => currentLocation.includes(TabToUrlMap[tab]));
|
|
if (tab && tab !== activeTab) {
|
|
searchStore.setActiveTab({ type: tab });
|
|
}
|
|
}, [location.pathname]);
|
|
|
|
return (
|
|
<div className={'flex flex-col gap-2 w-full'}>
|
|
<div className='w-full'>
|
|
<SideMenuitem
|
|
active={activeTab === 'all'}
|
|
id='menu-sessions'
|
|
title='Sessions'
|
|
iconName='play-circle-bold'
|
|
onClick={() => {
|
|
searchStore.setActiveTab({ type: 'all' });
|
|
!location.pathname.includes(sessions()) && history.push(withSiteId(sessions(), siteId));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='w-full'>
|
|
<SideMenuitem
|
|
active={activeTab === 'bookmark'}
|
|
id='menu-bookmarks'
|
|
title={`${isEnterprise ? 'Vault' : 'Bookmarks'}`}
|
|
iconName={isEnterprise ? 'safe' : 'star'}
|
|
onClick={() => {
|
|
// props.setActiveTab({ type: 'bookmark' });
|
|
!location.pathname.includes(bookmarks()) && history.push(withSiteId(bookmarks(), siteId));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='w-full'>
|
|
<SideMenuitem
|
|
active={activeTab === 'notes'}
|
|
id='menu-notes'
|
|
title='Notes'
|
|
iconName='stickies'
|
|
onClick={() => {
|
|
searchStore.setActiveTab({ type: 'notes' });
|
|
!location.pathname.includes(notes()) && history.push(withSiteId(notes(), siteId));
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='w-full'>
|
|
<SideMenuitem
|
|
active={activeTab === 'flags'}
|
|
id='menu-flags'
|
|
title='Feature Flags'
|
|
iconName='toggles'
|
|
onClick={() => {
|
|
searchStore.setActiveTab({ type: 'flags' });
|
|
!location.pathname.includes(fflags()) && history.push(withSiteId(fflags(), siteId));
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default connect((state: any) => ({
|
|
activeTab: state.getIn(['search', 'activeTab', 'type']),
|
|
isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
|
|
}), )(withRouter(OverviewMenu));
|