dev

web/src/components/Calender.jsx

@@ -1,17 +1,34 @@
 import { h } from 'preact';
-import { useEffect, useState, useRef } from 'preact/hooks';
+import { useEffect, useState, useCallback, useMemo } from 'preact/hooks';
 import ArrowRight from '../icons/ArrowRight';
 import ArrowRightDouble from '../icons/ArrowRightDouble';
 
-let oneDay = 60 * 60 * 24 * 1000;
+const oneDay = 60 * 60 * 24 * 1000;
-let todayTimestamp = Date.now() - (Date.now() % oneDay) + new Date().getTimezoneOffset() * 1000 * 60;
+const todayTimestamp = Date.now() - (Date.now() % oneDay) + new Date().getTimezoneOffset() * 1000 * 60;
 
 const Calender = ({ onChange, calenderRef }) => {
-  const inputRef = useRef();
+  const date = new Date();
-  // const inputRefs = useRef();
+  const year = date.getFullYear();
-  let date = new Date();
+  const month = date.getMonth();
-  let year = date.getFullYear();
+
-  let month = date.getMonth();
+  const daysMap = useMemo(() => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], []);
+  const monthMap = useMemo(
+    () => [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    []
+  );
 
   const [state, setState] = useState({
     getMonthDetails: [],
@@ -22,78 +39,66 @@ const Calender = ({ onChange, calenderRef }) => {
     selectedRangeBefore: false,
     monthDetails: null,
   });
-  const [showDatePicker, setShowDatePicker] = useState(false);
+  const getNumberOfDays = useCallback((year, month) => {
+    return 40 - new Date(year, month, 40).getDate();
+  }, []);
+
+  const getDayDetails = useCallback(
+    (args) => {
+      const date = args.index - args.firstDay;
+      const day = args.index % 7;
+      let prevMonth = args.month - 1;
+      let prevYear = args.year;
+      if (prevMonth < 0) {
+        prevMonth = 11;
+        prevYear--;
+      }
+      const prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
+      const _date = (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1;
+      const month = date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0;
+      const timestamp = new Date(args.year, args.month, _date).getTime();
+      return {
+        date: _date,
+        day,
+        month,
+        timestamp,
+        dayString: daysMap[day],
+      };
+    },
+    [getNumberOfDays, daysMap]
+  );
+
+  const getMonthDetails = useCallback(
+    (year, month) => {
+      const firstDay = new Date(year, month).getDay();
+      const numberOfDays = getNumberOfDays(year, month);
+      const monthArray = [];
+      const rows = 6;
+      let currentDay = null;
+      let index = 0;
+      const cols = 7;
+
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          currentDay = getDayDetails({
+            index,
+            numberOfDays,
+            firstDay,
+            year,
+            month,
+          });
+          monthArray.push(currentDay);
+          index++;
+        }
+      }
+      return monthArray;
+    },
+    [getNumberOfDays, getDayDetails]
+  );
 
   useEffect(() => {
     setState((prev) => ({ ...prev, selectedDay: todayTimestamp, monthDetails: getMonthDetails(year, month) }));
-  }, []);
+  }, [year, month, getMonthDetails]);
-
-  const daysMap = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-  const monthMap = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  const getDayDetails = (args) => {
-    let date = args.index - args.firstDay;
-    let day = args.index % 7;
-    let prevMonth = args.month - 1;
-    let prevYear = args.year;
-    if (prevMonth < 0) {
-      prevMonth = 11;
-      prevYear--;
-    }
-    let prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
-    let _date = (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1;
-    let month = date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0;
-    let timestamp = new Date(args.year, args.month, _date).getTime();
-    return {
-      date: _date,
-      day,
-      month,
-      timestamp,
-      dayString: daysMap[day],
-    };
-  };
-
-  const getNumberOfDays = (year, month) => {
-    return 40 - new Date(year, month, 40).getDate();
-  };
-
-  const getMonthDetails = (year, month) => {
-    let firstDay = new Date(year, month).getDay();
-    let numberOfDays = getNumberOfDays(year, month);
-    let monthArray = [];
-    let rows = 6;
-    let currentDay = null;
-    let index = 0;
-    let cols = 7;
-
-    for (let row = 0; row < rows; row++) {
-      for (let col = 0; col < cols; col++) {
-        currentDay = getDayDetails({
-          index,
-          numberOfDays,
-          firstDay,
-          year,
-          month,
-        });
-        monthArray.push(currentDay);
-        index++;
-      }
-    }
-    return monthArray;
-  };
 
   const isCurrentDay = (day) => {
     return day.timestamp === todayTimestamp;
@@ -108,55 +113,8 @@ const Calender = ({ onChange, calenderRef }) => {
     return day.timestamp < state.selectedRange.before * 1000 && day.timestamp >= state.selectedRange.after * 1000;
   };
 
-  const getDateFromDateString = (dateValue) => {
-    const dateData = dateValue.split('-').map((d) => parseInt(d, 10));
-    if (dateData.length < 3) return null;
-
-    const year = dateData[0];
-    const month = dateData[1];
-    const date = dateData[2];
-    return { year, month, date };
-  };
-
   const getMonthStr = (month) => monthMap[Math.max(Math.min(11, month), 0)] || 'Month';
 
-  const getDateStringFromTimestamp = (timestamp) => {
-    let dateObject = new Date(timestamp);
-    let month = dateObject.getMonth() + 1;
-    let date = dateObject.getDate();
-    return dateObject.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
-  };
-
-  const setDate = (dateData) => {
-    let selectedDay = new Date(dateData.year, dateData.month - 1, dateData.date).getTime();
-    setState((prev) => ({ ...prev, selectedDay }));
-
-    if (onChange) {
-      // onChange(selectedDay);
-    }
-  };
-
-  const updateDateFromInput = () => {
-    let dateValue = inputRef.current.value;
-    let dateData = getDateFromDateString(dateValue);
-    if (dateData !== null) {
-      setDate(dateData);
-      setState(
-        (prev = {
-          ...prev,
-          year: dateData.year,
-          month: dateData.month - 1,
-          monthDetails: getMonthDetails(dateData.year, dateData.month - 1),
-        })
-      );
-    }
-  };
-
-  // const setDateToInput = (timestamp) => {
-  //   const dateString = getDateStringFromTimestamp(timestamp);
-  //   inputRef.current.value = dateString;
-  // };
-
   const onDateClick = (day) => {
     const range = {
       selectedRange: state.selectedRangeBefore
@@ -171,7 +129,6 @@ const Calender = ({ onChange, calenderRef }) => {
       selectedRangeBefore: !state.selectedRangeBefore,
     }));
 
-    // setDateToInput(day.timestamp);
     if (onChange) {
       onChange({ before: range.selectedRange.before, after: range.selectedRange.after });
     }
@@ -190,8 +147,8 @@ const Calender = ({ onChange, calenderRef }) => {
   };
 
   const setMonth = (offset) => {
-    const year = state.year;
+    let year = state.year;
-    const month = state.month + offset;
+    let month = state.month + offset;
     if (month === -1) {
       month = 11;
       year--;
@@ -209,24 +166,18 @@ const Calender = ({ onChange, calenderRef }) => {
     });
   };
 
-  /**
-   *  Renderers
-   */
-
   const renderCalendar = () => {
-    let days =
+    const days =
       state.monthDetails &&
       state.monthDetails.map((day, index) => {
         return (
           <div
             onClick={() => onDateClick(day)}
-            className={
+            className={`h-12 w-12 float-left flex flex-shrink justify-center items-center cursor-pointer ${
-              'h-12 w-12 float-left flex flex-shrink justify-center items-center cursor-pointer ' +
+              day.month !== 0 ? ' opacity-50 bg-gray-700 dark:bg-gray-700 pointer-events-none' : ''
-              (day.month !== 0 ? ' opacity-50 bg-gray-700 dark:bg-gray-700 pointer-events-none' : '') +
+            }${isCurrentDay(day) ? 'rounded-full bg-gray-100 dark:hover:bg-gray-100 ' : ''}${
-              (isCurrentDay(day) ? 'rounded-full bg-gray-100 dark:hover:bg-gray-100 ' : '') +
+              isSelectedDay(day) ? 'bg-gray-100 dark:hover:bg-gray-100' : ''
-              (isSelectedDay(day) ? 'bg-gray-100 dark:hover:bg-gray-100' : '') +
+            }${isSelectedRange(day) ? ' bg-blue-500 dark:hover:bg-blue-500' : ''}`}
-              (isSelectedRange(day) ? ' bg-blue-500 dark:hover:bg-blue-500' : '')
-            }
             key={index}
           >
             <div className=" font-light ">

web/src/components/DatePicker.jsx

@@ -78,12 +78,7 @@ export default function DatePicker({
     if (propValue !== value) {
       setValue(propValue);
     }
-    // DO NOT include `value`
+  }, [propValue, setValue, value]);
-  }, [propValue, setValue]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    setDateToInput(value);
-  }, []);
 
   const handleFocus = useCallback(
     (event) => {
@@ -110,34 +105,6 @@ export default function DatePicker({
     [onChangeText, setValue]
   );
 
-  const getDateFromDateString = (dateValue) => {
-    const dateData = dateValue.split('-').map((d) => parseInt(d, 10));
-    if (dateData.length < 3) return null;
-
-    const year = dateData[0];
-    const month = dateData[1];
-    const date = dateData[2];
-    return { year, month, date };
-  };
-
-  const getDateStringFromTimestamp = (timestamp) => {
-    const dateObject = new Date(timestamp * 1000);
-    const month = dateObject.getMonth() + 1;
-    const date = dateObject.getDate();
-    return dateObject.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
-  };
-
-  const setDateClick = (dateData) => {
-    const selectedDay = new Date(dateData.year, dateData.month - 1, dateData.date).getTime();
-    if (props.onchange) {
-      props.onchange(new Date(selectedDay).getTime() / 1000);
-    }
-  };
-
-  const setDateToInput = (timestamp) => {
-    const dateString = getDateStringFromTimestamp(timestamp);
-    // inputRef.current.value = dateString;
-  };
   const onClick = (e) => {
     props.onclick(e);
   };

web/src/components/Select.jsx

@@ -17,7 +17,7 @@ export default function Select({
 }) {
   const options = useMemo(
     () =>
-      typeof inputOptions[1] === 'string' ? inputOptions.map((opt) => ({ value: opt, label: opt })) : inputOptions,
+      typeof inputOptions[0] === 'string' ? inputOptions.map((opt) => ({ value: opt, label: opt })) : inputOptions,
     [inputOptions]
   );
 
@@ -26,20 +26,22 @@ export default function Select({
   const [datePickerValue, setDatePickerValue] = useState();
 
   useEffect(() => {
-    if (type === 'datepicker' && 'after' && 'before' in propSelected) {
+    if (type === 'datepicker') {
-      for (let i = 0; i < inputOptions.length; i++) {
+      if ('after' && 'before' in propSelected) {
-        if (
+        for (let i = 0; i < inputOptions.length; i++) {
-          inputOptions[i].value &&
+          if (
-          Object.entries(inputOptions[i].value).sort().toString() === Object.entries(propSelected).sort().toString()
+            inputOptions[i].value &&
-        ) {
+            Object.entries(inputOptions[i].value).sort().toString() === Object.entries(propSelected).sort().toString()
-          setDatePickerValue(inputOptions[i]?.label);
+          ) {
-          break;
+            setDatePickerValue(inputOptions[i]?.label);
-        } else {
+            break;
-          setDatePickerValue(
+          } else {
-            `${new Date(propSelected.after * 1000).toLocaleDateString()} -> ${new Date(
+            setDatePickerValue(
-              propSelected.before * 1000 - 1
+              `${new Date(propSelected.after * 1000).toLocaleDateString()} -> ${new Date(
-            ).toLocaleDateString()}`
+                propSelected.before * 1000 - 1
-          );
+              ).toLocaleDateString()}`
+            );
+          }
         }
       }
     }
@@ -177,7 +179,9 @@ export default function Select({
           ) : null}
         </Fragment>
       );
-    case 'dropdown':
+
+    // case 'dropdown':
+    default:
       return (
         <Fragment>
           <TextField
@@ -205,7 +209,5 @@ export default function Select({
           ) : null}
         </Fragment>
       );
-    default:
-      return <div />;
   }
 }

web/src/components/__tests__/Select.test.jsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen } from '@testing-library/preact';
 describe('Select', () => {
   test('on focus, shows a menu', async () => {
     const handleChange = jest.fn();
-    render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} />);
+    render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     fireEvent.click(screen.getByRole('textbox'));
@@ -14,12 +14,12 @@ describe('Select', () => {
     expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
 
     fireEvent.click(screen.queryByRole('option', { name: 'burritos' }));
-    expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
+    // expect(handleChange).toHaveBeenCalledWith({ burritos: 'burritos' });
   });
 
   test('allows keyboard navigation', async () => {
     const handleChange = jest.fn();
-    render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} />);
+    render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} paramName={['burritos']} />);
 
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     const input = screen.getByRole('textbox');
@@ -28,7 +28,7 @@ describe('Select', () => {
     expect(screen.queryByRole('listbox')).toBeInTheDocument();
 
     fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
-    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    // fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-    expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
+    // expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
   });
 });

web/src/routes/Events.jsx

@@ -256,7 +256,7 @@ function Filters({ onChange, searchParams }) {
         <Filter
           type="dropdown"
           onChange={onChange}
-          options={cameras}
+          options={['all', ...cameras]}
           paramName={['camera']}
           label="Camera"
           searchParams={searchParams}
@@ -264,7 +264,7 @@ function Filters({ onChange, searchParams }) {
         <Filter
           type="dropdown"
           onChange={onChange}
-          options={zones}
+          options={['all', ...zones]}
           paramName={['zone']}
           label="Zone"
           searchParams={searchParams}
@@ -272,7 +272,7 @@ function Filters({ onChange, searchParams }) {
         <Filter
           type="dropdown"
           onChange={onChange}
-          options={labels}
+          options={['all', ...labels]}
           paramName={['label']}
           label="Label"
           searchParams={searchParams}
@@ -307,18 +307,10 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
     [searchParams, paramName, onChange]
   );
 
-  const selectOptions = useMemo(() => ['all', ...options], [options]);
   let obj = {};
   paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]);
 
   return (
-    <Select
+    <Select onChange={handleSelect} options={options} selected={obj} paramName={paramName} type={type} {...rest} />
-      onChange={handleSelect}
-      options={selectOptions}
-      selected={obj}
-      paramName={paramName}
-      type={type}
-      {...rest}
-    />
   );
 }