Move date range selection into redux.

components/WebsiteDetails.js

@@ -3,10 +3,8 @@ 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 Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
 import PagesTable from './metrics/PagesTable';
@@ -20,15 +18,12 @@ import EventsChart from './metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import Loading from 'components/common/Loading';
 
-export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
+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 [expand, setExpand] = useState();
-  const [refresh, setRefresh] = useState(0);
-  const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
-  const { startDate, endDate, unit } = dateRange;
-  const { data } = useFetch(`/api/website/${websiteId}`);
 
   const BackButton = () => (
     <Button
@@ -50,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,
@@ -79,11 +63,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   }
 
   function handleDataLoad() {
-    if (!chartLoaded) setTimeout(() => setChartLoaded(true), 300);
-  }
-
-  function handleDateChange(values) {
-    setTimeout(() => setDateRange(values), 300);
+    if (!chartLoaded) {
+      setTimeout(() => setChartLoaded(true), 300);
+    }
   }
 
   function handleExpand(value) {
@@ -94,10 +76,6 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setExpand(getSelectedMenuOption(value));
   }
 
-  function handleRefresh() {
-    setRefresh(state => state + 1);
-  }
-
   if (!data) {
     return null;
   }
@@ -106,17 +84,11 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     <Page>
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
-          <WebsiteHeader
+          <WebsiteChart
             websiteId={websiteId}
             title={data.name}
-            onRefresh={handleRefresh}
-            showLink={false}
-          />
-          <WebsiteChart
-            key={refresh}
-            websiteId={websiteId}
             onDataLoad={handleDataLoad}
-            onDateChange={handleDateChange}
+            showLink={false}
             stickyHeader
           />
         </div>
@@ -158,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>
         </>