110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Dropdown, Loader, Icon } from 'UI';
|
|
import DateRange from 'Shared/DateRange';
|
|
import { connect } from 'react-redux';
|
|
import { fetchInsights } from 'Duck/sessions';
|
|
import SelectorsList from './components/SelectorsList/SelectorsList';
|
|
import { markTargets, Controls as Player } from 'Player';
|
|
import Select from 'Shared/Select';
|
|
import SelectDateRange from 'Shared/SelectDateRange';
|
|
import Period from 'Types/app/period';
|
|
|
|
const JUMP_OFFSET = 1000;
|
|
interface Props {
|
|
filters: any
|
|
fetchInsights: (filters: Record<string, any>) => void
|
|
urls: []
|
|
insights: any
|
|
events: Array<any>
|
|
urlOptions: Array<any>
|
|
loading: boolean
|
|
host: string
|
|
setActiveTab: (tab: string) => void
|
|
}
|
|
|
|
function PageInsightsPanel({
|
|
filters, fetchInsights, events = [], insights, urlOptions, host, loading = true, setActiveTab
|
|
}: Props) {
|
|
const [insightsFilters, setInsightsFilters] = useState(filters)
|
|
const defaultValue = (urlOptions && urlOptions[0]) ? urlOptions[0].value : ''
|
|
|
|
const period = new Period({
|
|
start: insightsFilters.startDate,
|
|
end: insightsFilters.endDate,
|
|
rangeName: insightsFilters.rangeValue
|
|
});
|
|
|
|
const onDateChange = (e) => {
|
|
const { startDate, endDate, rangeValue } = e.toJSON();
|
|
setInsightsFilters({ ...insightsFilters, startDate, endDate, rangeValue })
|
|
}
|
|
|
|
useEffect(() => {
|
|
markTargets(insights.toJS());
|
|
return () => {
|
|
markTargets(null)
|
|
}
|
|
}, [insights])
|
|
|
|
useEffect(() => {
|
|
if (urlOptions && urlOptions[0]) {
|
|
const url = insightsFilters.url ? insightsFilters.url : host + urlOptions[0].value;
|
|
Player.pause();
|
|
fetchInsights({ ...insightsFilters, url })
|
|
}
|
|
}, [insightsFilters])
|
|
|
|
const onPageSelect = (e, { name, value }) => {
|
|
const event = events.find(item => item.url === value)
|
|
Player.jump(event.time + JUMP_OFFSET)
|
|
setInsightsFilters({ ...insightsFilters, url: host + value })
|
|
markTargets([])
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 bg-white">
|
|
<div className="pb-3 flex items-center" style={{ maxWidth: '241px', paddingTop: '5px' }}>
|
|
<div className="flex items-center">
|
|
<span className="mr-1 text-xl">Clicks</span>
|
|
<SelectDateRange period={period} onChange={onDateChange} disableCustom />
|
|
</div>
|
|
<div
|
|
onClick={() => { setActiveTab(''); }}
|
|
className="ml-auto flex items-center justify-center bg-white cursor-pointer"
|
|
>
|
|
<Icon name="close" size="18" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-4 flex items-center">
|
|
<div className="mr-2 flex-shrink-0">In Page</div>
|
|
<Select
|
|
isSearchable={true}
|
|
right
|
|
placeholder="change"
|
|
options={ urlOptions }
|
|
name="url"
|
|
defaultValue={defaultValue}
|
|
onChange={ onPageSelect }
|
|
id="change-dropdown"
|
|
className="w-full"
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
<Loader loading={ loading }>
|
|
<SelectorsList />
|
|
</Loader>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(state => {
|
|
const events = state.getIn([ 'sessions', 'visitedEvents' ])
|
|
return {
|
|
filters: state.getIn(['sessions', 'insightFilters']),
|
|
host: state.getIn([ 'sessions', 'host' ]),
|
|
insights: state.getIn([ 'sessions', 'insights' ]),
|
|
events: events,
|
|
urlOptions: events.map(({ url, host }: any) => ({ label: url, value: url, host })),
|
|
loading: state.getIn([ 'sessions', 'fetchInsightsRequest', 'loading' ]),
|
|
}
|
|
}, { fetchInsights })(PageInsightsPanel);
|