New components, convert hooks to components, bug fixes.

components/Button.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import Icon from './Icon';
+import styles from './Button.module.css';
+
+export default function Button({ icon, children, className, onClick }) {
+  return (
+    <button type="button" className={classNames(styles.button, className)} onClick={onClick}>
+      {icon && <Icon icon={icon} />}
+      {children}
+    </button>
+  );
+}

components/Button.module.css

@@ -0,0 +1,22 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f5f5;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: #eaeaea;
+}
+
+.button svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+}

components/CheckVisible.js

@@ -1,13 +1,16 @@
 import React, { useState, useRef, useEffect } from 'react';
 
-function isInViewport(node) {
-  return (
-    window.pageYOffset < node.offsetTop + node.clientHeight ||
-    window.pageXOffset < node.offsetLeft + node.clientWidth
+function isInViewport(element) {
+  const rect = element.getBoundingClientRect();
+  return !(
+    rect.bottom < 0 ||
+    rect.right < 0 ||
+    rect.left > window.innerWidth ||
+    rect.top > window.innerHeight
   );
 }
 
-export default function CheckVisible({ children }) {
+export default function CheckVisible({ className, children }) {
   const [visible, setVisible] = useState(false);
   const ref = useRef();
 
@@ -30,5 +33,9 @@ export default function CheckVisible({ children }) {
     };
   }, [visible]);
 
-  return <div ref={ref}>{typeof children === 'function' ? children(visible) : children}</div>;
+  return (
+    <div ref={ref} className={className} data-visible={visible}>
+      {typeof children === 'function' ? children(visible) : children}
+    </div>
+  );
 }

components/DropDown.js

@@ -23,10 +23,10 @@ export default function DropDown({ value, options = [], onChange, className }) {
       }
     }
 
-    document.body.addEventListener('click', hideMenu);
+    document.addEventListener('click', hideMenu);
 
     return () => {
-      document.body.removeEventListener('click', hideMenu);
+      document.removeEventListener('click', hideMenu);
     };
   }, [ref]);
 

components/Icon.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Icon.module.css';
+
+export default function Icon({ icon, className }) {
+  return <div className={classNames(styles.icon, className)}>{icon}</div>;
+}

components/Icon.module.css

@@ -0,0 +1,11 @@
+.icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.icon > svg {
+  width: 16px;
+  height: 16px;
+}

components/Link.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import NextLink from 'next/link';
+import styles from './Link.module.css';
+
+export default function Link({ href, className, children }) {
+  return (
+    <NextLink href={href}>
+      <a className={classNames(styles.link, className)}>{children}</a>
+    </NextLink>
+  );
+}

components/Link.module.css

@@ -0,0 +1,23 @@
+.link,
+.link:active,
+.link:visited {
+  position: relative;
+  color: #2c2c2c;
+  text-decoration: none;
+}
+
+.link:before {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background: #2680eb;
+  opacity: 0.5;
+  transition: width 100ms;
+}
+
+.link:hover:before {
+  width: 100%;
+  transition: width 100ms;
+}

components/QuickButtons.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import Button from './Button';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 
@@ -17,13 +18,13 @@ export default function QuickButtons({ value, onChange }) {
   return (
     <div className={styles.buttons}>
       {Object.keys(options).map(key => (
-        <div
+        <Button
           key={key}
-          className={classNames(styles.button, { [styles.active]: value === key })}
+          className={classNames({ [styles.active]: value === key })}
           onClick={() => handleClick(key)}
         >
           {options[key]}
-        </div>
+        </Button>
       ))}
     </div>
   );

components/QuickButtons.module.css

@@ -6,23 +6,16 @@
   margin: auto;
 }
 
-.button {
-  font-size: 12px;
-  background: #f5f5f5;
-  padding: 4px 8px;
-  border-radius: 4px;
-  margin-right: 10px;
-  cursor: pointer;
-}
-
-.button:last-child {
-  margin-right: 0;
-}
-
-.button:hover {
-  background: #eaeaea;
+.buttons button + button {
+  margin-left: 10px;
 }
 
 .active {
   font-weight: 600;
 }
+
+@media only screen and (max-width: 720px) {
+  .buttons button:last-child {
+    display: none;
+  }
+}

components/RankingsChart.js

@@ -57,9 +57,11 @@ export default function RankingsChart({
             <div className={styles.title}>{title}</div>
             <div className={styles.heading}>{heading}</div>
           </div>
-          {rankings.map(({ x, y, z }) => (
-            <Row key={x} label={x} value={y} percent={z} animate={visible} />
-          ))}
+          <div className={styles.body}>
+            {rankings.map(({ x, y, z }) => (
+              <Row key={x} label={x} value={y} percent={z} animate={visible} />
+            ))}
+          </div>
         </div>
       )}
     </CheckVisible>

components/RankingsChart.module.css

@@ -73,3 +73,15 @@
   background: #2680eb;
   z-index: -1;
 }
