From d82a7f00499efe79ba355fab5361328da607ee82 Mon Sep 17 00:00:00 2001
From: Andrey Dolgolev <andrey@simiotics.com>
Date: Tue, 14 Sep 2021 20:11:35 +0300
Subject: [PATCH] Add step fixes.

---
 frontend/src/components/EntriesNavigation.js | 72 +++++++++++--------
 frontend/src/core/constants.js               |  2 +-
 frontend/src/core/hooks/useStream.js         | 74 +++++++++++++++-----
 3 files changed, 101 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/EntriesNavigation.js b/frontend/src/components/EntriesNavigation.js
index d00ccc49..22ec4819 100644
--- a/frontend/src/components/EntriesNavigation.js
+++ b/frontend/src/components/EntriesNavigation.js
@@ -78,9 +78,9 @@ const EntriesNavigation = () => {
   ]);
   const [filterState, setFilterState] = useState([]);
   const queryClient = useQueryClient();
-  console.log(queryClient);
   const loadMoreButtonRef = useRef(null);
-
+  const [streamCache, setStreamCache] = useState([]);
+  console.log(streamCache);
   const {
     events,
     eventsIsLoading,
@@ -96,7 +96,7 @@ const EntriesNavigation = () => {
     loadNewerEvents,
     cursor,
     setCursor,
-  } = useStream(ui.searchTerm.q);
+  } = useStream(ui.searchTerm.q, streamCache, setStreamCache);
 
   useEffect(() => {
     if (!streamBoundary.start_time && !streamBoundary.end_time) {
@@ -145,12 +145,18 @@ const EntriesNavigation = () => {
     }
   }, [subscriptionsCache, newFilterState, setFilterProps]);
 
-  useEffect(() => {
-    if (cursor >= events.length + 2 * PAGE_SIZE) {
-      loadOlderEvents();
-      previousEventRefetch();
-    }
-  }, [events, cursor]);
+  // useEffect(() => {
+  //   if (cursor + PAGE_SIZE >= events.length) {
+  //     console.log("Load more");
+  //     loadOlderEvents();
+  //     previousEventRefetch();
+  //   } else if (events.length == 0) {
+  //     console.log("Load more initial");
+  //     loadOlderEvents();
+  //     previousEventRefetch();
+  //   }
+  //   console.log(events.length);
+  // }, [events, cursor]);
 
   const canCreate = false;
 
@@ -473,30 +479,38 @@ const EntriesNavigation = () => {
                 <Center>
                   <Button
                     onClick={() => {
-                      if (
-                        queryClient.getQueryData("stream-events").length >
-                        cursor + 2 * PAGE_SIZE
-                      ) {
+                      setCursor(cursor + PAGE_SIZE);
+                    }}
+                    variant="outline"
+                    colorScheme="suggested"
+                  >
+                    {" "}
+                    Page++{`${cursor}/${streamCache.length}`}
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      console.log(streamCache.length > cursor + PAGE_SIZE);
+
+                      if (streamCache.length > cursor + PAGE_SIZE) {
                         setEvents(
-                          queryClient
-                            .getQueryData(["stream-events"])
-                            .slice(
-                              cursor + PAGE_SIZE - 1,
-                              cursor + 2 * PAGE_SIZE
-                            )
+                          streamCache.slice(cursor, cursor + PAGE_SIZE)
                         );
-                        setCursor(cursor + PAGE_SIZE);
+                        // console.log(
+                        //   "cursor + PAGE_SIZE - 1",
+                        //   cursor + PAGE_SIZE - 1
+                        // );
+                        // console.log("streamCache.length", streamCache.length);
+
+                        //setCursor(cursor + PAGE_SIZE);
                       } else {
-                        setEvents(
-                          queryClient
-                            .getQueryData(["stream-events"])
-                            .slice(
-                              cursor + PAGE_SIZE - 1,
-                              queryClient.getQueryData(["stream-events"]).length
-                            )
-                        );
-                        setCursor(cursor + PAGE_SIZE);
+                        loadOlderEvents();
+                        previousEventRefetch();
                       }
+                      // } else {
+                      //   setCursor(cursor + PAGE_SIZE);
+                      // loadOlderEvents();
+                      // previousEventRefetch();
+                      // }
                     }}
                     variant="outline"
                     colorScheme="suggested"
diff --git a/frontend/src/core/constants.js b/frontend/src/core/constants.js
index e921d946..245ae792 100644
--- a/frontend/src/core/constants.js
+++ b/frontend/src/core/constants.js
@@ -33,7 +33,7 @@ export const USER_NAV_PATHES = [
   },
 ];
 
