From b005d4dd314415c49cbafba8c32d92fff23bd35a Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 28 Jun 2022 19:42:38 +0200
Subject: [PATCH] change(ui) - show a message when mob file not found

---
 frontend/app/components/Session/WebPlayer.js | 158 ++++++++++---------
 frontend/app/date.ts                         |   6 +
 2 files changed, 93 insertions(+), 71 deletions(-)

diff --git a/frontend/app/components/Session/WebPlayer.js b/frontend/app/components/Session/WebPlayer.js
index f1bcd2ddb..c7700dbdf 100644
--- a/frontend/app/components/Session/WebPlayer.js
+++ b/frontend/app/components/Session/WebPlayer.js
@@ -3,93 +3,109 @@ import { connect } from 'react-redux';
 import { Loader } from 'UI';
 import { toggleFullscreen, closeBottomBlock } from 'Duck/components/player';
 import { fetchList } from 'Duck/integrations';
-import {
-  PlayerProvider,
-  connectPlayer,
-  init as initPlayer,
-  clean as cleanPlayer,
-  Controls,
-  toggleEvents,
-} from 'Player';
-import cn from 'classnames'
-import RightBlock from './RightBlock'
-import withLocationHandlers from "HOCs/withLocationHandlers";
+import { PlayerProvider, connectPlayer, init as initPlayer, clean as cleanPlayer, Controls } from 'Player';
+import cn from 'classnames';
+import RightBlock from './RightBlock';
+import withLocationHandlers from 'HOCs/withLocationHandlers';
 
 import PlayerBlockHeader from '../Session_/PlayerBlockHeader';
 import PlayerBlock from '../Session_/PlayerBlock';
 import styles from '../Session_/session.module.css';
+import { countDaysFrom } from 'App/date';
 
