Merge pull request #85 from mikecao/dev

v0.20.0

Author: mikecao

assets/redo.svg

@@ -1,13 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
 import Page from 'components/layout/Page';
-import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import MenuLayout from 'components/layout/MenuLayout';
 import Button from 'components/common/Button';
-import { getDateRange } from 'lib/date';
-import { get } from 'lib/web';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
 import PagesTable from './metrics/PagesTable';
@@ -18,15 +15,15 @@ import DevicesTable from './metrics/DevicesTable';
 import CountriesTable from './metrics/CountriesTable';
 import EventsTable from './metrics/EventsTable';
 import EventsChart from './metrics/EventsChart';
+import useFetch from 'hooks/useFetch';
+import Loading from 'components/common/Loading';
 
-export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
-  const [data, setData] = useState();
+export default function WebsiteDetails({ websiteId }) {
+  const { data } = useFetch(`/api/website/${websiteId}`);
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [eventsData, setEventsData] = useState();
-  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
-  const { startDate, endDate, unit } = dateRange;
 
   const BackButton = () => (
     <Button
@@ -48,23 +45,12 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     { label: 'Browsers', value: 'browser', component: BrowsersTable },
     { label: 'Operating system', value: 'os', component: OSTable },
     { label: 'Devices', value: 'device', component: DevicesTable },
-    {
-      label: 'Countries',
-      value: 'country',
-      component: props => <CountriesTable {...props} onDataLoad={data => setCountryData(data)} />,
-    },
+    { label: 'Countries', value: 'country', component: CountriesTable },
     { label: 'Events', value: 'event', component: EventsTable },
   ];
 
-  const dataProps = {
-    websiteId,
-    startDate,
-    endDate,
-    unit,
-  };
-
   const tableProps = {
-    ...dataProps,
+    websiteId,
     websiteDomain: data?.domain,
     limit: 10,
     onExpand: handleExpand,
@@ -76,16 +62,10 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     return menuOptions.find(e => e.value === value);
   }
 
-  async function loadData() {
-    setData(await get(`/api/website/${websiteId}`));
-  }
-
   function handleDataLoad() {
-    if (!chartLoaded) setTimeout(() => setChartLoaded(true), 300);
-  }
-
-  function handleDateChange(values) {
-    setTimeout(() => setDateRange(values), 300);
+    if (!chartLoaded) {
+      setTimeout(() => setChartLoaded(true), 300);
+    }
   }
 
   function handleExpand(value) {
@@ -96,12 +76,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setExpand(getSelectedMenuOption(value));
   }
 
-  useEffect(() => {
-    if (websiteId) {
-      loadData();
-    }
-  }, [websiteId]);
-
   if (!data) {
     return null;
   }
@@ -110,15 +84,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
-          <WebsiteHeader websiteId={websiteId} name={data.name} showLink={false} />
           <WebsiteChart
             websiteId={websiteId}
+            title={data.name}
             onDataLoad={handleDataLoad}
-            onDateChange={handleDateChange}
+            showLink={false}
             stickyHeader
           />
         </div>
       </div>
+      {!chartLoaded && <Loading />}
       {chartLoaded && !expand && (
         <>
           <div className={classNames(styles.row, 'row')}>
@@ -155,7 +130,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
               <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
             <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
-              <EventsChart {...dataProps} />
+              <EventsChart websiteId={websiteId} />
             </div>
           </div>
         </>

assets/times.svg

@@ -1,36 +1,26 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
-import WebsiteHeader from 'components/metrics/WebsiteHeader';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import Page from 'components/layout/Page';
 import Button from 'components/common/Button';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
-import { get } from 'lib/web';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList() {
-  const [data, setData] = useState();
   const router = useRouter();
-
-  async function loadData() {
-    setData(await get(`/api/websites`));
-  }
-
-  useEffect(() => {
-    loadData();
-  }, []);
+  const { data } = useFetch('/api/websites');
 
   if (!data) {
     return null;
   }
 
   return (
     <Page>
-      {data?.map(({ website_id, name }) => (
+      {data.map(({ website_id, name }) => (
         <div key={website_id} className={styles.website}>
-          <WebsiteHeader websiteId={website_id} name={name} showLink />
-          <WebsiteChart key={website_id} title={name} websiteId={website_id} />
+          <WebsiteChart websiteId={website_id} title={name} showLink />
         </div>
       ))}
       {data.length === 0 && (

components/WebsiteDetails.js

@@ -20,10 +20,12 @@ export default function DropDown({
     setShowMenu(state => !state);
   }
 
-  function handleSelect(value, e) {
+  function handleSelect(selected, e) {
     e.stopPropagation();
     setShowMenu(false);
-    onChange(value);
+    if (selected !== value) {
+      onChange(selected);
+    }
   }
 
   useDocumentClick(e => {

components/WebsiteList.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { setDateRange } from 'redux/actions/websites';
+import Button from './Button';
+import Refresh from 'assets/redo.svg';
+import { useDateRange } from 'hooks/useDateRange';
+
+export default function RefreshButton({ websiteId }) {
+  const dispatch = useDispatch();
+  const dateRange = useDateRange(websiteId);
+
+  function handleClick() {
+    if (dateRange) {
+      dispatch(setDateRange(websiteId, dateRange));
+    }
+  }
+
+  return <Button icon={<Refresh />} size="small" onClick={handleClick} />;
+}

components/common/DropDown.js

@@ -0,0 +1,26 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { useSpring, animated } from 'react-spring';
+import styles from './Toast.module.css';
+import Icon from 'components/common/Icon';
+import Close from 'assets/times.svg';
+
+export default function Toast({ message, timeout = 3000, onClose }) {
+  const props = useSpring({
+    opacity: 1,
+    transform: 'translate3d(0,0px,0)',
+    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
+  });
+
+  useEffect(() => {
+    setTimeout(onClose, timeout);
+  }, []);
+
+  return ReactDOM.createPortal(
+    <animated.div className={styles.toast} style={props} onClick={onClose}>
+      <div className={styles.message}>{message}</div>
+      <Icon className={styles.close} icon={<Close />} size="small" />
+    </animated.div>,
+    document.getElementById('__modals'),
+  );
+}

components/common/RefreshButton.js

@@ -0,0 +1,25 @@
+.toast {
+  position: absolute;
+  top: 30px;
+  left: 0;
+  right: 0;
+  width: 300px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  color: var(--gray50);
+  background: var(--green400);
+  margin: auto;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.message {
+  font-size: var(--font-size-normal);
+}
+
+.close {
+  margin-left: 20px;
+}

components/common/Toast.js

@@ -1,32 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo } from 'react';
 import { useSpring, animated } from 'react-spring';
 import classNames from 'classnames';
-import { get } from 'lib/web';
+import useFetch from 'hooks/useFetch';
 import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, className }) {
-  const [count, setCount] = useState(0);
-
-  async function loadData() {
-    const result = await get(`/api/website/${websiteId}/active`);
-    setCount(result?.[0]?.x);
-  }
+  const { data } = useFetch(`/api/website/${websiteId}/active`, {}, { interval: 60000 });
+  const count = useMemo(() => {
+    return data?.[0]?.x || 0;
+  }, [data]);
 
   const props = useSpring({
     x: count,
     from: { x: 0 },
   });
 
-  useEffect(() => {
-    loadData();
-
-    const id = setInterval(() => loadData(), 60000);
-
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-
   if (count === 0) {
     return null;
   }

components/common/Toast.module.css

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import styles from './BarChart.module.css';
 import { format } from 'date-fns';
+import { formatLongNumber } from '../../lib/format';
 
 export default function BarChart({
   chartId,
@@ -21,7 +22,7 @@ export default function BarChart({
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
 
-  const renderLabel = (label, index, values) => {
+  const renderXLabel = (label, index, values) => {
     const d = new Date(values[index].value);
     const n = records;
 
@@ -40,6 +41,10 @@ export default function BarChart({
     }
   };
 
+  const renderYLabel = label => {
+    return +label > 1 ? formatLongNumber(label) : label;
+  };
+
   const renderTooltip = model => {
     const { opacity, title, body, labelColors } = model;
 
@@ -82,7 +87,7 @@ export default function BarChart({
               tooltipFormat: 'ddd MMMM DD YYYY',
             },
             ticks: {
-              callback: renderLabel,
+              callback: renderXLabel,
               minRotation: 0,
               maxRotation: 0,
             },
@@ -96,6 +101,7 @@ export default function BarChart({
         yAxes: [
           {
             ticks: {
+              callback: renderYLabel,
               beginAtZero: true,
             },
             stacked,
@@ -119,7 +125,7 @@ export default function BarChart({
     const { options } = chart.current;
 
     options.scales.xAxes[0].time.unit = unit;
-    options.scales.xAxes[0].ticks.callback = renderLabel;
+    options.scales.xAxes[0].ticks.callback = renderXLabel;
     options.animation.duration = animationDuration;
 
     onUpdate(chart.current);

components/metrics/ActiveUsers.js

@@ -2,15 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { browserFilter } from 'lib/filters';
 
-export default function BrowsersTable({ websiteId, startDate, endDate, limit, onExpand }) {
+export default function BrowsersTable({ websiteId, limit, onExpand }) {
   return (
     <MetricsTable
       title="Browsers"
       type="browser"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={browserFilter}
       onExpand={onExpand}

components/metrics/BarChart.js

@@ -2,22 +2,13 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import { countryFilter, percentFilter } from 'lib/filters';
 
-export default function CountriesTable({
-  websiteId,
-  startDate,
-  endDate,
-  limit,
-  onDataLoad,
-  onExpand,
-}) {
+export default function CountriesTable({ websiteId, limit, onDataLoad = () => {}, onExpand }) {
   return (
     <MetricsTable
       title="Countries"
       type="country"
       metric="Visitors"
       websiteId={websiteId}
-      startDate={startDate}
-      endDate={endDate}
       limit={limit}
       dataFilter={countryFilter}
       onDataLoad={data => onDataLoad(percentFilter(data))}