From 3f260b10c04a5b01024edc04f749f7234e0b3457 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 16 Sep 2021 16:01:01 +0200 Subject: [PATCH] moved state in to DataProvider --- frontend/src/AppContext.js | 9 ++-- frontend/src/components/EntriesNavigation.js | 16 ++----- frontend/src/core/hooks/useStream.js | 19 +------- .../constants.js | 0 .../core/providers/DataProvider/context.js | 5 ++ .../src/core/providers/DataProvider/index.js | 16 +++++++ .../providers/JournalsProvider/context.js | 5 -- .../core/providers/JournalsProvider/index.js | 48 ------------------- frontend/src/core/providers/index.js | 3 +- 9 files changed, 36 insertions(+), 85 deletions(-) rename frontend/src/core/providers/{JournalsProvider => DataProvider}/constants.js (100%) create mode 100644 frontend/src/core/providers/DataProvider/context.js create mode 100644 frontend/src/core/providers/DataProvider/index.js delete mode 100644 frontend/src/core/providers/JournalsProvider/context.js delete mode 100644 frontend/src/core/providers/JournalsProvider/index.js diff --git a/frontend/src/AppContext.js b/frontend/src/AppContext.js index f2c56e74..be63bbf8 100644 --- a/frontend/src/AppContext.js +++ b/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) => { - - {props.children} - + + + {props.children} + + diff --git a/frontend/src/components/EntriesNavigation.js b/frontend/src/components/EntriesNavigation.js index 0e0de26f..349d4938 100644 --- a/frontend/src/components/EntriesNavigation.js +++ b/frontend/src/components/EntriesNavigation.js @@ -1,10 +1,4 @@ -import React, { - useRef, - useEffect, - useContext, - useState, - useCallback, -} from "react"; +import React, { 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, diff --git a/frontend/src/core/hooks/useStream.js b/frontend/src/core/hooks/useStream.js index 51a1891f..b3807147 100644 --- a/frontend/src/core/hooks/useStream.js +++ b/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 () { - // 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) { diff --git a/frontend/src/core/providers/JournalsProvider/constants.js b/frontend/src/core/providers/DataProvider/constants.js similarity index 100% rename from frontend/src/core/providers/JournalsProvider/constants.js rename to frontend/src/core/providers/DataProvider/constants.js diff --git a/frontend/src/core/providers/DataProvider/context.js b/frontend/src/core/providers/DataProvider/context.js new file mode 100644 index 00000000..162ed54e --- /dev/null +++ b/frontend/src/core/providers/DataProvider/context.js @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const DataContext = createContext(); + +export default DataContext; diff --git a/frontend/src/core/providers/DataProvider/index.js b/frontend/src/core/providers/DataProvider/index.js new file mode 100644 index 00000000..b31697a5 --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export default DataProvider; diff --git a/frontend/src/core/providers/JournalsProvider/context.js b/frontend/src/core/providers/JournalsProvider/context.js deleted file mode 100644 index e81c1da1..00000000 --- a/frontend/src/core/providers/JournalsProvider/context.js +++ /dev/null @@ -1,5 +0,0 @@ -import { createContext } from "react"; - -const JournalsContext = createContext(); - -export default JournalsContext; diff --git a/frontend/src/core/providers/JournalsProvider/index.js b/frontend/src/core/providers/JournalsProvider/index.js deleted file mode 100644 index 0da1acae..00000000 --- a/frontend/src/core/providers/JournalsProvider/index.js +++ /dev/null @@ -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 ( -// -// {children} -// -// ); -// }; - -// export default JournalsProvider; diff --git a/frontend/src/core/providers/index.js b/frontend/src/core/providers/index.js index ce179080..4d40077f 100644 --- a/frontend/src/core/providers/index.js +++ b/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";