-const InitLoader = connectPlayer(state => ({
-  loading: !state.initialized
+const TABS = {
+    EVENTS: 'Events',
+    HEATMAPS: 'Click Map',
+};
+
+const InitLoader = connectPlayer((state) => ({
+    loading: !state.initialized,
 }))(Loader);
 
-const PlayerContentConnected = connectPlayer(state => ({
-  showEvents: !state.showEvents,
+const PlayerContentConnected = connectPlayer((state) => ({
+    showEvents: !state.showEvents,
+    hasError: state.error,
 }))(PlayerContent);
 
-
-function PlayerContent({ live, fullscreen, activeTab }) {
-  return (
-    <div className={ cn(styles.session, 'relative') } data-fullscreen={fullscreen}>
-      <PlayerBlock activeTab={activeTab} />
-    </div>
-  )
+function PlayerContent({ session, live, fullscreen, activeTab, setActiveTab, hasError }) {
+    const sessionDays = countDaysFrom(session.startedAt);
+    return (
+        <div className="relative">
+            {hasError ? (
+                <div className="inset-0 flex items-center justify-center absolute" style={{
+                    // background: '#f6f6f6',
+                    height: 'calc(100vh - 50px)',
+                    zIndex: '999',
+                }}>
+                    <div className="flex flex-col items-center">
+                        <div className="text-lg -mt-8">{sessionDays > 2 ? 'Session not found.' : 'This session is still being processed.'}</div>
+                        <div className="text-sm">{sessionDays > 2 ? 'Please check your data retention policy.' : 'Please check it again in a few minutes.'}</div>
+                    </div>
+                </div>
+            ) : (
+                <div className={cn('flex', { 'pointer-events-none': hasError })}>
+                    <div className="w-full">
+                        <div className={cn(styles.session, 'relative')} data-fullscreen={fullscreen}>
+                            <PlayerBlock activeTab={activeTab} />
+                        </div>
+                    </div>
+                    {activeTab !== '' && <RightMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
+                </div>
+            )}
+        </div>
+    );
 }
 
 function RightMenu({ live, tabs, activeTab, setActiveTab, fullscreen }) {
-  return  !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />
+    return !live && !fullscreen && <RightBlock tabs={tabs} setActiveTab={setActiveTab} activeTab={activeTab} />;
 }
 
-function WebPlayer (props) {
-  const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
+function WebPlayer(props) {
+    const { session, toggleFullscreen, closeBottomBlock, live, fullscreen, jwt, fetchList } = props;
 
-  const TABS = {
-    EVENTS: 'Events',
-    HEATMAPS: 'Click Map',
-  }
+    const [activeTab, setActiveTab] = useState('');
 
-  const [activeTab, setActiveTab] = useState('');
+    useEffect(() => {
+        fetchList('issues');
+        initPlayer(session, jwt);
 
-  useEffect(() => {
-    fetchList('issues')
-    initPlayer(session, jwt);
+        const jumptTime = props.query.get('jumpto');
+        if (jumptTime) {
+            Controls.jump(parseInt(jumptTime));
+        }
 
-    const jumptTime = props.query.get('jumpto');
-    if (jumptTime) {
-      Controls.jump(parseInt(jumptTime));
+        return () => cleanPlayer();
+    }, [session.sessionId]);
+
+    // LAYOUT (TODO: local layout state - useContext or something..)
+    useEffect(
+        () => () => {
+            toggleFullscreen(false);
+            closeBottomBlock();
+        },
+        []
+    );
+
+    return (
+        <PlayerProvider>
+            <InitLoader className="flex-1">
+                <PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen} />
+                <PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} setActiveTab={setActiveTab} session={session} />
+            </InitLoader>
+        </PlayerProvider>
+    );
+}
+
+export default connect(
+    (state) => ({
+        session: state.getIn(['sessions', 'current']),
+        jwt: state.get('jwt'),
+        fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+        showEvents: state.get('showEvents'),
+    }),
+    {
+        toggleFullscreen,
+        closeBottomBlock,
+        fetchList,
     }
-
-    return () => cleanPlayer()
-  }, [ session.sessionId ]);
-
-  // LAYOUT (TODO: local layout state - useContext or something..)
-  useEffect(() => () => {
-    toggleFullscreen(false);
-
-    closeBottomBlock();
-  }, [])
-
-  return (
-    <PlayerProvider>
-      <InitLoader className="flex-1">
-          <PlayerBlockHeader activeTab={activeTab} setActiveTab={setActiveTab} tabs={TABS} fullscreen={fullscreen}/>
-            <div className="flex">
-              <div className="w-full"><PlayerContentConnected activeTab={activeTab} fullscreen={fullscreen} live={live} /></div>
-              {activeTab !== '' && <RightMenu activeTab={activeTab} setActiveTab={setActiveTab} fullscreen={fullscreen} tabs={TABS} live={live} />}
-            </div>
-      </InitLoader>
-    </PlayerProvider>
-  );
-}
-
-export default connect(state => ({
-  session: state.getIn([ 'sessions', 'current' ]),
-  jwt: state.get('jwt'),
-  // config: state.getIn([ 'user', 'account', 'iceServers' ]),
-  fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-  showEvents: state.get('showEvents'),
-}), {
-  toggleFullscreen,
-  closeBottomBlock,
-  fetchList,
-})(withLocationHandlers()(WebPlayer));
+)(withLocationHandlers()(WebPlayer));
diff --git a/frontend/app/date.ts b/frontend/app/date.ts
index dd87f1783..e043f33fd 100644
--- a/frontend/app/date.ts
+++ b/frontend/app/date.ts
@@ -128,3 +128,9 @@ export const convertTimestampToUtcTimestamp = (timestamp: number): number => {
 export const nowFormatted = (format?: string): string => {
   return DateTime.local().toFormat(format || 'LLL dd, yyyy, hh:mm a');
 }
+
+export const countDaysFrom = (timestamp: number): number => {
+  const date = DateTime.fromMillis(timestamp);
+  const d = new Date();
+  return Math.round(Math.abs(d.getTime() - date.toJSDate().getTime()) / (1000 * 3600 * 24));
+}
\ No newline at end of file