From 7ac0aa0b987b18b0ed85dd9a85416fc3190f8274 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 30 Jan 2023 16:28:28 +0100
Subject: [PATCH] fix(ui): destroy current session after clickmap, fix go live
 button

---
 .../ClickMapCard/ClickMapCard.tsx                 |  8 ++++++--
 frontend/app/duck/sessions.ts                     | 15 +++++++++++++++
 frontend/app/player/web/WebLivePlayer.ts          |  4 ++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
index 4c2f2935a..e25fd7f1b 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx
@@ -3,7 +3,7 @@ import { useStore } from 'App/mstore'
 import { observer } from 'mobx-react-lite'
 import ClickMapRenderer from 'App/components/Session/Player/ClickMapRenderer'
 import { connect } from 'react-redux'
-import { setCustomSession } from 'App/duck/sessions'
+import { setCustomSession, clearCurrentSession } from 'App/duck/sessions'
 import { fetchInsights } from 'Duck/sessions';
 import { NoContent, Icon } from 'App/components/ui'
 
@@ -14,12 +14,16 @@ function ClickMapCard({
     fetchInsights,
     insightsFilters,
     host,
+    clearCurrentSession,
 }: any) {
     const { metricStore, dashboardStore } = useStore();
     const onMarkerClick = (s: string, innerText: string) => {
         metricStore.changeClickMapSearch(s, innerText)
     }
 
+    React.useEffect(() => {
+        return () => clearCurrentSession()
+    }, [])
     React.useEffect(() => {
         if (metricStore.instance.data.domURL) {
             setCustomSession(metricStore.instance.data)
@@ -81,6 +85,6 @@ export default connect(
         insights: state.getIn(['sessions', 'insights']),
         host: state.getIn(['sessions', 'host']),
     }),
-    { setCustomSession, fetchInsights }
+    { setCustomSession, fetchInsights, clearCurrentSession }
 )
 (observer(ClickMapCard))
diff --git a/frontend/app/duck/sessions.ts b/frontend/app/duck/sessions.ts
index fe9a75e55..b87afaaa4 100644
--- a/frontend/app/duck/sessions.ts
+++ b/frontend/app/duck/sessions.ts
@@ -38,6 +38,8 @@ const SET_SESSION_PATH = 'sessions/SET_SESSION_PATH';
 const LAST_PLAYED_SESSION_ID = `${name}/LAST_PLAYED_SESSION_ID`;
 const SET_ACTIVE_TAB = 'sessions/SET_ACTIVE_TAB';
 
+const CLEAR_CURRENT_SESSION = 'sessions/CLEAR_CURRENT_SESSION'
+
 const range = getDateRangeFromValue(LAST_7_DAYS);
 const defaultDateFilters = {
     url: '',
@@ -123,6 +125,12 @@ const reducer = (state = initialState, action: IAction) => {
 
             return state.set('filteredEvents', filteredEvents).set('eventsQuery', query);
         }
+        case CLEAR_CURRENT_SESSION: {
+            return state.set('current', new Session())
+              .set('eventsIndex', [])
+              .set('visitedEvents', List())
+              .set('host', '');
+        }
         case FETCH.SUCCESS: {
             // TODO: more common.. or TEMP filters', 'appliedFilter
             const events = action.filter.events;
@@ -312,6 +320,13 @@ export const fetch =
             filter: getState().getIn(['filters', 'appliedFilter']),
         });
     };
+
+export function clearCurrentSession() {
+    return {
+        type: CLEAR_CURRENT_SESSION
+    }
+}
+
 export const setCustomSession = (session, filter) =>
     (dispatch, getState) => { dispatch({
     type: FETCH.SUCCESS,
diff --git a/frontend/app/player/web/WebLivePlayer.ts b/frontend/app/player/web/WebLivePlayer.ts
index 80c509a86..ae512df43 100644
--- a/frontend/app/player/web/WebLivePlayer.ts
+++ b/frontend/app/player/web/WebLivePlayer.ts
@@ -77,6 +77,10 @@ export default class WebLivePlayer extends WebPlayer {
   }
 
   jumpToLive = () => {
+    this.wpState.update({
+      live: true,
+      livePlay: true,
+    })
     this.jump(this.wpState.get().lastMessageTime)
   }