useIntersectionObserver

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState, useRef } from 'preact/hooks';
 import { Tr, Td } from '../../../components/Table';
 import Filterable from './filterable';
 import Event from '../../Event';
-import { useIntersectionObserver } from '../../../hooks';
+
 import { memo } from 'preact/compat';
 import { useSearchString } from '../hooks/useSearchString';
 
@@ -24,13 +24,15 @@ const EventsRow = memo(
       score,
       zones,
       numberOfEvents,
-      limit,
       idx,
+      searchString,
+      lastCellRef,
+      removeDefaultSearchKeys,
     },
     i
   ) => {
     const [viewEvent, setViewEvent] = useState(null);
-    const [searchString, setSearchString, removeDefaultSearchKeys] = useSearchString(limit);
+    // const [searchString, setSearchString, removeDefaultSearchKeys] = useSearchString(limit);
     // const ref = useRef();
 
     const viewEventHandler = useCallback(
@@ -59,26 +61,6 @@ const EventsRow = memo(
     //   };
     // }, [setViewEvent, viewEvent]);
 
-    const [entry, setIntersectNode] = useIntersectionObserver();
-
-    const lastCellRef = useCallback(
-      (node) => {
-        if (node !== null && !reachedEnd) {
-          setIntersectNode(node);
-        }
-      },
-      [setIntersectNode, reachedEnd]
-    );
-
-    useEffect(() => {
-      if (entry && entry.isIntersecting) {
-        const { startTime } = entry.target.dataset;
-        const { searchParams } = new URL(window.location);
-        searchParams.set('before', parseFloat(startTime) - 0.0001);
-        setSearchString(limit, searchParams.toString());
-      }
-    }, [entry, limit]);
-
     const start = new Date(parseInt(startTime * 1000, 10));
     const end = new Date(parseInt(endTime * 1000, 10));
     const ref = idx === numberOfEvents - 1 ? lastCellRef : undefined;

web/src/routes/Events/index.jsx

@@ -9,6 +9,7 @@ import { Table, Tbody, Tfoot, Tr, Td } from '../../components/Table';
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'preact/hooks';
 import { reducer, initialState } from './reducer';
 import { useSearchString } from './hooks/useSearchString';
+import { useIntersectionObserver } from '../../hooks';
 
 const API_LIMIT = 25;
 
@@ -52,7 +53,25 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
     },
     [limit, pathname, setSearchString, removeDefaultSearchKeys]
   );
+  const [entry, setIntersectNode] = useIntersectionObserver();
 
+  const lastCellRef = useCallback(
+    (node) => {
+      if (node !== null && !reachedEnd) {
+        setIntersectNode(node);
+      }
+    },
+    [setIntersectNode, reachedEnd]
+  );
+
+  useEffect(() => {
+    if (entry && entry.isIntersecting) {
+      const { startTime } = entry.target.dataset;
+      const { searchParams } = new URL(window.location);
+      searchParams.set('before', parseFloat(startTime) - 0.0001);
+      setSearchString(limit, searchParams.toString());
+    }
+  }, [entry, limit]);
   const searchParams = useMemo(() => new URLSearchParams(searchString), [searchString]);
 
   console.log('counter ' + counter);
@@ -78,8 +97,9 @@ export default function Events({ path: pathname, limit = API_LIMIT } = {}) {
                   pathname={pathname}
                   searchParams={searchParams}
                   limit={API_LIMIT}
-                  setSearchString={setSearchString}
                   handleFilter={handleFilter}
+                  lastCellRef={lastCellRef}
+                  removeDefaultSearchKeys={removeDefaultSearchKeys}
                   {...rest}
                 />
               );