fix(ui): fix current session clearing

frontend/app/components/Session/Session.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import usePageTitle from 'App/hooks/usePageTitle';
-import { fetchV2 } from "Duck/sessions";
+import { fetchV2, clearCurrentSession } from "Duck/sessions";
 import { fetchList as fetchSlackList } from 'Duck/integrations/slack';
 import { Link, NoContent, Loader } from 'UI';
 import { sessions as sessionsRoute } from 'App/routes';
@@ -18,6 +18,7 @@ function Session({
 	loading,
 	hasErrors,
 	fetchV2,
+	clearCurrentSession,
  }) {
  	usePageTitle("OpenReplay Session Player");
  	const [ initializing, setInitializing ] = useState(true)
@@ -29,6 +30,9 @@ function Session({
 			console.error("No sessionID in route.")
 		}
 		setInitializing(false)
+		return () => {
+			clearCurrentSession();
+		}
 	},[ sessionId ]);
 
 	useEffect(() => {
@@ -65,4 +69,5 @@ export default withPermissions(['SESSION_REPLAY'], '', true)(connect((state, pro
 	}, {
 	fetchSlackList,
 	fetchV2,
+	clearCurrentSession,
 })(Session));

frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx

@@ -3,18 +3,22 @@ import SessionList from './components/SessionList';
 import SessionHeader from './components/SessionHeader';
 import NotesList from './components/Notes/NoteList';
 import { connect } from 'react-redux';
-import { fetchList as fetchMembers } from 'Duck/member';
 import LatestSessionsMessage from './components/LatestSessionsMessage';
+import { clearCurrentSession } from "Duck/sessions";
 
 function SessionListContainer({
   activeTab,
-  fetchMembers,
   members,
+  clearCurrentSession,
 }: {
   activeTab: string;
   fetchMembers: () => void;
   members: object[];
+  clearCurrentSession: () => void;
 }) {
+  React.useEffect(() => {
+    clearCurrentSession()
+  }, [])
   return (
     <div className="widget-wrapper">
       <SessionHeader />
@@ -32,5 +36,5 @@ export default connect(
     // @ts-ignore
     members: state.getIn(['members', 'list']),
   }),
-  { fetchMembers }
+  { clearCurrentSession }
 )(SessionListContainer);

frontend/app/duck/sessions.ts

@@ -134,7 +134,9 @@ const reducer = (state = initialState, action: IAction) => {
             return state.set('filteredEvents', filteredEvents).set('eventsQuery', query);
         }
         case CLEAR_CURRENT_SESSION: {
-            return state.set('current', new Session())
+            const session = new Session();
+
+            return state.set('current', session)
               .set('eventsIndex', [])
               .set('visitedEvents', List())
               .set('host', '');