+
+.body {
+  position: relative;
+}
+
+.body:empty:before {
+  content: 'No data available';
+  display: block;
+  color: #b3b3b3;
+  text-align: center;
+  line-height: 50px;
+}

components/StickyHeader.js

@@ -0,0 +1,49 @@
+import React, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+
+export default function StickyHeader({
+  className,
+  stickyClassName,
+  stickyStyle,
+  children,
+  enabled = true,
+}) {
+  const [sticky, setSticky] = useState(false);
+  const ref = useRef();
+  const offsetTop = useRef(0);
+
+  useEffect(() => {
+    const checkPosition = () => {
+      if (ref.current) {
+        if (!offsetTop.current) {
+          offsetTop.current = ref.current.offsetTop;
+        }
+        const state = window.pageYOffset > offsetTop.current;
+        if (sticky !== state) {
+          setSticky(state);
+        }
+      }
+    };
+
+    checkPosition();
+
+    if (enabled) {
+      window.addEventListener('scroll', checkPosition);
+    }
+
+    return () => {
+      window.removeEventListener('scroll', checkPosition);
+    };
+  }, [sticky, enabled]);
+
+  return (
+    <div
+      ref={ref}
+      data-sticky={sticky}
+      className={classNames(className, { [stickyClassName]: sticky })}
+      {...(sticky && { style: stickyStyle })}
+    >
+      {children}
+    </div>
+  );
+}

components/WebsiteChart.js

@@ -5,21 +5,21 @@ import CheckVisible from './CheckVisible';
 import MetricsBar from './MetricsBar';
 import QuickButtons from './QuickButtons';
 import DateFilter from './DateFilter';
-import useSticky from './hooks/useSticky';
+import StickyHeader from './StickyHeader';
 import { get } from 'lib/web';
 import { getDateArray, getDateRange, getTimezone } from 'lib/date';
 import styles from './WebsiteChart.module.css';
 
 export default function WebsiteChart({
   websiteId,
   defaultDateRange = '7day',
-  stickHeader = false,
+  stickyHeader = false,
+  onDataLoad = () => {},
   onDateChange = () => {},
 }) {
   const [data, setData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const { startDate, endDate, unit, value } = dateRange;
-  const [ref, sticky] = useSticky(stickHeader);
   const container = useRef();
 
   const [pageviews, uniques] = useMemo(() => {
@@ -38,14 +38,15 @@ export default function WebsiteChart({
   }
 
   async function loadData() {
-    setData(
-      await get(`/api/website/${websiteId}/pageviews`, {
-        start_at: +startDate,
-        end_at: +endDate,
-        unit,
-        tz: getTimezone(),
-      }),
-    );
+    const data = await get(`/api/website/${websiteId}/pageviews`, {
+      start_at: +startDate,
+      end_at: +endDate,
+      unit,
+      tz: getTimezone(),
+    });
+
+    setData(data);
+    onDataLoad(data);
   }
 
   useEffect(() => {
@@ -54,10 +55,11 @@ export default function WebsiteChart({
 
   return (
     <div ref={container}>
-      <div
-        ref={ref}
-        className={classNames(styles.header, 'row', { [styles.sticky]: sticky })}
-        style={{ width: sticky ? container.current.clientWidth : 'auto' }}
+      <StickyHeader
+        className={classNames(styles.header, 'row')}
+        stickyClassName={styles.sticky}
+        stickyStyle={{ width: container?.current?.clientWidth }}
+        enabled={stickyHeader}
       >
         <MetricsBar
           className="col-12 col-md-9 col-lg-10"
@@ -70,12 +72,11 @@ export default function WebsiteChart({
           value={value}
           onChange={handleDateChange}
         />
-      </div>
+      </StickyHeader>
       <div className="row">
-        <CheckVisible>
+        <CheckVisible className="col">
           {visible => (
             <PageviewsChart
-              className="col"
               websiteId={websiteId}
               data={{ pageviews, uniques }}
               unit={unit}