administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-01 16:55:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

useIntersectionObserver

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-27 18:52:35 +02:00
parent a0de6b7a73
commit 3527c1f14a
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/routes/Events/components/tableRow.jsx
View File

@ -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;

22
web/src/routes/Events/index.jsx
View File

@ -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}
/>
);