openreplay/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
2023-01-03 12:19:36 +01:00

31 lines
1.1 KiB
TypeScript

import React from 'react'
import { useStore } from 'App/mstore'
import { observer } from 'mobx-react-lite'
import WebPlayer from 'App/components/Session/WebPlayer'
import { connect } from 'react-redux'
import { setCustomSession } from 'App/duck/sessions'
// TODO session type ???
function ClickMapCard({ setCustomSession, visitedEvents }: any) {
const { metricStore } = useStore()
React.useEffect(() => {
if (metricStore.instance.data.mobsUrl) {
setCustomSession(metricStore.instance.data)
}
}, [metricStore.instance.data.mobsUrl])
if (!metricStore.instance.data.mobsUrl) return <div className="p-4">looking for session</div>
console.log(visitedEvents, metricStore.instance.data.events)
if (!visitedEvents || !visitedEvents.length) {
return <div className="p-4">loading</div>
}
return (
<div>
<WebPlayer isClickmap customSession={metricStore.instance.data}/>
</div>
)
}
export default connect((state: any) => ({ visitedEvents: state.getIn(['sessions', 'visitedEvents']) }), {setCustomSession})(
observer(ClickMapCard)
)