From c7d39a3e940c47337860d351b4e9d83028da0d66 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 9 Aug 2024 14:13:34 -0700
Subject: [PATCH] Fixed session properties.

---
 .../sessions/[sessionId]/SessionData.tsx            | 13 +++++--------
 .../sessions/[sessionId]/SessionDetailsPage.tsx     | 12 ++++--------
 src/components/common/LoadingPanel.module.css       |  1 +
 src/components/common/LoadingPanel.tsx              |  2 +-
 src/components/hooks/queries/useSessionData.ts      |  2 +-
 5 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
index 7e583f18..6b18cb57 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionData.tsx
@@ -1,19 +1,16 @@
-import { Loading, TextOverflow } from 'react-basics';
+import { TextOverflow } from 'react-basics';
 import { useMessages, useSessionData } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import { DATA_TYPES } from 'lib/constants';
 import styles from './SessionData.module.css';
+import { LoadingPanel } from 'components/common/LoadingPanel';
 
 export function SessionData({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading } = useSessionData(websiteId, sessionId);
-
-  if (isLoading) {
-    return <Loading icon="dots" size="sm" />;
-  }
+  const { data, ...query } = useSessionData(websiteId, sessionId);
 
   return (
-    <div className={styles.data}>
+    <LoadingPanel className={styles.data} {...query} data={data}>
       <div className={styles.header}>{formatMessage(labels.properties)}</div>
       {!data?.length && <Empty className={styles.empty} />}
       {data?.map(({ dataKey, dataType, stringValue }) => {
@@ -29,6 +26,6 @@ export function SessionData({ websiteId, sessionId }: { websiteId: string; sessi
           </div>
         );
       })}
-    </div>
+    </LoadingPanel>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index 059e041f..fa96c776 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -2,12 +2,12 @@
 import WebsiteHeader from '../../WebsiteHeader';
 import SessionInfo from './SessionInfo';
 import { useWebsiteSession } from 'components/hooks';
-import { Loading } from 'react-basics';
 import Avatar from 'components/common/Avatar';
 import { SessionActivity } from './SessionActivity';
 import { SessionStats } from './SessionStats';
 import { SessionData } from './SessionData';
 import styles from './SessionDetailsPage.module.css';
+import { LoadingPanel } from 'components/common/LoadingPanel';
 
 export default function SessionDetailsPage({
   websiteId,
@@ -16,14 +16,10 @@ export default function SessionDetailsPage({
   websiteId: string;
   sessionId: string;
 }) {
-  const { data, isLoading } = useWebsiteSession(websiteId, sessionId);
-
-  if (isLoading) {
-    return <Loading position="page" />;
-  }
+  const { data, ...query } = useWebsiteSession(websiteId, sessionId);
 
   return (
-    <>
+    <LoadingPanel {...query} loadingIcon="spinner" data={data}>
       <WebsiteHeader websiteId={websiteId} />
       <div className={styles.page}>
         <div className={styles.sidebar}>
@@ -38,6 +34,6 @@ export default function SessionDetailsPage({
           <SessionData websiteId={websiteId} sessionId={sessionId} />
         </div>
       </div>
-    </>
+    </LoadingPanel>
   );
 }
diff --git a/src/components/common/LoadingPanel.module.css b/src/components/common/LoadingPanel.module.css
index d82e27d6..2dc8b75e 100644
--- a/src/components/common/LoadingPanel.module.css
+++ b/src/components/common/LoadingPanel.module.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  flex: 1;
 }
diff --git a/src/components/common/LoadingPanel.tsx b/src/components/common/LoadingPanel.tsx
index 890e8e39..dc18ca50 100644
--- a/src/components/common/LoadingPanel.tsx
+++ b/src/components/common/LoadingPanel.tsx
@@ -23,7 +23,7 @@ export function LoadingPanel({
   className?: string;
   children: ReactNode;
 }) {
-  const isEmpty = !data?.length && !isLoading && isFetched;
+  const isEmpty = !isLoading && isFetched && data && Array.isArray(data) && data.length > 0;
 
   return (
     <div className={classNames(styles.panel, className)}>
diff --git a/src/components/hooks/queries/useSessionData.ts b/src/components/hooks/queries/useSessionData.ts
index f2e8f524..14e046d1 100644
--- a/src/components/hooks/queries/useSessionData.ts
+++ b/src/components/hooks/queries/useSessionData.ts
@@ -6,7 +6,7 @@ export function useSessionData(websiteId: string, sessionId: string) {
   return useQuery({
     queryKey: ['session:data', { websiteId, sessionId }],
     queryFn: () => {
-      return get(`/sessions/${sessionId}/data`, { websiteId });
+      return get(`/websites/${websiteId}/sessions/${sessionId}/properties`, { websiteId });
     },
   });
 }