-export const PAGE_SIZE = 50;
+export const PAGE_SIZE = 10;
 
 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`;
diff --git a/frontend/src/core/hooks/useStream.js b/frontend/src/core/hooks/useStream.js
index 367bccc8..5b20ccf7 100644
--- a/frontend/src/core/hooks/useStream.js
+++ b/frontend/src/core/hooks/useStream.js
@@ -1,11 +1,11 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { StreamService } from "../services";
 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 useStream = (q, streamCache, setStreamCache) => {
   const [streamQuery, setStreamQuery] = useState(q || "");
   const [events, setEvents] = useState([]);
   const [streamBoundary, setStreamBoundary] = useState({});
@@ -75,6 +75,10 @@ const useStream = (q) => {
     return newBoundary;
   };
 
+  useEffect(() => {
+    setEvents(streamCache ? streamCache.slice(cursor, cursor + PAGE_SIZE) : []);
+  }, [streamCache, cursor, PAGE_SIZE]);
+
   const getEvents = async (customStreamBoundary) => {
     let requestStreamBoundary = customStreamBoundary;
     if (!requestStreamBoundary) {
@@ -109,10 +113,16 @@ const useStream = (q) => {
       retry: 2,
       onSuccess: (newEvents) => {
         if (newEvents && newEvents.stream_boundary && newEvents.events) {
-          setCursor(0);
-
-          queryClient.setQueryData("stream-events", [...newEvents.events]);
-          setEvents(newEvents.events.slice(0, PAGE_SIZE));
+          if (cursor === null) {
+            setCursor(0);
+            console.log("newEvents.events", newEvents.events);
+            setStreamCache([...newEvents.events]);
+            if (newEvents.events.length > PAGE_SIZE) {
+              setEvents(newEvents.events.slice(0, PAGE_SIZE));
+            } else {
+              setEvents(newEvents.events.slice(0, newEvents.events.length));
+            }
+          }
 
           updateStreamBoundaryWith(newEvents.stream_boundary, {});
         }
@@ -135,7 +145,7 @@ const useStream = (q) => {
             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);
@@ -147,9 +157,36 @@ const useStream = (q) => {
         retry: 2,
         onSuccess: (newEvents) => {
           if (newEvents && newEvents.stream_boundary && newEvents.events) {
-            queryClient
-              .getQueryData("stream-events")
-              .push([...newEvents.events]);
+            console.log(" Load olders events");
+
+            let oldEventsList = streamCache;
+
+            console.log("newEvents.stream_boundary", newEvents.stream_boundary);
+            console.log("newEvents.events", newEvents.events);
+
+            setStreamCache([...oldEventsList, ...newEvents.events]);
+
+            // if (newEvents.events.length > PAGE_SIZE) {
+            //   if (streamCache.length > 0) {
+            //     setEvents([
+            //       streamCache[streamCache.length - 1],
+            //       ...newEvents.events.splice(0, PAGE_SIZE),
+            //     ]);
+            //     setCursor(cursor + PAGE_SIZE);
+            //   } else {
+            //     setEvents([...newEvents.events]);
+            //     setCursor(cursor + newEvents.events.length);
+            //   }
+            // } else if (newEvents.events.length <= PAGE_SIZE) {
+            //   setEvents(
+            //     setEvents([
+            //       streamCache[streamCache.length - 1],
+            //       ...newEvents.events.splice(0, newEvents.length),
+            //     ])
+            //   );
+            //   setCursor(cursor + newEvents.events.length);
+            // }
+
             updateStreamBoundaryWith(newEvents.stream_boundary, {
               ignoreEnd: true,
             });
@@ -170,7 +207,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,
@@ -186,12 +223,15 @@ const useStream = (q) => {
         onSuccess: (newEvents) => {
           if (newEvents && newEvents.stream_boundary && newEvents.events) {
             //setEvents([...events, ...newEvents.events]);
-            newEvents.events.push(
-              queryClient
-                .getQueryData("stream-events")
-                .push([...newEvents.events])
-            );
-            queryClient.setQueryData("stream-events", newEvents.events);
+            let oldEventsList = streamCache;
+
+            setStreamCache([...newEvents.events, ...oldEventsList]);
+            // newEvents.events.push(
+            //   queryClient
+            //     .getQueryData("stream-events")
+            //     .push([...newEvents.events])
+            // );
+            // queryClient.setQueryData("stream-events", newEvents.events);
             updateStreamBoundaryWith(newEvents.stream_boundary, {
               ignoreStart: true,
             });