From 8e9349e1d8baf4060fdded362fd3b6ec57817669 Mon Sep 17 00:00:00 2001
From: birjolaxew <johanringmann@gmail.com>
Date: Wed, 11 Nov 2020 11:30:29 +0100
Subject: [PATCH] Update DatePicker to use new navigation function

---
 assets/js/dashboard/datepicker.js | 69 +++++++++++++++++++++++++++----
 1 file changed, 61 insertions(+), 8 deletions(-)

diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js
index edd1c6129..1d17648d4 100644
--- a/assets/js/dashboard/datepicker.js
+++ b/assets/js/dashboard/datepicker.js
@@ -3,6 +3,7 @@ import Transition from "../transition.js";
 import { withRouter, Link } from 'react-router-dom'
 import Flatpickr from "react-flatpickr";
 import {shiftDays, shiftMonths, formatDay, formatDayShort, formatMonthYYYY, formatISO, isToday, lastMonth, nowForSite, isSameMonth} from './date'
+import { navigateToQuery } from './query.js';
 
 
 class DatePicker extends React.Component {
@@ -44,23 +45,42 @@ class DatePicker extends React.Component {
 
     if (e.ctrlKey || e.ctrlKey || e.altKey) return
 
+    const newSearch = {
+      period: false,
+      from: false,
+      to: false,
+      date: false
+    }
+
     if (e.key === 'ArrowLeft') {
       if (query.period === 'day') {
         const prevDate = formatISO(shiftDays(query.date, -1))
-        history.push({search: this.queryWithPeriod('day', {date: prevDate})})
+        newSearch.period = 'day'
+        newSearch.date = prevDate
       } else if (query.period === 'month') {
         const prevMonth = formatISO(shiftMonths(query.date, -1))
-        history.push({search: this.queryWithPeriod('month', {date: prevMonth})})
+        newSearch.period = 'month'
+        newSearch.date = prevMonth
       }
     } else if (e.key === 'ArrowRight') {
       if (query.period === 'day') {
         const nextDate = formatISO(shiftDays(query.date, 1))
-        history.push({search: this.queryWithPeriod('day', {date: nextDate})})
+        newSearch.period = 'day'
+        newSearch.date = nextDate
       } else if (query.period === 'month') {
         const nextMonth = formatISO(shiftMonths(query.date, 1))
-        history.push({search: this.queryWithPeriod('month', {date: nextMonth})})
+        newSearch.period = 'month'
+        newSearch.date = nextMonth
       }
     }
+
+    if (newSearch.date) {
+      navigateToQuery(
+        history,
+        query,
+        newSearch
+      )
+    }
   }
 
   handleClick(e) {
@@ -96,12 +116,23 @@ class DatePicker extends React.Component {
   }
 
   renderArrow(period, prevDate, nextDate) {
+    const navigateGenerator = data => {
+      return e => {
+        e.preventDefault()
+        navigateToQuery(
+          this.props.history,
+          this.props.query,
+          data
+        )
+      }
+    }
+
     return (
       <div className="flex rounded shadow bg-white mr-4 cursor-pointer">
-        <Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} className="flex items-center px-2 border-r border-gray-300">
+        <Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} onClick={navigateGenerator({date: prevDate})} className="flex items-center px-2 border-r border-gray-300">
           <svg className="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
         </Link>
-        <Link to={{search: this.queryWithPeriod(period, {date: nextDate})}} className="flex items-center px-2">
+        <Link to={{search: this.queryWithPeriod(period, {date: nextDate})}} onClick={navigateGenerator({date: nextDate})} className="flex items-center px-2">
           <svg className="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
         </Link>
       </div>
@@ -171,8 +202,21 @@ class DatePicker extends React.Component {
 
     if (opts.date) { opts.date = formatISO(opts.date) }
 
+    const onClick = e => {
+      e.preventDefault()
+      navigateToQuery(
+        this.props.history,
+        this.props.query,
+        {
+          period,
+          ...opts
+        }
+      )
+      this.close()
+    }
+
     return (
-      <Link to={{search: this.queryWithPeriod(period, opts)}} onClick={this.close.bind(this)} className={boldClass + ' block px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900'}>
+      <Link to={{search: this.queryWithPeriod(period, opts)}} onClick={onClick} className={boldClass + ' block px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900'}>
         {text}
       </Link>
     )
@@ -217,7 +261,16 @@ class DatePicker extends React.Component {
   setCustomDate(dates) {
     if (dates.length === 2) {
       const [from, to] = dates
-      this.props.history.push({search: this.queryWithPeriod('custom', {from: formatISO(from), to: formatISO(to)})})
+      navigateToQuery(
+        this.props.history,
+        this.props.query,
+        {
+          period: 'custom',
+          date: false,
+          from: formatISO(from),
+          to: formatISO(to),
+        }
+      )
       this.close()
     }
   }