From 9f5242e95ce41d414f6360d254958bdcb348c584 Mon Sep 17 00:00:00 2001
From: SKairinos <skairinos@gmail.com>
Date: Thu, 22 Jun 2023 10:50:24 +0100
Subject: [PATCH] fix: add dialogs to app

---
 src/components/App.tsx | 55 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index f5dc63e6..bb18a824 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -14,9 +14,13 @@ import {
 
 import {
   useExternalScript,
-  useFreshworksWidget
+  useFreshworksWidget,
+  useCountdown
 } from '../hooks';
-
+import {
+  InactiveDialog,
+  ScreenTimeDialog
+} from '../features';
 import '../scripts';
 
 export interface AppProps<
@@ -28,6 +32,8 @@ export interface AppProps<
   header?: React.ReactElement;
   footer?: React.ReactElement;
   children: React.ReactNode;
+  maxIdleSeconds?: number;
+  maxTotalSeconds?: number;
 }
 
 const App = <
@@ -38,8 +44,39 @@ const App = <
   store,
   header,
   footer,
-  children
+  children,
+  maxIdleSeconds = 60 * 60,
+  maxTotalSeconds = 60 * 60
 }: AppProps<A, S>): JSX.Element => {
+  // TODO: dynamically check if user is authenticated.
+  const isAuthenticated = true;
+  const [idleSeconds, setIdleSeconds] = useCountdown(maxIdleSeconds);
+  const [totalSeconds, setTotalSeconds] = useCountdown(maxTotalSeconds);
+
+  const isIdle = isAuthenticated && idleSeconds === 0;
+  const tooMuchScreenTime = totalSeconds === 0;
+
+  function resetIdleSeconds(): void { setIdleSeconds(maxIdleSeconds); }
+  function resetTotalSeconds(): void { setTotalSeconds(maxTotalSeconds); }
+
+  React.useEffect(() => {
+    if (isAuthenticated) resetIdleSeconds();
+  }, [isAuthenticated]);
+
+  React.useEffect(() => {
+    useFreshworksWidget('hide');
+
+    const root = document.getElementById('root') as HTMLElement;
+
+    root.addEventListener('mousemove', resetIdleSeconds);
+    root.addEventListener('keypress', resetIdleSeconds);
+
+    return () => {
+      root.removeEventListener('mousemove', resetIdleSeconds);
+      root.removeEventListener('keypress', resetIdleSeconds);
+    };
+  }, []);
+
   if (process.env.NODE_ENV !== 'development') {
     const oneTrustEventTypes = [
       useExternalScript({
@@ -66,10 +103,6 @@ const App = <
     }
   }
 
-  React.useEffect(() => {
-    useFreshworksWidget('hide');
-  }, []);
-
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
@@ -98,6 +131,14 @@ const App = <
         }   
       `}</style>
       <Provider store={store}>
+        <InactiveDialog
+          open={isIdle}
+          onClose={resetIdleSeconds}
+        />
+        <ScreenTimeDialog
+          open={!isIdle && tooMuchScreenTime}
+          onClose={resetTotalSeconds}
+        />
         {header !== undefined &&
           React.cloneElement(header, { id: 'header' })
         }