54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import { connect } from 'react-redux'
|
|
import SessionItem from 'Shared/SessionItem'
|
|
import { fetchSessions, fetchSessionsFiltered } from 'Duck/funnels'
|
|
import { LoadMoreButton, NoContent, Loader } from 'UI'
|
|
import FunnelSessionsHeader from '../FunnelSessionsHeader'
|
|
|
|
const PER_PAGE = 10;
|
|
|
|
function FunnelSessionList(props) {
|
|
const { list, sessionsTotal, sessionsSort, inDetails = false } = props;
|
|
|
|
const [showPages, setShowPages] = useState(1)
|
|
const displayedCount = Math.min(showPages * PER_PAGE, list.size);
|
|
|
|
const addPage = () => setShowPages(showPages + 1);
|
|
|
|
return (
|
|
<div>
|
|
<FunnelSessionsHeader sessionsCount={inDetails ? sessionsTotal : list.size} inDetails={inDetails} />
|
|
<div className="mb-4" />
|
|
<NoContent
|
|
title="No Sessions Found!"
|
|
subtext="Please try changing your search parameters."
|
|
icon="exclamation-circle"
|
|
show={ list.size === 0}
|
|
>
|
|
{ list.take(displayedCount).map(session => (
|
|
<SessionItem
|
|
key={ session.sessionId }
|
|
session={ session }
|
|
/>
|
|
))}
|
|
|
|
<LoadMoreButton
|
|
className="mt-12 mb-12"
|
|
displayedCount={displayedCount}
|
|
totalCount={list.size}
|
|
onClick={addPage}
|
|
/>
|
|
</NoContent>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(state => ({
|
|
list: state.getIn(['funnels', 'sessions']),
|
|
sessionsTotal: state.getIn(['funnels', 'sessionsTotal']),
|
|
funnel: state.getIn(['funnels', 'instance']),
|
|
activeStages: state.getIn(['funnels', 'activeStages']).toJS(),
|
|
liveFilters: state.getIn(['funnelFilters', 'appliedFilter']),
|
|
funnelFilters: state.getIn(['funnels', 'funnelFilters']),
|
|
sessionsSort: state.getIn(['funnels', 'sessionsSort']),
|
|
}), { fetchSessions, fetchSessionsFiltered })(FunnelSessionList)
|