Older and newer event paging now works.

frontend/src/components/EntriesNavigation.js

@@ -39,6 +39,7 @@ import UIContext from "../core/providers/UIProvider/context";
 import { FaFilter } from "react-icons/fa";
 import useStream from "../core/hooks/useStream";
 import { ImCancelCircle } from "react-icons/im";
+import { previousEvent } from "../core/services/stream.service";
 
 const FILTER_TYPES = {
   ADDRESS: 0,
@@ -63,6 +64,7 @@ const EntriesNavigation = () => {
   const ui = useContext(UIContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { subscriptionsCache } = useSubscriptions();
+  const [initialized, setInitialized] = useState(false);
   const [entries, setEntries] = useState([]);
   const [newFilterState, setNewFilterState] = useState([
     {
@@ -81,37 +83,30 @@ const EntriesNavigation = () => {
     eventsIsLoading,
     eventsRefetch,
     eventsIsFetching,
-    eventsRemove,
-    latestEvents,
-    latestEventsIsLoading,
     latestEventsRefetch,
-    latestEventsIsFetching,
-    nextEvent,
     nextEventRefetch,
-    previousEvent,
     previousEventRefetch,
     streamBoundary,
     setDefaultBoundary,
+    loadOlderEvents,
+    loadNewerEvents,
   } = useStream(ui.searchTerm.q);
 
   useEffect(() => {
     if (!streamBoundary.start_time && !streamBoundary.end_time) {
       setDefaultBoundary();
-    } else {
+    } else if (!initialized) {
       eventsRefetch();
       latestEventsRefetch();
       nextEventRefetch();
       previousEventRefetch();
+      setInitialized(true);
     }
-  }, [streamBoundary]);
+  }, [streamBoundary, initialized]);
 
   useEffect(() => {
     if (events) {
-      events.then((data) => {
-        if (data && data.events) {
-          setEntries(data.events);
-        }
-      });
+      setEntries(events);
     }
   }, [events]);
 
@@ -424,20 +419,13 @@ const EntriesNavigation = () => {
                 {!eventsIsFetching ? (
                   <Button
                     onClick={() => {
-                      eventsRemove();
-                      setStreamBoundary({
-                        start_time: null,
-                        end_time: null,
-                        include_start: false,
-                        include_end: true,
-                        next_event_time: null,
-                        previous_event_time: null,
-                      });
+                      loadNewerEvents();
+                      nextEventRefetch();
                     }}
                     variant="outline"
                     colorScheme="suggested"
                   >
-                    Refresh to newest
+                    Load newer events
                   </Button>
                 ) : (
                   <Button
@@ -479,21 +467,17 @@ const EntriesNavigation = () => {
                   filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
                 />
               ))}
-              {streamBoundary.previous_event_time && !eventsIsFetching ? (
+              {previousEvent && !eventsIsFetching ? (
                 <Center>
                   <Button
                     onClick={() => {
-                      eventsRemove();
-                      updateStreamBoundaryWith({
-                        start_time: streamBoundary.previous_event_time - 5 * 60,
-                        include_start: false,
-                        include_end: true,
-                      });
+                      loadOlderEvents();
+                      previousEventRefetch();
                     }}
                     variant="outline"
                     colorScheme="suggested"
                   >
-                    Go to previous transaction
+                    Load older events
                   </Button>
                 </Center>
               ) : (

frontend/src/core/hooks/useStream.js

@@ -7,7 +7,10 @@ import { defaultStreamBoundary } from "../services/servertime.service.js";
 
 const useStream = (q) => {
   const [streamQuery, setStreamQuery] = useState(q || "");
+  const [events, setEvents] = useState([]);
   const [streamBoundary, setStreamBoundary] = useState({});
+  const [olderEvent, setOlderEvent] = useState(null);
+  const [newerEvent, setNewerEvent] = useState(null);
 
   const isStreamBoundaryEmpty = () => {
     return !streamBoundary.start_time && !streamBoundary.end_time;
@@ -63,16 +66,19 @@ const useStream = (q) => {
     return newBoundary;
   };
 
-  const getEvents = () => async () => {
+  const getEvents = async (customStreamBoundary) => {
+    let requestStreamBoundary = customStreamBoundary;
+    if (!requestStreamBoundary) {
+      requestStreamBoundary = streamBoundary;
+    }
     const response = await StreamService.getEvents({
-      streamQuery,
-      ...streamBoundary,
+      q: streamQuery,
+      ...requestStreamBoundary,
     });
     return response.data;
   };
 
   const {
-    data: events,
     isLoading: eventsIsLoading,
     refetch: eventsRefetch,
     isFetching: eventsIsFetching,
@@ -90,13 +96,72 @@ const useStream = (q) => {
       keepPreviousData: true,
       retry: 2,
       onSuccess: (newEvents) => {
-        if (newEvents) {
+        if (newEvents && newEvents.stream_boundary && newEvents.events) {
+          setEvents([...newEvents.events]);
           updateStreamBoundaryWith(newEvents.stream_boundary);
         }
       },
     }
   );
 
+  const { refetch: loadOlderEvents, isFetching: loadOlderEventsIsFetching } =
+    useQuery(
+      ["stream-events", streamQuery],
+      () => {
+        if (olderEvent) {
+          const newStreamBoundary = {
+            // 5 minutes before the previous event
+            start_time: olderEvent.event_timestamp - 5 * 60,
+            include_start: true,
+            end_time: streamBoundary.start_time,
+            include_end: !streamBoundary.include_start,
+          };
+          return getEvents(newStreamBoundary);
+        }
+      },
+      {
+        ...queryCacheProps,
+        enabled: false,
+        keepPreviousData: true,
+        retry: 2,
+        onSuccess: (newEvents) => {
+          if (newEvents && newEvents.stream_boundary && newEvents.events) {
+            setEvents([...newEvents.events, ...events]);
+            updateStreamBoundaryWith(newEvents.stream_boundary);
+          }
+        },
+      }
+    );
+
+  const { refetch: loadNewerEvents, isFetching: loadNewerEventsIsFetching } =
+    useQuery(
+      ["stream-events", streamQuery],
+      () => {
+        if (newerEvent) {
+          const newStreamBoundary = {
+            start_time: streamBoundary.end_time,
+            include_start: !streamBoundary.include_end,
+            // 5 minutes after the next event
+            end_time: newerEvent.event_timestamp + 5 * 60,
+            include_end: true,
+          };
+          return getEvents(newStreamBoundary);
+        }
+      },
+      {
+        ...queryCacheProps,
+        enabled: false,
+        keepPreviousData: true,
+        retry: 2,
+        onSuccess: (newEvents) => {
+          if (newEvents && newEvents.stream_boundary && newEvents.events) {
+            setEvents([...events, ...newEvents.events]);
+            updateStreamBoundaryWith(newEvents.stream_boundary);
+          }
+        },
+      }
+    );
+
   const getLatestEvents = async () => {
     const response = await StreamService.latestEvents({ q: streamQuery });
     return response.data;
@@ -128,6 +193,7 @@ const useStream = (q) => {
       q: streamQuery,
       ...streamBoundary,
     });
+    setNewerEvent({ ...response.data });
     return response.data;
   };
 
@@ -157,6 +223,7 @@ const useStream = (q) => {
       q: streamQuery,
       ...streamBoundary,
     });
+    setOlderEvent({ ...response.data });
     return response.data;
   };
 
@@ -206,6 +273,10 @@ const useStream = (q) => {
     previousEventRefetch,
     previousEventIsFetching,
     previousEventRemove,
+    loadOlderEvents,
+    loadOlderEventsIsFetching,
+    loadNewerEvents,
+    loadNewerEventsIsFetching,
   };
 };
 export default useStream;