From 38df2d23b681e52a9a386b5be034ace91e9de9ec Mon Sep 17 00:00:00 2001
From: Bernt Christian Egeland <bernt.christian.egeland@gmail.com>
Date: Mon, 23 Jan 2023 21:29:48 +0100
Subject: [PATCH] useeffect to reset hour. check timerange before scroll

---
 web/src/components/TimePicker.jsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/web/src/components/TimePicker.jsx b/web/src/components/TimePicker.jsx
index 3c2ac6fe6..bf1d27cf1 100644
--- a/web/src/components/TimePicker.jsx
+++ b/web/src/components/TimePicker.jsx
@@ -23,10 +23,14 @@ const TimePicker = ({ dateRange, onChange }) => {
   }, [dateRange]);
 
   useEffect(() => {
-    if (reset || !before) return;
-
-    if (before.getHours() === 0 && after.getHours() === 0) return setTimeRange(new Set());
+    /**
+     * This will reset hours when user selects another date in the calendar.
+     */
+    if (before.getHours() === 0 && after.getHours() === 0 && timeRange.size > 1) return setTimeRange(new Set());
+  }, [after, before, timeRange]);
 
+  useEffect(() => {
+    if (reset || !after) return;
     /**
      * calculates the number of hours between two dates, by finding the difference in days,
      * converting it to hours and adding the hours from the before date.
@@ -46,9 +50,11 @@ const TimePicker = ({ dateRange, onChange }) => {
      * find an element by the id timeIndex- concatenated with the minimum value from timeRange array,
      * and if that element is present, it will scroll into view if needed
      */
-    const element = document.getElementById(`timeIndex-${Math.min(...timeRange)}`);
-    if (element) {
-      element.scrollIntoViewIfNeeded(true);
+    if (timeRange.size > 1) {
+      const element = document.getElementById(`timeIndex-${Math.min(...timeRange)}`);
+      if (element) {
+        element.scrollIntoViewIfNeeded(true);
+      }
     }
   }, [after, before, timeRange, reset]);