From ff4492ffb5c7a2db785b83945297d9162ce5ac3f Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 30 Jul 2020 01:08:21 -0700
Subject: [PATCH] Add quick filter buttons.

---
 components/MetricCard.js             |  2 +-
 components/MetricCard.module.css     |  1 +
 components/PageviewsChart.module.css |  3 ++-
 components/QuickButtons.js           | 33 ++++++++++++++++++++++++++++
 components/QuickButtons.module.css   | 20 +++++++++++++++++
 components/WebsiteList.js            | 17 +-------------
 components/WebsiteStats.js           | 17 +++++++++++---
 components/WebsiteStats.module.css   |  7 ++++++
 lib/format.js                        |  2 +-
 pages/index.js                       |  3 ---
 10 files changed, 80 insertions(+), 25 deletions(-)
 create mode 100644 components/QuickButtons.js
 create mode 100644 components/QuickButtons.module.css

diff --git a/components/MetricCard.js b/components/MetricCard.js
index 4bce9960..4ebbe28a 100644
--- a/components/MetricCard.js
+++ b/components/MetricCard.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSpring, animated } from 'react-spring';
 import styles from './MetricCard.module.css';
 
diff --git a/components/MetricCard.module.css b/components/MetricCard.module.css
index 0b3b945b..bfa692fb 100644
--- a/components/MetricCard.module.css
+++ b/components/MetricCard.module.css
@@ -8,6 +8,7 @@
 .value {
   font-size: 36px;
   line-height: 40px;
+  min-height: 40px;
   font-weight: 600;
 }
 
diff --git a/components/PageviewsChart.module.css b/components/PageviewsChart.module.css
index 8e3636c9..e83e789a 100644
--- a/components/PageviewsChart.module.css
+++ b/components/PageviewsChart.module.css
@@ -19,6 +19,7 @@
   width: 150px;
   height: 50px;
   transform: translate(-50%, -60px);
+  backdrop-filter: blur(4px);
 }
 
 .content:after {
@@ -52,5 +53,5 @@
   height: 10px;
   border-radius: 100%;
   border: 1px solid #fff;
-  margin-right: 10px;
+  margin-right: 8px;
 }
diff --git a/components/QuickButtons.js b/components/QuickButtons.js
new file mode 100644
index 00000000..7ac77b12
--- /dev/null
+++ b/components/QuickButtons.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { getDateRange } from 'lib/date';
+import styles from './QuickButtons.module.css';
+
+const options = {
+  '24hour': '24h',
+  '7day': '7d',
+  '30day': '30d',
+};
+
+export default function QuickButtons({ onChange }) {
+  const [active, setActive] = useState('7day');
+
+  function handleClick(value) {
+    setActive(value);
+    onChange(getDateRange(value));
+  }
+
+  return (
+    <div className={styles.buttons}>
+      {Object.keys(options).map(key => (
+        <div
+          key={key}
+          className={classNames(styles.button, { [styles.active]: active === key })}
+          onClick={() => handleClick(key)}
+        >
+          {options[key]}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/components/QuickButtons.module.css b/components/QuickButtons.module.css
new file mode 100644
index 00000000..f0398be2
--- /dev/null
+++ b/components/QuickButtons.module.css
@@ -0,0 +1,20 @@
+.buttons {
+  display: flex;
+}
+
+.button {
+  font-size: 12px;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: #eaeaea;
+}
+
+.active {
+  font-weight: 600;
+}
diff --git a/components/WebsiteList.js b/components/WebsiteList.js
index 27d91282..b6e3b5b8 100644
--- a/components/WebsiteList.js
+++ b/components/WebsiteList.js
@@ -2,39 +2,24 @@ import React, { useState, useEffect } from 'react';
 import { get } from 'lib/web';
 import WebsiteStats from './WebsiteStats';
 import DateFilter from './DateFilter';
-import { getDateRange } from 'lib/date';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList() {
   const [data, setData] = useState();
-  const [dateRange, setDateRange] = useState(getDateRange('7day'));
-  const { startDate, endDate, unit } = dateRange;
 
   async function loadData() {
     setData(await get(`/api/website`));
   }
 
-  function handleDateChange(value) {
-    setDateRange(value);
-  }
-
   useEffect(() => {
     loadData();
   }, []);
 
   return (
     <div className={styles.container}>
-      <DateFilter onChange={handleDateChange} />
       {data &&
         data.websites.map(({ website_id, label }) => (
-          <WebsiteStats
-            key={website_id}
-            title={label}
-            websiteId={website_id}
-            startDate={startDate}
-            endDate={endDate}
-            unit={unit}
-          />
+          <WebsiteStats key={website_id} title={label} websiteId={website_id} />
         ))}
     </div>
   );
diff --git a/components/WebsiteStats.js b/components/WebsiteStats.js
index 8b5ef7a2..bf77a9bb 100644
--- a/components/WebsiteStats.js
+++ b/components/WebsiteStats.js
@@ -1,12 +1,16 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PageviewsChart from './PageviewsChart';
 import { get } from 'lib/web';
-import { getDateArray, getTimezone } from 'lib/date';
+import { getDateArray, getDateRange, getTimezone } from 'lib/date';
 import WebsiteSummary from './WebsiteSummary';
+import QuickButtons from './QuickButtons';
 import styles from './WebsiteStats.module.css';
 
-export default function WebsiteStats({ title, websiteId, startDate, endDate, unit }) {
+export default function WebsiteStats({ title, websiteId }) {
   const [data, setData] = useState();
+  const [dateRange, setDateRange] = useState(getDateRange('7day'));
+  const { startDate, endDate, unit } = dateRange;
+
   const [pageviews, uniques] = useMemo(() => {
     if (data) {
       return [
@@ -17,6 +21,10 @@ export default function WebsiteStats({ title, websiteId, startDate, endDate, uni
     return [[], []];
   }, [data]);
 
+  function handleDateChange(values) {
+    setDateRange(values);
+  }
+
   async function loadData() {
     setData(
       await get(`/api/website/${websiteId}/pageviews`, {
@@ -35,7 +43,10 @@ export default function WebsiteStats({ title, websiteId, startDate, endDate, uni
   return (
     <div className={styles.container}>
       <div className={styles.title}>{title}</div>
-      <WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
+      <div className={styles.header}>
+        <WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
+        <QuickButtons onChange={handleDateChange} />
+      </div>
       <PageviewsChart data={{ pageviews, uniques }} unit={unit} />
     </div>
   );
diff --git a/components/WebsiteStats.module.css b/components/WebsiteStats.module.css
index a108a030..afdff3d5 100644
--- a/components/WebsiteStats.module.css
+++ b/components/WebsiteStats.module.css
@@ -8,3 +8,10 @@
   line-height: 60px;
   font-weight: 600;
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
diff --git a/lib/format.js b/lib/format.js
index c9480f31..c00f84d0 100644
--- a/lib/format.js
+++ b/lib/format.js
@@ -24,7 +24,7 @@ export function formatTime(val) {
 }
 
 export function formatShortTime(val, formats = ['m', 's'], space = '') {
-  if (val === 0) {
+  if (val <= 0) {
     return `0${formats[formats.length - 1]}`;
   }
 
diff --git a/pages/index.js b/pages/index.js
index f99854d0..5d71fffa 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,9 +10,6 @@ import WebsiteList from '../components/WebsiteList';
 export default function HomePage({ username }) {
   return (
     <Layout>
-      <h2>
-        You've successfully logged in as <b>{username}</b>.
-      </h2>
       <WebsiteList />
       <div>
         <PageviewsChart