Added useDateRange hook.

components/common/RefreshButton.js

@@ -1,16 +1,17 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+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 = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
 
   function handleClick() {
     if (dateRange) {
-      dispatch(setDateRange(websiteId, { ...dateRange }));
+      dispatch(setDateRange(websiteId, dateRange));
     }
   }
 

components/metrics/EventsChart.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
-import { getTimezone, getDateArray, getDateLength, getDateRange } from 'lib/date';
+import { getTimezone, getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
-import { useSelector } from 'react-redux';
+import { useDateRange } from 'hooks/useDateRange';
 
 const COLORS = [
   '#2680eb',
@@ -16,9 +16,9 @@ const COLORS = [
   '#85d044',
 ];
 
-export default function EventsChart({ websiteId, defaultDateRange = '7day' }) {
+export default function EventsChart({ websiteId }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
-  const { startDate, endDate, unit, modified } = dateRange || getDateRange(defaultDateRange);
+  const { startDate, endDate, unit, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/events`,
     {

components/metrics/MetricsBar.js

@@ -5,12 +5,11 @@ import Loading from 'components/common/Loading';
 import useFetch from 'hooks/useFetch';
 import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsBar.module.css';
-import { useSelector } from 'react-redux';
+import { useDateRange } from '../../hooks/useDateRange';
-import { getDateRange } from '../../lib/date';
 
-export default function MetricsBar({ websiteId, className, defaultDateRange = '7day' }) {
+export default function MetricsBar({ websiteId, className }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
-  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
+  const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/metrics`,
     {

components/metrics/MetricsTable.js

@@ -1,5 +1,4 @@
 import React, { useState, useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { FixedSizeList } from 'react-window';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
@@ -9,8 +8,8 @@ import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
+import { useDateRange } from 'hooks/useDateRange';
 import styles from './MetricsTable.module.css';
-import { getDateRange } from '../../lib/date';
 
 export default function MetricsTable({
   websiteId,
@@ -24,12 +23,11 @@ export default function MetricsTable({
   limit,
   headerComponent,
   renderLabel,
-  defaultDateRange = '7day',
   onDataLoad = () => {},
   onExpand = () => {},
 }) {
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
-  const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
+  const { startDate, endDate, modified } = dateRange;
   const { data } = useFetch(
     `/api/website/${websiteId}/rankings`,
     {

components/metrics/WebsiteChart.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
@@ -7,22 +7,22 @@ import QuickButtons from './QuickButtons';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import useFetch from 'hooks/useFetch';
-import { getDateArray, getDateLength, getDateRange, getTimezone } from 'lib/date';
+import { getDateArray, getDateLength, getTimezone } from 'lib/date';
 import { setDateRange } from 'redux/actions/websites';
 import styles from './WebsiteChart.module.css';
 import WebsiteHeader from './WebsiteHeader';
+import { useDateRange } from '../../hooks/useDateRange';
 
 export default function WebsiteChart({
   websiteId,
   title,
-  defaultDateRange = '7day',
   stickyHeader = false,
   showLink = false,
   onDataLoad = () => {},
 }) {
   const dispatch = useDispatch();
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const dateRange = useDateRange(websiteId);
-  const { startDate, endDate, unit, value, modified } = dateRange || getDateRange(defaultDateRange);
+  const { startDate, endDate, unit, value, modified } = dateRange;
 
   const { data } = useFetch(
     `/api/website/${websiteId}/pageviews`,

hooks/useDateRange.js

@@ -0,0 +1,8 @@
+import { useSelector } from 'react-redux';
+import { getDateRange } from 'lib/date';
+
+export function useDateRange(websiteId, defaultDateRange = '7day') {
+  return useSelector(
+    state => state.websites[websiteId]?.dateRange || getDateRange(defaultDateRange),
+  );
+}

redux/actions/websites.js

@@ -25,8 +25,7 @@ export function setDateRange(websiteId, dateRange) {
       if (!draft[websiteId]) {
         draft[websiteId] = {};
       }
-      dateRange.modified = Date.now();
+      draft[websiteId].dateRange = { ...dateRange, modified: Date.now() };
-      draft[websiteId].dateRange = dateRange;
     });
 
     return dispatch(updateWebsites(websites));