From a7684f390954c5e951aa3d803635610adb3e846c Mon Sep 17 00:00:00 2001 From: Bernt Christian Egeland Date: Sat, 28 Aug 2021 07:51:02 +0200 Subject: [PATCH] searchstring improvement --- web/src/routes/Event.jsx | 15 -------- .../routes/Events/components/filterable.jsx | 1 + web/src/routes/Events/components/index.jsx | 1 + web/src/routes/Events/components/tableRow.jsx | 13 ++++--- .../routes/Events/hooks/useSearchString.jsx | 10 +++--- web/src/routes/Events/index.jsx | 36 +++---------------- 6 files changed, 18 insertions(+), 58 deletions(-) diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx index 9bbd88ab8..9af56c643 100644 --- a/web/src/routes/Event.jsx +++ b/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); }; diff --git a/web/src/routes/Events/components/filterable.jsx b/web/src/routes/Events/components/filterable.jsx index d37250c3f..b23e38eea 100644 --- a/web/src/routes/Events/components/filterable.jsx +++ b/web/src/routes/Events/components/filterable.jsx @@ -28,4 +28,5 @@ const Filterable = ({ onFilter, pathname, searchParams, paramName, name, removeD ); }; + export default Filterable; diff --git a/web/src/routes/Events/components/index.jsx b/web/src/routes/Events/components/index.jsx index 016fb2bad..6c03b671f 100644 --- a/web/src/routes/Events/components/index.jsx +++ b/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'; diff --git a/web/src/routes/Events/components/tableRow.jsx b/web/src/routes/Events/components/tableRow.jsx index 91cb646b9..9a78e7468 100644 --- a/web/src/routes/Events/components/tableRow.jsx +++ b/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} > (scrollToRef[id] = el)} diff --git a/web/src/routes/Events/hooks/useSearchString.jsx b/web/src/routes/Events/hooks/useSearchString.jsx index 06d062d36..1dde57dcc 100644 --- a/web/src/routes/Events/hooks/useSearchString.jsx +++ b/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 }; }; diff --git a/web/src/routes/Events/index.jsx b/web/src/routes/Events/index.jsx index 6e988e87a..85f7b1e99 100644 --- a/web/src/routes/Events/index.jsx +++ b/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} /> ), - [ - reachedEnd, - apiHost, - setSearchString, - handleFilter, - pathname, - removeDefaultSearchKeys, - scrollToRef, - // searchParams, - // searchString, - ] + [apiHost, handleFilter, pathname, scrollToRef] ); - useEffect(() => { - setInterval(() => { - setCounter((prev) => prev + 1); - }, 1000); - }, []); - console.log('main render', counter); + console.log('main render'); return (
Events - -