From fa0ec301d0ce49f1982219f820ea2b536e56eece Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 15 Jan 2022 12:39:32 -0800
Subject: [PATCH] Added active user count to realtime page.

---
 components/metrics/ActiveUsers.js            | 10 +++++-----
 components/metrics/RealtimeHeader.js         | 11 +++++++++--
 components/metrics/RealtimeHeader.module.css |  6 ++++++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js
index 6dabd3d5..1be5b5c3 100644
--- a/components/metrics/ActiveUsers.js
+++ b/components/metrics/ActiveUsers.js
@@ -7,15 +7,15 @@ import { TOKEN_HEADER } from 'lib/constants';
 import useShareToken from 'hooks/useShareToken';
 import styles from './ActiveUsers.module.css';
 
-export default function ActiveUsers({ websiteId, className }) {
+export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
   const shareToken = useShareToken();
-  const { data } = useFetch(`/api/website/${websiteId}/active`, {
-    interval: 60000,
+  const { data } = useFetch(!value && `/api/website/${websiteId}/active`, {
+    interval,
     headers: { [TOKEN_HEADER]: shareToken?.token },
   });
   const count = useMemo(() => {
-    return data?.[0]?.x || 0;
-  }, [data]);
+    return value || data?.[0]?.x || 0;
+  }, [data, value]);
 
   if (count === 0) {
     return null;
diff --git a/components/metrics/RealtimeHeader.js b/components/metrics/RealtimeHeader.js
index 67687314..36f8dbe9 100644
--- a/components/metrics/RealtimeHeader.js
+++ b/components/metrics/RealtimeHeader.js
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { differenceInMinutes } from 'date-fns';
 import PageHeader from '../layout/PageHeader';
 import DropDown from '../common/DropDown';
 import ActiveUsers from './ActiveUsers';
@@ -19,6 +20,12 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
 
   const { pageviews, sessions, events, countries } = data;
 
+  const count = useMemo(() => {
+    return sessions.filter(
+      ({ created_at }) => differenceInMinutes(new Date(), new Date(created_at)) < 5,
+    ).length;
+  }, [sessions]);
+
   return (
     <>
       <PageHeader>
@@ -26,7 +33,7 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
           <FormattedMessage id="label.realtime" defaultMessage="Realtime" />
         </div>
         <div>
-          <ActiveUsers className={styles.active} websiteId={websiteId} />
+          <ActiveUsers className={styles.active} value={count} />
         </div>
         <DropDown value={websiteId} options={options} onChange={onSelect} />
       </PageHeader>
diff --git a/components/metrics/RealtimeHeader.module.css b/components/metrics/RealtimeHeader.module.css
index 28aabc3e..4b0d7ab4 100644
--- a/components/metrics/RealtimeHeader.module.css
+++ b/components/metrics/RealtimeHeader.module.css
@@ -2,3 +2,9 @@
   display: flex;
   margin-bottom: 10px;
 }
+
+@media only screen and (max-width: 576px) {
+  .active {
+    display: none;
+  }
+}