From 8b4690ad8d2254c6bf5445cf3e86c6e26a50a31c Mon Sep 17 00:00:00 2001
From: Shubham Verma <25576658+ShubhamVerma1811@users.noreply.github.com>
Date: Sat, 9 Oct 2021 19:50:15 +0530
Subject: [PATCH] fix: refresh button crash

---
 components/common/RefreshButton.js  | 23 ++++++++++++-----------
 components/metrics/WebsiteChart.js  |  8 +++++++-
 components/metrics/WebsiteHeader.js | 13 ++++++-------
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 91a43ab8..0a9dbb70 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -1,26 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
-import { setDateRange } from 'redux/actions/websites';
-import Button from './Button';
-import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
+import Refresh from 'assets/redo.svg';
 import useDateRange from 'hooks/useDateRange';
-import { getDateRange } from '../../lib/date';
 import useLocale from 'hooks/useLocale';
+import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { setDateRange } from 'redux/actions/websites';
+import { getDateRange } from '../../lib/date';
+import Button from './Button';
 
-function RefreshButton({ websiteId }) {
+function RefreshButton({ websiteId, createdAt }) {
   const dispatch = useDispatch();
   const { locale } = useLocale();
-  const [dateRange] = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
   const [loading, setLoading] = useState(false);
   const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
 
   function handleClick() {
     if (dateRange) {
       setLoading(true);
-      dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale)));
+      dispatch(setDateRange(websiteId, getDateRange(dateRange.value, locale, createdAt)));
     }
   }
 
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 95740ac9..fab9627b 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -70,7 +70,13 @@ export default function WebsiteChart({
 
   return (
     <div className={styles.container}>
-      <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
+      <WebsiteHeader
+        websiteId={websiteId}
+        title={title}
+        domain={domain}
+        showLink={showLink}
+        createdAt={createdAt}
+      />
       <div className={classNames(styles.header, 'row')}>
         <StickyHeader
           className={classNames(styles.metrics, 'col row')}
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index db68cd54..af9cea11 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,15 +1,14 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import Arrow from 'assets/arrow-right.svg';
+import Favicon from 'components/common/Favicon';
 import Link from 'components/common/Link';
-import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
-import Favicon from 'components/common/Favicon';
+import PageHeader from 'components/layout/PageHeader';
+import { FormattedMessage } from 'react-intl';
 import ActiveUsers from './ActiveUsers';
-import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
-export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false, createdAt }) {
   const header = showLink ? (
     <>
       <Favicon domain={domain} />
@@ -29,7 +28,7 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
       <div className={styles.title}>{header}</div>
       <ActiveUsers className={styles.active} websiteId={websiteId} />
       <ButtonLayout align="right">
-        <RefreshButton websiteId={websiteId} />
+        <RefreshButton websiteId={websiteId} createdAt={createdAt} />
         {showLink && (
           <Link
             href="/website/[...id]"