From 064ac980e85680c2d3ee6a9c6c16d2dd65d9ccb8 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 9 Sep 2021 21:34:56 +0530
Subject: [PATCH] fix(ui) - session timeout

---
 frontend/app/components/BugFinder/BugFinder.js | 13 -------------
 .../LiveSessionList/LiveSessionList.tsx        | 15 +++++++++++++++
 .../BugFinder/SessionList/SessionList.js       | 18 +++++++++++++++++-
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/BugFinder/BugFinder.js b/frontend/app/components/BugFinder/BugFinder.js
index 6042a4a8c..bac9ea8e6 100644
--- a/frontend/app/components/BugFinder/BugFinder.js
+++ b/frontend/app/components/BugFinder/BugFinder.js
@@ -28,8 +28,6 @@ import NoSessionsMessage from '../shared/NoSessionsMessage';
 import TrackerUpdateMessage from '../shared/TrackerUpdateMessage';
 import LiveSessionList from './LiveSessionList'
 
-const AUTOREFRESH_INTERVAL = 1 * 60 * 1000;
-
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;
   if (!val1 !== !val2) return false;
@@ -38,7 +36,6 @@ const weakEqual = (val1, val2) => {
 
 @withLocationHandlers()
 @connect(state => ({
-  shouldAutorefresh: state.getIn([ 'filters', 'appliedFilter', 'events' ]).size === 0,
   filter: state.getIn([ 'filters', 'appliedFilter' ]),
   showLive: state.getIn([ 'user', 'account', 'appearance', 'sessionsLive' ]),
   variables: state.getIn([ 'customFields', 'list' ]), 
@@ -94,12 +91,6 @@ export default class BugFinder extends React.PureComponent {
     this.props.resetFunnel();
     this.props.resetFunnelFilters();
 
-    this.autorefreshIntervalId = setInterval(() => {
-      if (this.props.shouldAutorefresh) {
-        props.applyFilter();        
-      }
-    }, AUTOREFRESH_INTERVAL);
-
     props.fetchFunnelsList(LAST_7_DAYS)
   }
 
@@ -130,10 +121,6 @@ export default class BugFinder extends React.PureComponent {
     }.bind(this));
   }
 
-  componentWillUnmount() {
-    clearInterval(this.autorefreshIntervalId);
-  }
-
   setActiveTab = tab => {
     this.props.setActiveTab(tab);
   }
diff --git a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
index 1554ed8dc..0fc99b3ac 100644
--- a/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/BugFinder/LiveSessionList/LiveSessionList.tsx
@@ -5,20 +5,35 @@ import { NoContent, Loader } from 'UI';
 import { List, Map } from 'immutable';
 import SessionItem from 'Shared/SessionItem';
 
+const AUTOREFRESH_INTERVAL = 1 * 60 * 1000
+
 interface Props {
   loading: Boolean,
   list?: List<any>,  
   fetchList: (params) => void,
+  applyFilter: () => void,
   filters: List<any>
 }
 
 function LiveSessionList(props: Props) {
   const { loading, list, filters } = props;  
+  var timeoutId;
 
   useEffect(() => {     
     props.fetchList(filters.toJS());
+    timeout();
+    return () => {
+      clearTimeout(timeoutId)
+    }
   }, [])
 
+  const timeout = () => {
+    timeoutId = setTimeout(() => {
+      props.fetchList(filters.toJS());
+      timeout();
+    }, AUTOREFRESH_INTERVAL);
+  }
+
   return (
     <div>
       <NoContent
diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js
index 41375a6af..0aa4b9afb 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@@ -4,12 +4,14 @@ import { applyFilter, addAttribute, addEvent } from 'Duck/filters';
 import SessionItem from 'Shared/SessionItem';
 import SessionListHeader from './SessionListHeader';
 import { KEYS } from 'Types/filter/customFilter';
-import styles from './sessionList.css';
 
 const ALL = 'all';
 const PER_PAGE = 10;
+const AUTOREFRESH_INTERVAL = 3 * 60 * 1000;
+var timeoutId;
 
 @connect(state => ({
+  shouldAutorefresh: state.getIn([ 'filters', 'appliedFilter', 'events' ]).size === 0,
   savedFilters: state.getIn([ 'filters', 'list' ]),
   loading: state.getIn([ 'sessions', 'loading' ]),
   activeTab: state.getIn([ 'sessions', 'activeTab' ]),
@@ -27,6 +29,7 @@ export default class SessionList extends React.PureComponent {
   }
   constructor(props) {
     super(props);
+    this.timeout();
   }
 
   componentDidUpdate(prevProps) {
@@ -47,6 +50,15 @@ export default class SessionList extends React.PureComponent {
     this.props.applyFilter()
   }
 
+  timeout = () => {
+    timeoutId = setTimeout(function () {
+      if (this.props.shouldAutorefresh) {
+        this.props.applyFilter();
+      }
+      this.timeout();
+    }.bind(this), AUTOREFRESH_INTERVAL);
+  }
+
   getNoContentMessage = activeTab => {
     let str = "No recordings found";
     if (activeTab.type !== 'all') {
@@ -57,6 +69,10 @@ export default class SessionList extends React.PureComponent {
     return str + '!';
   }
 
+  componentWillUnmount() {
+    clearTimeout(timeoutId)
+  }
+
   renderActiveTabContent(list) {
     const {
       loading,