64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { applyFilter } from 'Duck/funnels';
|
|
import SortDropdown from './Filters/SortDropdown';
|
|
import DateRange from 'Shared/DateRange';
|
|
import { TimezoneDropdown } from 'UI';
|
|
import { numberWithCommas } from 'App/utils';
|
|
|
|
const DEFAULT_SORT = 'startTs';
|
|
const DEFAULT_ORDER = 'desc';
|
|
const sortOptionsMap = {
|
|
'startTs-desc': 'Newest',
|
|
'startTs-asc': 'Oldest',
|
|
'eventsCount-asc': 'Events Ascending',
|
|
'eventsCount-desc': 'Events Descending',
|
|
};
|
|
const sortOptions = Object.entries(sortOptionsMap)
|
|
.map(([ value, text ]) => ({ value, text }));
|
|
|
|
|
|
function FunnelListHeader(props) {
|
|
const { activeTab, count, applyFilter, funnelFilters } = props;
|
|
|
|
useEffect(() => { applyFilter({ sort: DEFAULT_SORT, order: DEFAULT_ORDER }) }, [])
|
|
|
|
const onDateChange = (e) => {
|
|
applyFilter(e)
|
|
}
|
|
|
|
return (
|
|
<div className="flex mb-6 justify-between items-end">
|
|
<div className="flex items-baseline">
|
|
<h3 className="text-2xl capitalize">
|
|
<span>{ activeTab.name }</span>
|
|
{ count ? <span className="ml-2 font-normal color-gray-medium">{ numberWithCommas(count) }</span> : '' }
|
|
</h3>
|
|
<div className="ml-3 flex items-center">
|
|
<span className="mr-2 color-gray-medium">Sessions Captured in</span>
|
|
<DateRange
|
|
rangeValue={funnelFilters.rangeValue}
|
|
startDate={funnelFilters.startDate}
|
|
endDate={funnelFilters.endDate}
|
|
onDateChange={onDateChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="flex items-center">
|
|
<span className="mr-2 color-gray-medium">Timezone</span>
|
|
<TimezoneDropdown />
|
|
</div>
|
|
<div className="flex items-center ml-6">
|
|
<span className="mr-2 color-gray-medium">Sort By</span>
|
|
<SortDropdown options={ sortOptions }/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default connect(state => ({
|
|
activeTab: state.getIn([ 'sessions', 'activeTab' ]),
|
|
funnelFilters: state.getIn([ 'funnels', 'funnelFilters']),
|
|
}), { applyFilter })(FunnelListHeader);
|