Add step fixes.

pull/255/head
Andrey Dolgolev 2021-09-14 20:11:35 +03:00
rodzic 87505f7fbe
commit d82a7f0049
3 zmienionych plików z 101 dodań i 47 usunięć

Wyświetl plik

@ -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"

Wyświetl plik

@ -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`;

Wyświetl plik

@ -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,
});