From 2a1242ef7df0a4678d4200db7d21116c42f6ef12 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 17 Oct 2022 16:11:37 +0200
Subject: [PATCH] fix(ui) - session list update on tab back to active

---
 .../components/SessionList/SessionList.tsx    | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
index d3c678c76..f585c155c 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { FilterKey } from 'Types/filter/filterType';
 import SessionItem from 'Shared/SessionItem';
@@ -11,6 +11,7 @@ import { fetchListActive as fetchMetadata } from 'Duck/customField';
 
 const AUTOREFRESH_INTERVAL = 5 * 60 * 1000;
 const PER_PAGE = 10;
+let sessionTimeOut: any = null;
 interface Props {
     loading: boolean;
     list: any;
@@ -53,10 +54,11 @@ function SessionList(props: Props) {
     }, [isBookmark, isVault, activeTab]);
 
     useTimeout(() => {
-        props.fetchSessions(null, true);
+        if (!document.hidden) {
+            props.fetchSessions(null, true);
+        }
     }, AUTOREFRESH_INTERVAL);
 
-
     useEffect(() => {
         // handle scroll position
         const { scrollY } = props;
@@ -71,6 +73,26 @@ function SessionList(props: Props) {
         };
     }, []);
 
+    const refreshOnActive = () => {
+        if (document.hidden && !!sessionTimeOut) {
+            clearTimeout(sessionTimeOut);
+            return;
+        }
+       
+        sessionTimeOut = setTimeout(function() {
+            if (!document.hidden) {
+                props.fetchSessions(null, true);
+            }
+        }, 5000)
+    }
+
+    useEffect(() => {
+        document.addEventListener("visibilitychange", refreshOnActive);
+        return () => {
+            document.removeEventListener("visibilitychange", refreshOnActive);
+        }
+    }, [])
+
     const onUserClick = (userId: any) => {
         if (userId) {
             props.addFilterByKeyAndValue(FilterKey.USERID, userId);