Add initial version.

frontend/src/components/EntriesNavigation.js

@@ -40,6 +40,8 @@ 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";
+import { useQueryClient } from "react-query";
+import { PAGE_SIZE } from "../core/constants";
 
 const FILTER_TYPES = {
   ADDRESS: 0,
@@ -75,7 +77,8 @@ const EntriesNavigation = () => {
     },
   ]);
   const [filterState, setFilterState] = useState([]);
-
+  const queryClient = useQueryClient();
+  console.log(queryClient);
   const loadMoreButtonRef = useRef(null);
 
   const {
@@ -83,6 +86,7 @@ const EntriesNavigation = () => {
     eventsIsLoading,
     eventsRefetch,
     eventsIsFetching,
+    setEvents,
     latestEventsRefetch,
     nextEventRefetch,
     previousEventRefetch,
@@ -90,6 +94,8 @@ const EntriesNavigation = () => {
     setDefaultBoundary,
     loadOlderEvents,
     loadNewerEvents,
+    cursor,
+    setCursor,
   } = useStream(ui.searchTerm.q);
 
   useEffect(() => {
@@ -460,8 +466,64 @@ const EntriesNavigation = () => {
                 <Center>
                   <Button
                     onClick={() => {
-                      loadOlderEvents();
+                      // need change current user view
-                      previousEventRefetch();
+                      // and change cursor to cursor + page_size
+                      console.log(queryClient.getQueryData("stream-events"));
+                      console.log(
+                        "queryClient.getQueryData('stream-events').lenght > cursor + 2 * PAGE_SIZE",
+                        queryClient.getQueryData("stream-events").length >
+                          cursor + 2 * PAGE_SIZE
+                      );
+                      if (
+                        queryClient.getQueryData("stream-events").length >
+                        cursor + 2 * PAGE_SIZE
+                      ) {
+                        console.log("cursor", cursor);
+                        console.log(
+                          "cursor + PAGE_SIZE - 1",
+                          cursor + PAGE_SIZE - 1
+                        );
+                        console.log(
+                          " cursor + 2 * PAGE_SIZE",
+                          cursor + 2 * PAGE_SIZE
+                        );
+                        setEvents(
+                          queryClient
+                            .getQueryData(["stream-events"])
+                            .slice(
+                              cursor + PAGE_SIZE - 1,
+                              cursor + 2 * PAGE_SIZE
+                            )
+                        );
+                        setCursor(cursor + PAGE_SIZE);
+                        console.log(
+                          "setEvents",
+                          queryClient
+                            .getQueryData(["stream-events"])
+                            .slice(
+                              cursor + PAGE_SIZE - 1,
+                              cursor + 2 * PAGE_SIZE
+                            )
+                        );
+                      } else if (
+                        queryClient.getQueryData("stream-events").length ==
+                        cursor + 2 * PAGE_SIZE
+                      ) {
+                        setEvents(
+                          queryClient
+                            .getQueryData("stream-events")
+                            .slice(
+                              cursor + PAGE_SIZE - 1,
+                              cursor + 2 * PAGE_SIZE
+                            )
+                        );
+                        setCursor(cursor + PAGE_SIZE);
+                        loadOlderEvents();
+                        previousEventRefetch();
+                      } else {
+                        loadOlderEvents();
+                        previousEventRefetch();
+                      }
                     }}
                     variant="outline"
                     colorScheme="suggested"

frontend/src/core/constants.js

@@ -33,5 +33,7 @@ export const USER_NAV_PATHES = [
   },
 ];
 
+export const PAGE_SIZE = 50;
+
 export const AWS_ASSETS_PATH = `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets`;
 export const WHITE_LOGO_W_TEXT_URL = `https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/moon-logo%2Btext-white.svg`;

frontend/src/core/hooks/useStream.js

@@ -1,16 +1,19 @@
 import { useState } from "react";
 
 import { StreamService } from "../services";
-import { useQuery } from "react-query";
+import { useQuery, useQueryClient } from "react-query";
 import { queryCacheProps } from "./hookCommon";
 import { defaultStreamBoundary } from "../services/servertime.service.js";
-
+import { PAGE_SIZE } from "../constants";
 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 [cursor, setCursor] = useState(null);
+
+  const queryClient = useQueryClient();
 
   const isStreamBoundaryEmpty = () => {
     return !streamBoundary.start_time && !streamBoundary.end_time;
@@ -84,6 +87,10 @@ const useStream = (q) => {
     return response.data;
   };
 
+  //////////////////////////////////////////////////
+  /// Just load event by current event boundary ///
+  ////////////////////////////////////////////////
+
   const {
     isLoading: eventsIsLoading,
     refetch: eventsRefetch,
@@ -102,13 +109,21 @@ const useStream = (q) => {
       retry: 2,
       onSuccess: (newEvents) => {
         if (newEvents && newEvents.stream_boundary && newEvents.events) {
-          setEvents([...newEvents.events]);
+          setCursor(0);
+
+          queryClient.setQueryData("stream-events", [...newEvents.events]);
+          setEvents(newEvents.events.slice(0, PAGE_SIZE));
+
           updateStreamBoundaryWith(newEvents.stream_boundary, {});
         }
       },
     }
   );
 
+  ///////////////////////////
+  /// Load olders events ///
+  /////////////////////////
+
   const { refetch: loadOlderEvents, isFetching: loadOlderEventsIsFetching } =
     useQuery(
       ["stream-events", streamQuery],
@@ -116,11 +131,11 @@ const useStream = (q) => {
         if (olderEvent) {
           const newStreamBoundary = {
             // 5 minutes before the previous event
-            start_time: olderEvent.event_timestamp - 5 * 60,
+            start_time: olderEvent.event_timestamp - 1 * 60,
             include_start: true,
             // TODO(zomglings): This is a workaround to what seems to be a filter bug on `created_at:<=...` filters
             // on Bugout journals. Please look into it.
-            end_time: olderEvent.event_timestamp + 1,
+            end_time: olderEvent.event_timestamp - 1,
             include_end: false,
           };
           return getEvents(newStreamBoundary);
@@ -132,7 +147,9 @@ const useStream = (q) => {
         retry: 2,
         onSuccess: (newEvents) => {
           if (newEvents && newEvents.stream_boundary && newEvents.events) {
-            setEvents([...newEvents.events, ...events]);
+            queryClient
+              .getQueryData("stream-events")
+              .push([...newEvents.events]);
             updateStreamBoundaryWith(newEvents.stream_boundary, {
               ignoreEnd: true,
             });
@@ -141,6 +158,10 @@ const useStream = (q) => {
       }
     );
 
+  ///////////////////////////
+  /// Load newest events ///
+  /////////////////////////
+
   const { refetch: loadNewerEvents, isFetching: loadNewerEventsIsFetching } =
     useQuery(
       ["stream-events", streamQuery],
@@ -149,7 +170,7 @@ const useStream = (q) => {
           const newStreamBoundary = {
             // TODO(zomglings): This is a workaround to what seems to be a filter bug on `created_at:>=...` filters
             // on Bugout journals. Please look into it.
-            start_time: newerEvent.event_timestamp - 1,
+            start_time: newerEvent.event_timestamp + 1,
             include_start: false,
             // 5 minutes after the next event
             end_time: newerEvent.event_timestamp + 5 * 60,
@@ -164,7 +185,13 @@ const useStream = (q) => {
         retry: 2,
         onSuccess: (newEvents) => {
           if (newEvents && newEvents.stream_boundary && newEvents.events) {
-            setEvents([...events, ...newEvents.events]);
+            //setEvents([...events, ...newEvents.events]);
+            newEvents.events.push(
+              queryClient
+                .getQueryData("stream-events")
+                .push([...newEvents.events])
+            );
+            queryClient.setQueryData("stream-events", newEvents.events);
             updateStreamBoundaryWith(newEvents.stream_boundary, {
               ignoreStart: true,
             });
@@ -178,6 +205,10 @@ const useStream = (q) => {
     return response.data;
   };
 
+  /////////////////////
+  /// latest event ///
+  ///////////////////
+
   const {
     data: latestEvents,
     isLoading: latestEventsIsLoading,
@@ -208,6 +239,10 @@ const useStream = (q) => {
     return response.data;
   };
 
+  ///////////////////////
+  /// get next event ///
+  /////////////////////
+
   const {
     data: nextEvent,
     isLoading: nextEventIsLoading,
@@ -238,6 +273,10 @@ const useStream = (q) => {
     return response.data;
   };
 
+  ///////////////////////////
+  /// get previous event ///
+  /////////////////////////
+
   const {
     data: previousEvent,
     isLoading: previousEventIsLoading,
@@ -268,6 +307,7 @@ const useStream = (q) => {
     eventsRefetch,
     eventsIsFetching,
     eventsRemove,
+    setEvents,
     setStreamQuery,
     latestEvents,
     latestEventsIsLoading,
@@ -288,6 +328,8 @@ const useStream = (q) => {
     loadOlderEventsIsFetching,
     loadNewerEvents,
     loadNewerEventsIsFetching,
+    cursor,
+    setCursor,
   };
 };
 export default useStream;

frontend/src/core/services/stream.service.js

@@ -9,6 +9,8 @@ export const getEvents = ({
   end_time,
   include_start,
   include_end,
+  offset,
+  limit,
 }) => {
   let params = {};
   if (q) {