moved state in to DataProvider

frontend/src/AppContext.js

@@ -6,6 +6,7 @@ import {
   UserProvider,
   ModalProvider,
   UIProvider,
+  DataProvider,
 } from "./core/providers";
 import { StripeProvider } from "./core/providers/StripeProvider";
 
@@ -15,9 +16,11 @@ const AppContext = (props) => {
       <ModalProvider>
         <StripeProvider>
           <ChakraProvider theme={theme}>
+            <DataProvider>
               <UIProvider>
                 <AnalyticsProvider>{props.children}</AnalyticsProvider>
               </UIProvider>
+            </DataProvider>
           </ChakraProvider>
         </StripeProvider>
       </ModalProvider>

frontend/src/components/EntriesNavigation.js

@@ -1,10 +1,4 @@
-import React, {
+import React, { useEffect, useContext, useState, useCallback } from "react";
-  useRef,
-  useEffect,
-  useContext,
-  useState,
-  useCallback,
-} from "react";
 import {
   Flex,
   Spinner,
@@ -41,6 +35,7 @@ import useStream from "../core/hooks/useStream";
 import { ImCancelCircle } from "react-icons/im";
 import { previousEvent } from "../core/services/stream.service";
 import { PAGE_SIZE } from "../core/constants";
+import DataContext from "../core/providers/DataProvider/context";
 
 const FILTER_TYPES = {
   ADDRESS: 0,
@@ -62,6 +57,8 @@ const CONDITION = {
 };
 
 const EntriesNavigation = () => {
+  const { cursor, setCursor, streamCache, setStreamCache } =
+    useContext(DataContext);
   const ui = useContext(UIContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { subscriptionsCache } = useSubscriptions();
@@ -75,13 +72,10 @@ const EntriesNavigation = () => {
     },
   ]);
   const [filterState, setFilterState] = useState([]);
-  const loadMoreButtonRef = useRef(null);
+
-  const [streamCache, setStreamCache] = useState([]);
-  const [cursor, setCursor] = useState(0);
   const {
     eventsIsLoading,
     eventsRefetch,
-    eventsIsFetching,
     latestEventsRefetch,
     nextEventRefetch,
     previousEventRefetch,

frontend/src/core/hooks/useStream.js

@@ -1,11 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
-
 import { StreamService } from "../services";
-import { useQuery, useQueryClient } from "react-query";
+import { useQuery } from "react-query";
 import { queryCacheProps } from "./hookCommon";
 import { defaultStreamBoundary } from "../services/servertime.service.js";
 import { PAGE_SIZE } from "../constants";
-import { useCounter } from "@chakra-ui/counter";
 const useStream = (q, streamCache, setStreamCache, cursor, setCursor) => {
   const [streamQuery, setStreamQuery] = useState(q || "");
   const [events, setEvents] = useState([]);
@@ -33,15 +31,6 @@ const useStream = (q, streamCache, setStreamCache, cursor, setCursor) => {
     }
 
     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 (<no overlap>) {
-    //   setStreamBoundary(pageBoundary)
-    //   return pageBoundary
-    // }
     if (!ignoreStart) {
       if (
         !newBoundary.start_time ||
@@ -75,10 +64,6 @@ const useStream = (q, streamCache, setStreamCache, cursor, setCursor) => {
     return newBoundary;
   };
 
-  useEffect(() => {
-    setEvents(streamCache ? streamCache.slice(cursor, cursor + PAGE_SIZE) : []);
-  }, [streamCache, cursor, PAGE_SIZE]);
-
   const getEvents = async (customStreamBoundary) => {
     let requestStreamBoundary = customStreamBoundary;
     if (!requestStreamBoundary) {

frontend/src/core/providers/DataProvider/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const DataContext = createContext();
+
+export default DataContext;

frontend/src/core/providers/DataProvider/index.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import DataContext from "./context";
+
+const DataProvider = ({ children }) => {
+  const [streamCache, setStreamCache] = useState([]);
+  const [cursor, setCursor] = useState(0);
+  return (
+    <DataContext.Provider
+      value={{ streamCache, setStreamCache, cursor, setCursor }}
+    >
+      {children}
+    </DataContext.Provider>
+  );
+};
+
+export default DataProvider;

frontend/src/core/providers/JournalsProvider/context.js

@@ -1,5 +0,0 @@
-import { createContext } from "react";
-
-const JournalsContext = createContext();
-
-export default JournalsContext;

frontend/src/core/providers/JournalsProvider/index.js

@@ -1,48 +0,0 @@
-// import React, { useContext, useState, useEffect } from "react";
-// // import http from "axios";
-// import { useToast } from "../../hooks";
-// import JournalsContext from "./context";
-// import UserContext from "../UserProvider/context";
-// import { useQuery } from "react-query";
-// import { JournalService } from "../../services";
-
-// const JournalsProvider = ({ children }) => {
-//   const user = useContext(UserContext);
-//   const toast = useToast();
-
-//   const journalsCache = useQuery("journals-list", JournalService.getAll, {
-//     enabled: !!user,
-//     refetchOnWindowFocus: false,
-//     refetchOnMount: false,
-//     refetchOnReconnect: false,
-//     staleTime: 72000,
-//     notifyOnStatusChange: false,
-//     // refetchInterval: 1000,
-//     onError: (error) => {
-//       toast(error, "error");
-//     },
-//   });
-
-//   const getPublicJournals = async (query) => {
-//     const data = await JournalService.getPublicJournals();
-
-//     const newPublicJournals = data.data.journals;
-
-//     return [...newPublicJournals];
-//   };
-
-//   const publicJournalsCache = useQuery(["journals-public"], getPublicJournals, {
-//     enabled: false,
-//     onError: (error) => {
-//       toast(error, "error");
-//     },
-//   });
-
-//   return (
-//     <JournalsContext.Provider value={{permissions: currentUserPermissions, publicJournalsCache, journalsCache }}>
-//       {children}
-//     </JournalsContext.Provider>
-//   );
-// };
-
-// export default JournalsProvider;

frontend/src/core/providers/index.js

@@ -1,6 +1,7 @@
 export { default as AnalyticsProvider } from "./AnalyticsProvider";
-export { default as JournalsProvider } from "./JournalsProvider";
+export { default as JournalsProvider } from "./DataProvider";
 export { default as ModalProvider } from "./ModalProvider";
 export { default as StripeProvider } from "./StripeProvider";
 export { default as UserProvider } from "./UserProvider";
 export { default as UIProvider } from "./UIProvider";
+export { default as DataProvider } from "./DataProvider";