diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx index aa35b48f9..a26441955 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx @@ -1,66 +1,90 @@ -import React from 'react'; -import { setActiveTab } from 'Duck/search'; +import React, { memo } from 'react'; +import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; -import { issues_types } from 'Types/session/issue'; +import { setActiveTab } from 'Duck/search'; +import { issues_types, types } from 'Types/session/issue'; import { Icon } from 'UI'; import cn from 'classnames'; -interface Props { - setActiveTab: typeof setActiveTab; - activeTab: any; - tags: any; - total: number; -} -function SessionTags(props: Props) { - const { activeTab, tags, total } = props; - const disable = activeTab.type === 'all' && total === 0; - - return ( -
- {tags && - tags.map((tag: any, index: any) => ( -
- props.setActiveTab(tag)} - label={tag.name} - isActive={activeTab.type === tag.type} - icon={tag.icon} - disabled={disable && tag.type !== 'all'} - /> -
- ))} -
- ); +interface Tag { + name: string; + type: string; + icon: string; } -export default connect( - (state: any) => { - const isEnterprise = state.getIn(['user', 'account', 'edition']) === 'ee'; - return { - activeTab: state.getIn(['search', 'activeTab']), - tags: issues_types.filter((tag: any) => tag.type !== 'mouse_thrashing' && (isEnterprise ? tag.type !== 'bookmark' : tag.type !== 'vault')), - total: state.getIn(['sessions', 'total']) || 0, - }; - }, - { - setActiveTab, - } -)(SessionTags); - -export function TagItem({ isActive, onClick, label, icon = '', disabled = false }: any) { - return ( -
- -
- ); +interface StateProps { + activeTab: { type: string }; + tags: Tag[]; + total: number; } + +interface DispatchProps { + setActiveTab: typeof setActiveTab; +} + +type Props = StateProps & DispatchProps; + +const SessionTags: React.FC = memo(({ activeTab, tags, total, setActiveTab }) => { + const disable = activeTab.type === 'all' && total === 0; + + return ( +
+ {tags.map((tag, index) => ( + setActiveTab(tag)} + label={tag.name} + isActive={activeTab.type === tag.type} + icon={tag.icon} + disabled={disable && tag.type !== 'all'} + /> + ))} +
+ ); +}); + +// Separate the TagItem into its own memoized component. +export const TagItem: React.FC<{ + isActive: boolean; + onClick: () => void; + label: string; + icon?: string; + disabled: boolean; +}> = memo(({ isActive, onClick, label, icon, disabled }) => ( + +)); + +const mapStateToProps = (state: any): StateProps => { + const platform = state.getIn(['site', 'active'])?.platform || ''; + const activeTab = state.getIn(['search', 'activeTab']); + const filteredTags = issues_types.filter(tag => + tag.type !== 'mouse_thrashing' && + (platform === 'web' ? tag.type !== types.TAP_RAGE : tag.type !== types.CLICK_RAGE) + ); + const total = state.getIn(['sessions', 'total']) || 0; + + return { activeTab, tags: filteredTags, total }; +}; + +const mapDispatchToProps = (dispatch: any): DispatchProps => bindActionCreators({ + setActiveTab +}, dispatch); + +export default connect(mapStateToProps, mapDispatchToProps)(SessionTags);