From 1fcb610bdda9c96ea27c8a21a5d1636930a0971e Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 10 Oct 2020 22:36:55 -0700
Subject: [PATCH] Updated fetch hook.

---
 components/metrics/RealtimeLog.js         | 14 +++++++++--
 components/metrics/RealtimeLog.module.css |  5 +---
 components/pages/RealtimeDashboard.js     | 29 +++++++++++++----------
 hooks/useFetch.js                         | 25 ++++++++++++-------
 lib/constants.js                          |  2 ++
 redux/actions/app.js                      | 12 +++++++---
 6 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
index 7bb37e08..6e205e16 100644
--- a/components/metrics/RealtimeLog.js
+++ b/components/metrics/RealtimeLog.js
@@ -94,14 +94,24 @@ export default function RealtimeLog({ data, websites }) {
     }
   }
 
+  function getTime({ created_at }) {
+    return format(new Date(created_at), 'h:mm:ss');
+  }
+
+  function getColor(row) {
+    const { session_id } = row;
+
+    return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
+  }
+
   const Row = ({ index, style }) => {
     const row = logs[index];
     return (
       <div className={styles.row} style={style}>
         <div>
-          <Dot color={stringToColor(uuids[row.session_id] || `${row.session_id}`)} />
+          <Dot color={getColor(row)} />
         </div>
-        <div className={styles.time}>{format(new Date(row.created_at), 'h:mm:ss')}</div>
+        <div className={styles.time}>{getTime(row)}</div>
         <div className={styles.detail}>
           <Icon className={styles.icon} icon={getIcon(row)} />
           {getDetail(row)}
diff --git a/components/metrics/RealtimeLog.module.css b/components/metrics/RealtimeLog.module.css
index 5924b331..99335a52 100644
--- a/components/metrics/RealtimeLog.module.css
+++ b/components/metrics/RealtimeLog.module.css
@@ -34,15 +34,12 @@
 
 .website {
   text-align: right;
-  padding-right: 20px;
+  padding: 0 20px;
 }
 
 .detail {
   display: flex;
   flex: 1;
-}
-
-.detail span {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js
index d514e348..d80304d9 100644
--- a/components/pages/RealtimeDashboard.js
+++ b/components/pages/RealtimeDashboard.js
@@ -80,7 +80,7 @@ export default function RealtimeDashboard() {
       );
     }
     return [];
-  }, [realtimeData]);
+  }, [realtimeData?.sessions]);
 
   const referrers = useMemo(() => {
     if (realtimeData?.pageviews) {
@@ -89,12 +89,15 @@ export default function RealtimeDashboard() {
           .reduce((arr, { referrer }) => {
             if (referrer?.startsWith('http')) {
               const { hostname } = new URL(referrer);
-              const row = arr.find(({ x }) => x === hostname);
 
-              if (!row) {
-                arr.push({ x: hostname, y: 1 });
-              } else {
-                row.y += 1;
+              if (!data.domains.includes(hostname)) {
+                const row = arr.find(({ x }) => x === hostname);
+
+                if (!row) {
+                  arr.push({ x: hostname, y: 1 });
+                } else {
+                  row.y += 1;
+                }
               }
             }
             return arr;
@@ -103,7 +106,7 @@ export default function RealtimeDashboard() {
       );
     }
     return [];
-  }, [realtimeData]);
+  }, [realtimeData?.pageviews]);
 
   useEffect(() => {
     if (init && !data) {
@@ -111,7 +114,11 @@ export default function RealtimeDashboard() {
       const domains = init.websites.map(({ domain }) => domain);
 
       setData({ websites, domains, ...data });
-    } else if (updates) {
+    }
+  }, [init]);
+
+  useEffect(() => {
+    if (updates) {
       const { pageviews, sessions, events, timestamp } = updates;
       const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
 
@@ -123,16 +130,14 @@ export default function RealtimeDashboard() {
         timestamp,
       }));
     }
-  }, [init, updates]);
+  }, [updates]);
 
-  if (!init || loading || !data) {
+  if (!init || !data || loading) {
     return null;
   }
 
   const { websites } = data;
 
-  //console.log({realtimeData, countries});
-
   return (
     <Page>
       <RealtimeHeader
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index 0a75c58d..7f97d0fb 100644
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@@ -10,10 +10,11 @@ export default function useFetch(url, options = {}, update = []) {
   const [status, setStatus] = useState();
   const [error, setError] = useState();
   const [loading, setLoadiing] = useState(false);
+  const [count, setCount] = useState(0);
   const { basePath } = useRouter();
-  const { params, disabled, headers, interval, delay = 0, onDataLoad } = options;
+  const { params = {}, disabled, headers, delay = 0, interval, onDataLoad } = options;
 
-  async function loadData() {
+  async function loadData(params) {
     try {
       setLoadiing(true);
       setError(null);
@@ -41,17 +42,23 @@ export default function useFetch(url, options = {}, update = []) {
 
   useEffect(() => {
     if (url && !disabled) {
-      setTimeout(() => loadData(), delay);
+      const id = setTimeout(() => loadData(params), delay);
+
+      return () => {
+        clearTimeout(id);
+      };
     }
-  }, [url, disabled, ...update]);
+  }, [url, !!disabled, count, ...update]);
 
   useEffect(() => {
-    const id = interval ? setInterval(() => loadData(), interval) : null;
+    if (interval && !disabled) {
+      const id = setInterval(() => setCount(state => state + 1), interval);
 
-    return () => {
-      clearInterval(id);
-    };
-  }, [interval, params]);
+      return () => {
+        clearInterval(id);
+      };
+    }
+  }, [interval, !!disabled]);
 
   return { data, status, error, loading };
 }
diff --git a/lib/constants.js b/lib/constants.js
index 721f5e1c..80d8eed1 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -51,6 +51,8 @@ export const EVENT_COLORS = [
   '#ffec16',
 ];
 
+export const DEFAULT_LOCALE = 'en-US';
+export const DEFAULT_THEME = 'light';
 export const DEFAUL_CHART_HEIGHT = 400;
 export const DEFAULT_ANIMATION_DURATION = 300;
 export const DEFAULT_DATE_RANGE = '24hour';
diff --git a/redux/actions/app.js b/redux/actions/app.js
index 94b77daa..900be56d 100644
--- a/redux/actions/app.js
+++ b/redux/actions/app.js
@@ -1,13 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getItem } from 'lib/web';
-import { LOCALE_CONFIG, THEME_CONFIG, VERSION_CHECK } from 'lib/constants';
+import {
+  DEFAULT_LOCALE,
+  DEFAULT_THEME,
+  LOCALE_CONFIG,
+  THEME_CONFIG,
+  VERSION_CHECK,
+} from 'lib/constants';
 import semver from 'semver';
 
 const app = createSlice({
   name: 'app',
   initialState: {
-    locale: getItem(LOCALE_CONFIG) || 'en-US',
-    theme: getItem(THEME_CONFIG) || 'light',
+    locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE,
+    theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
     versions: {
       current: process.env.VERSION,
       latest: null,