From 686bfef49b4b252ff343c34be8dd09e09feb500e Mon Sep 17 00:00:00 2001 From: Neeraj Kashyap Date: Sun, 22 Aug 2021 08:43:25 -0700 Subject: [PATCH] Got existing frontend working with updated API Currently only renders `"ethereum_blockchain"` events. Moved all stream state into the `useStream` hook. This is how we started and really this is what makes sense rather than putting some pretty heavy logic into the component/view. --- frontend/src/components/EntriesNavigation.js | 167 ++++-------- frontend/src/components/StreamEntry.js | 2 +- .../stream-cards/EthereumMempool.js | 66 +++-- frontend/src/core/constants.js | 2 +- frontend/src/core/hooks/useStream.js | 238 ++++++++++++++---- frontend/src/core/services/index.js | 2 - .../src/core/services/servertime.service.js | 53 ++++ frontend/src/core/services/stream.service.js | 83 +++++- 8 files changed, 424 insertions(+), 189 deletions(-) create mode 100644 frontend/src/core/services/servertime.service.js diff --git a/frontend/src/components/EntriesNavigation.js b/frontend/src/components/EntriesNavigation.js index a761cb1c..99a268e5 100644 --- a/frontend/src/components/EntriesNavigation.js +++ b/frontend/src/components/EntriesNavigation.js @@ -44,7 +44,7 @@ const FILTER_TYPES = { ADDRESS: 0, GAS: 1, GAS_PRICE: 2, - AMMOUNT: 3, + AMOUNT: 3, HASH: 4, DISABLED: 99, }; @@ -63,6 +63,7 @@ const EntriesNavigation = () => { const ui = useContext(UIContext); const { isOpen, onOpen, onClose } = useDisclosure(); const { subscriptionsCache } = useSubscriptions(); + const [entries, setEntries] = useState([]); const [newFilterState, setNewFilterState] = useState([ { type: FILTER_TYPES.ADDRESS, @@ -75,93 +76,44 @@ const EntriesNavigation = () => { const loadMoreButtonRef = useRef(null); - const [streamBoundary, setStreamBoundary] = useState({ - start_time: null, - end_time: null, - include_start: false, - include_end: true, - next_event_time: null, - previous_event_time: null, - }); - - const updateStreamBoundaryWith = (pageBoundary) => { - if (!pageBoundary) { - return streamBoundary; - } - - let newBoundary = { ...streamBoundary }; - // We do not check if there is no overlap between the streamBoundary and the pageBoundary - we assume - // that there *is* an overlap and even if there isn't the stream should gracefully respect the - // pageBoundary because that was the most recent request the user made. - // TODO(zomglings): If there is no overlap in boundaries, replace streamBoundary with pageBoundary. - // No overlap logic: - // if () { - // setStreamBoundary(pageBoundary) - // return pageBoundary - // } - - if ( - !newBoundary.start_time || - (pageBoundary.start_time && - pageBoundary.start_time <= newBoundary.start_time) - ) { - newBoundary.start_time = pageBoundary.start_time; - newBoundary.include_start = - newBoundary.include_start || pageBoundary.include_start; - } - newBoundary.include_start = - newBoundary.include_start || pageBoundary.include_start; - - if ( - !newBoundary.end_time || - (pageBoundary.end_time && pageBoundary.end_time >= newBoundary.end_time) - ) { - newBoundary.end_time = pageBoundary.end_time; - newBoundary.include_end = - newBoundary.include_end || pageBoundary.include_end; - } - - newBoundary.include_end = - newBoundary.include_end || pageBoundary.include_end; - - if ( - !newBoundary.next_event_time || - !pageBoundary.next_event_time || - (pageBoundary.next_event_time && - pageBoundary.next_event_time > newBoundary.next_event_time) - ) { - newBoundary.next_event_time = pageBoundary.next_event_time; - } - - if ( - !newBoundary.previous_event_time || - !pageBoundary.previous_event_time || - (pageBoundary.previous_event_time && - pageBoundary.previous_event_time < newBoundary.previous_event_time) - ) { - newBoundary.previous_event_time = pageBoundary.previous_event_time; - } - setStreamBoundary(newBoundary); - return newBoundary; - }; - - const { EntriesPages, isLoading, refetch, isFetching, remove } = useStream({ - searchQuery: ui.searchTerm, - start_time: streamBoundary.start_time, - end_time: streamBoundary.end_time, - include_start: streamBoundary.include_start, - include_end: streamBoundary.include_end, - updateStreamBoundaryWith: updateStreamBoundaryWith, - streamBoundary: streamBoundary, - setStreamBoundary: setStreamBoundary, - isContent: false, - }); + const { + events, + eventsIsLoading, + eventsRefetch, + eventsIsFetching, + eventsRemove, + latestEvents, + latestEventsIsLoading, + latestEventsRefetch, + latestEventsIsFetching, + nextEvent, + nextEventRefetch, + previousEvent, + previousEventRefetch, + streamBoundary, + setDefaultBoundary, + } = useStream(ui.searchTerm.q); useEffect(() => { if (!streamBoundary.start_time && !streamBoundary.end_time) { - refetch(); + setDefaultBoundary(); + } else { + eventsRefetch(); + latestEventsRefetch(); + nextEventRefetch(); + previousEventRefetch(); } - }, [streamBoundary, refetch]); + }, [streamBoundary]); + + useEffect(() => { + if (events) { + events.then((data) => { + if (data && data.events) { + setEntries(data.events); + } + }); + } + }, [events]); const setFilterProps = useCallback( (filterIdx, props) => { @@ -183,13 +135,6 @@ const EntriesNavigation = () => { } }, [subscriptionsCache, newFilterState, setFilterProps]); - const entriesPagesData = EntriesPages - ? EntriesPages.data.map((page) => { - return page; - }) - : [""]; - - const entries = entriesPagesData.flat(); const canCreate = false; const canDelete = false; @@ -265,7 +210,7 @@ const EntriesNavigation = () => { direction="column" flexGrow={1} > - {entries && !isLoading ? ( + {entries && !eventsIsLoading ? ( <> @@ -476,10 +421,10 @@ const EntriesNavigation = () => { //onScroll={(e) => handleScroll(e)} > - {!isFetching ? ( + {!eventsIsFetching ? (