searchstring improvement

web/src/routes/Event.jsx

@@ -28,21 +28,6 @@ export default function Event({ eventId, close, scrollRef }) {
     }
   }, [data, scrollRef, eventId, shouldScroll]);
 
-  // useEffect(() => {
-  //   const checkIfClickedOutside = (e) => {
-  //     // If the event is open and the clicked target is not within the event window or delete modal,
-  //     // then close the menu
-  //     if (!showDialog && eventRef.current && !eventRef.current.contains(e.target)) {
-  //       close(null);
-  //     }
-  //   };
-  //   document.addEventListener('mousedown', checkIfClickedOutside);
-  //   return () => {
-  //     // Cleanup the
-  //     document.removeEventListener('mousedown', checkIfClickedOutside);
-  //   };
-  // }, [close, showDialog]);
-
   const handleClickDelete = () => {
     setShowDialog(true);
   };

web/src/routes/Events/components/filterable.jsx

@@ -28,4 +28,5 @@ const Filterable = ({ onFilter, pathname, searchParams, paramName, name, removeD
     </Link>
   );
 };
+
 export default Filterable;

web/src/routes/Events/components/index.jsx

@@ -1,2 +1,3 @@
 export { default as TableHead } from './tableHead';
+export { default as TableRow } from './tableRow';
 export { default as Filters } from './filters';

web/src/routes/Events/components/tableRow.jsx

@@ -1,9 +1,10 @@
 import { h, Fragment } from 'preact';
 import { memo } from 'preact/compat';
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback, useState, useMemo } from 'preact/hooks';
 import { Tr, Td } from '../../../components/Table';
 import Filterable from './filterable';
 import Event from '../../Event';
+import { useSearchString } from '../hooks/useSearchString';
 
 const EventsRow = memo(
   ({
@@ -11,26 +12,24 @@ const EventsRow = memo(
     apiHost,
     start_time: startTime,
     end_time: endTime,
-    reachedEnd,
     scrollToRef,
-    searchString,
     lastRowRef,
     handleFilter,
     pathname,
-    searchParams,
+    limit,
     camera,
     label,
     top_score: score,
     zones,
-    removeDefaultSearchKeys,
   }) => {
     const [viewEvent, setViewEvent] = useState(null);
+    const { searchString, removeDefaultSearchKeys } = useSearchString(limit);
+    const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
 
     const viewEventHandler = useCallback(
       (id) => {
         //Toggle event view
         if (viewEvent === id) return setViewEvent(null);
-
         //Set event id to be rendered.
         setViewEvent(id);
       },
@@ -48,7 +47,7 @@ const EventsRow = memo(
               onClick={() => viewEventHandler(id)}
               ref={lastRowRef}
               data-start-time={startTime}
-              data-reached-end={reachedEnd}
+              // data-reached-end={reachedEnd}
             >
               <img
                 ref={(el) => (scrollToRef[id] = el)}

web/src/routes/Events/hooks/useSearchString.jsx

@@ -6,13 +6,13 @@ export const useSearchString = (limit, searchParams) => {
   const { searchParams: initialSearchParams } = new URL(window.location);
   const _searchParams = searchParams || initialSearchParams.toString();
 
-  const [searchString, setSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
+  const [searchString, changeSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
 
-  const changeSearchString = useCallback(
+  const setSearchString = useCallback(
     (limit, searchString) => {
-      setSearchString(`${defaultSearchString(limit)}&${searchString}`);
+      changeSearchString(`${defaultSearchString(limit)}&${searchString}`);
     },
-    [setSearchString]
+    [changeSearchString]
   );
 
   const removeDefaultSearchKeys = useCallback((searchParams) => {
@@ -21,5 +21,5 @@ export const useSearchString = (limit, searchParams) => {
     searchParams.delete('before');
   }, []);
 
-  return [searchString, changeSearchString, removeDefaultSearchKeys];
+  return { searchString, setSearchString, removeDefaultSearchKeys };
 };

web/src/routes/Events/index.jsx

@@ -1,12 +1,11 @@
 import { h } from 'preact';
 import ActivityIndicator from '../../components/ActivityIndicator';
 import Heading from '../../components/Heading';
-import { TableHead, Filters } from './components';
+import { TableHead, Filters, TableRow } from './components';
 import { route } from 'preact-router';
-import TableRow from './components/tableRow';
 import { FetchStatus, useApiHost, useEvents } from '../../api';
 import { Table, Tbody, Tfoot, Tr, Td } from '../../components/Table';
-import { useCallback, useEffect, useMemo, useReducer, useState } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useReducer } from 'preact/hooks';
 import { reducer, initialState } from './reducer';
 import { useSearchString } from './hooks/useSearchString';
 import { useIntersectionObserver } from '../../hooks';
@@ -15,12 +14,9 @@ const API_LIMIT = 25;
 
 export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
   const apiHost = useApiHost();
-  const [searchString, setSearchString, removeDefaultSearchKeys] = useSearchString(limit);
+  const { searchString, setSearchString, removeDefaultSearchKeys } = useSearchString(limit);
-
   const [{ events, reachedEnd, searchStrings, deleted }, dispatch] = useReducer(reducer, initialState);
-
   const { data, status, deletedId } = useEvents(searchString);
-  const [counter, setCounter] = useState(0);
 
   const scrollToRef = useMemo(() => Object, []);
 
@@ -76,42 +72,20 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
         key={props.id}
         apiHost={apiHost}
         scrollToRef={scrollToRef}
-        reachedEnd={reachedEnd}
-        setSearchString={setSearchString}
         pathname={pathname}
-        searchParams={searchParams}
         limit={API_LIMIT}
-        searchString={searchString}
         handleFilter={handleFilter}
-        removeDefaultSearchKeys={removeDefaultSearchKeys}
         {...props}
       />
     ),
-    [
+    [apiHost, handleFilter, pathname, scrollToRef]
-      reachedEnd,
-      apiHost,
-      setSearchString,
-      handleFilter,
-      pathname,
-      removeDefaultSearchKeys,
-      scrollToRef,
-      // searchParams,
-      // searchString,
-    ]
   );
-  useEffect(() => {
-    setInterval(() => {
-      setCounter((prev) => prev + 1);
-    }, 1000);
-  }, []);
 
-  console.log('main render', counter);
+  console.log('main render');
   return (
     <div className="space-y-4 w-full">
       <Heading>Events</Heading>
-
       <Filters onChange={handleFilter} searchParams={searchParams} />
-
       <div className="min-w-0 overflow-auto">
         <Table className="min-w-full table-fixed">
           <TableHead />