new timePicker component

web/src/components/TimePicker.jsx

@@ -1,21 +1,72 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
-// import './CalendarTimePicker.css';
 
-const CalendarTimePicker = () => {
-  const [timeSelector, setTimeSelector] = useState({ After: 0, Before: 0 });
+const CalendarTimePicker = ({ dateRange, onChange }) => {
+  const [selected, setSelected] = useState([0]);
 
-  const handleTime = (name, idx) => {
-    setTimeSelector({
-      ...timeSelector,
-      [name]: idx,
-    });
+  const timestampHour = (timestamp) => {
+    if (!timestamp) return undefined;
+    return new Date(timestamp).getHours();
   };
 
-  const renderTimePicker = ({ title, selected }) => {
-    return (
-      <span>
-        <label className="block text-center font-medium mb-2 text-gray-300">{title}</label>
+  const handleTime = (number) => {
+    const currentHour = new Date();
+    currentHour.setHours(number, 0, 0, 0);
+
+    // Get current time if dateRange.after or dateRange.before are not set
+    const afterTime = dateRange.after ? dateRange.after : currentHour.getTime();
+    const beforetime = afterTime + 1;
+
+    // Update dateRange object with new "before" time and set selected to new number
+    if (selected.length === 1 && number > Math.max(...selected)) {
+      onChange({
+        after: afterTime / 1000,
+        before: new Date(afterTime).setHours(number + 1) / 1000,
+      });
+
+      return setSelected([number]);
+    }
+
+    // Updating the start of the selected range
+    if (selected.length > 0 && number < selected[0]) {
+      onChange({
+        after: new Date(afterTime).setHours(number) / 1000,
+        before: dateRange.before / 1000,
+      });
+
+      return setSelected([number]);
+    }
+
+    // Updating the end of the selected range
+    if (selected.length === 2) {
+      onChange({
+        after: dateRange.after ? dateRange.after / 1000 : 0,
+        before: new Date(beforetime) / 1000,
+      });
+
+      return setSelected([number]);
+    }
+
+    // Update dateRange object with both "after" and "before" times
+    if (selected.length === 1) {
+      onChange({
+        after: new Date(afterTime).setHours(number) / 1000,
+        before: new Date(afterTime).setHours(number + 1) / 1000,
+      });
+
+      return setSelected([Math.min(selected[0], number), Math.max(selected[0], number)]);
+    }
+    setSelected([number]);
+  };
+  const isSelected = (after, before, idx) => {
+    if (timestampHour(before) === 0 && timestampHour(after) === 0) return false;
+
+    return timestampHour(after) <= idx && timestampHour(before - 1) >= idx;
+  };
+  return (
+    <div aria-label="Calendar timepicker, select a time range">
+      <p className="block text-center font-medium mb-2 text-gray-300">TimePicker</p>
+      <div className="w-24 px-1">
         <div
           className="border border-gray-400 cursor-pointer hide-scroll"
           style={{ maxHeight: '23rem', overflowY: 'scroll' }}
@@ -23,24 +74,14 @@ const CalendarTimePicker = () => {
           {Array.from({ length: 24 }, (_, idx) => (
             <div
               key={idx}
-              className={`w-full font-light border border-transparent hover:border-gray-300 rounded-sm text-center text-xl ${
-                selected === idx ? 'bg-blue-500' : ''
-              } `}
-              onClick={() => handleTime(title, idx)}
+              className={`w-full font-light border border-transparent hover:border-gray-300 rounded-sm text-center text-lg
+              ${isSelected(dateRange.after, dateRange.before, idx) ? 'bg-blue-500' : ''}`}
+              onClick={() => handleTime(idx)}
             >
-              <span className="">{idx}:00</span>
+              <span aria-label={`${idx}:00`}>{idx}:00</span>
             </div>
           ))}
         </div>
-      </span>
-    );
-  };
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex justify-between ">
-        <div className="w-24 px-1">{renderTimePicker({ title: 'Before', selected: timeSelector.Before })}</div>
-        <div className="w-24 px-1">{renderTimePicker({ title: 'After', selected: timeSelector.After })}</div>
       </div>
     </div>
   );