don't reload for you feed on refresh
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
5e1af603b7
commit
ce5fbf0819
@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from "react";
|
|||||||
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
||||||
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
||||||
import useTimelineFeed, { TimelineFeed, TimelineSubject } from "@/Feed/TimelineFeed";
|
import useTimelineFeed, { TimelineFeed, TimelineSubject } from "@/Feed/TimelineFeed";
|
||||||
|
import useHistoryState from "@/Hooks/useHistoryState";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import { dedupeByPubkey } from "@/Utils";
|
import { dedupeByPubkey } from "@/Utils";
|
||||||
|
|
||||||
@ -27,13 +28,15 @@ export interface TimelineProps {
|
|||||||
*/
|
*/
|
||||||
const Timeline = (props: TimelineProps) => {
|
const Timeline = (props: TimelineProps) => {
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const feedOptions = useMemo(() => {
|
const [openedAt] = useHistoryState(Math.floor(Date.now() / 1000), "openedAt");
|
||||||
return {
|
const feedOptions = useMemo(
|
||||||
|
() => ({
|
||||||
method: props.method,
|
method: props.method,
|
||||||
window: props.window,
|
window: props.window,
|
||||||
now: props.now,
|
now: props.now ?? openedAt,
|
||||||
};
|
}),
|
||||||
}, [props]);
|
[props],
|
||||||
|
);
|
||||||
const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
|
const feed: TimelineFeed = useTimelineFeed(props.subject, feedOptions);
|
||||||
const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
|
const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
|
||||||
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
||||||
|
@ -7,6 +7,7 @@ import { Link } from "react-router-dom";
|
|||||||
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
||||||
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
||||||
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
||||||
|
import useHistoryState from "@/Hooks/useHistoryState";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import { dedupeByPubkey } from "@/Utils";
|
import { dedupeByPubkey } from "@/Utils";
|
||||||
|
|
||||||
@ -27,6 +28,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
|
|||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
|
const displayAsInitial = props.displayAs ?? login.feedDisplayAs ?? "list";
|
||||||
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
||||||
|
const [openedAt] = useHistoryState(Math.floor(Date.now() / 1000), "openedAt");
|
||||||
const subject = useMemo(
|
const subject = useMemo(
|
||||||
() =>
|
() =>
|
||||||
({
|
({
|
||||||
@ -41,7 +43,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
|
|||||||
}) as TimelineSubject,
|
}) as TimelineSubject,
|
||||||
[login.follows.item, login.tags.item],
|
[login.follows.item, login.tags.item],
|
||||||
);
|
);
|
||||||
const feed = useTimelineFeed(subject, { method: "TIME_RANGE" } as TimelineFeedOptions);
|
const feed = useTimelineFeed(subject, { method: "TIME_RANGE", now: openedAt } as TimelineFeedOptions);
|
||||||
|
|
||||||
// TODO allow reposts:
|
// TODO allow reposts:
|
||||||
const postsOnly = useCallback(
|
const postsOnly = useCallback(
|
||||||
|
@ -3,7 +3,7 @@ import { useLocation, useNavigationType } from "react-router-dom";
|
|||||||
|
|
||||||
export default function ScrollToTop() {
|
export default function ScrollToTop() {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const navigationType = useNavigationType(); // This hook is available in React Router v6
|
const navigationType = useNavigationType();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (navigationType !== "POP") {
|
if (navigationType !== "POP") {
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
import { EventKind, NostrEvent, RequestBuilder, TaggedNostrEvent } from "@snort/system";
|
import { EventKind, NostrEvent, RequestBuilder, TaggedNostrEvent } from "@snort/system";
|
||||||
import { memo, useEffect, useMemo, useState } from "react";
|
import { memo, useEffect, useMemo, useState } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { Link } from "react-router-dom";
|
import { Link, useNavigationType } from "react-router-dom";
|
||||||
|
|
||||||
import { Relay } from "@/Cache";
|
import { Relay } from "@/Cache";
|
||||||
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
import { DisplayAs, DisplayAsSelector } from "@/Components/Feed/DisplayAsSelector";
|
||||||
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
import { TimelineRenderer } from "@/Components/Feed/TimelineRenderer";
|
||||||
import { TaskList } from "@/Components/Tasks/TaskList";
|
import { TaskList } from "@/Components/Tasks/TaskList";
|
||||||
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
import useTimelineFeed, { TimelineFeedOptions, TimelineSubject } from "@/Feed/TimelineFeed";
|
||||||
|
import useHistoryState from "@/Hooks/useHistoryState";
|
||||||
import useLogin from "@/Hooks/useLogin";
|
import useLogin from "@/Hooks/useLogin";
|
||||||
import messages from "@/Pages/messages";
|
import messages from "@/Pages/messages";
|
||||||
import { System } from "@/system";
|
import { System } from "@/system";
|
||||||
@ -64,9 +65,12 @@ export const ForYouTab = memo(function ForYouTab() {
|
|||||||
const displayAsInitial = feedDisplayAs ?? "list";
|
const displayAsInitial = feedDisplayAs ?? "list";
|
||||||
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
|
||||||
const { publicKey } = useLogin();
|
const { publicKey } = useLogin();
|
||||||
|
const navigationType = useNavigationType();
|
||||||
|
const [openedAt] = useHistoryState(Math.floor(Date.now() / 1000), "openedAt");
|
||||||
|
|
||||||
if (!reactionsRequested && publicKey) {
|
if (!reactionsRequested && publicKey) {
|
||||||
reactionsRequested = true;
|
reactionsRequested = true;
|
||||||
|
// on first load, ask relays for reactions to events by follows
|
||||||
getReactedByFollows(follows.item);
|
getReactedByFollows(follows.item);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,11 +90,15 @@ export const ForYouTab = memo(function ForYouTab() {
|
|||||||
[login.follows.item, login.tags.item],
|
[login.follows.item, login.tags.item],
|
||||||
);
|
);
|
||||||
// also get "follows" feed so data is loaded from relays and there's a fallback if "for you" feed is empty
|
// also get "follows" feed so data is loaded from relays and there's a fallback if "for you" feed is empty
|
||||||
const latestFeed = useTimelineFeed(subject, { method: "TIME_RANGE" } as TimelineFeedOptions);
|
const latestFeed = useTimelineFeed(subject, { method: "TIME_RANGE", now: openedAt } as TimelineFeedOptions);
|
||||||
const filteredLatestFeed = useMemo(() => {
|
const filteredLatestFeed = useMemo(() => {
|
||||||
|
return (
|
||||||
|
latestFeed.main?.filter((ev: NostrEvent) => {
|
||||||
// no replies
|
// no replies
|
||||||
return latestFeed.main?.filter((ev: NostrEvent) => !ev.tags.some((tag: string[]) => tag[0] === "e")) ?? [];
|
return !ev.tags.some((tag: string[]) => tag[0] === "e");
|
||||||
}, [latestFeed.main]);
|
}) ?? []
|
||||||
|
);
|
||||||
|
}, [latestFeed.main, subject]);
|
||||||
|
|
||||||
const getFeed = () => {
|
const getFeed = () => {
|
||||||
if (!publicKey) {
|
if (!publicKey) {
|
||||||
@ -115,7 +123,10 @@ export const ForYouTab = memo(function ForYouTab() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (forYouFeed.events.length < 10 || Date.now() - forYouFeed.created_at > 1000 * 60 * 2) {
|
if (
|
||||||
|
forYouFeed.events.length < 10 ||
|
||||||
|
(navigationType !== "POP" && Date.now() - forYouFeed.created_at > 1000 * 60 * 2)
|
||||||
|
) {
|
||||||
getFeed();
|
getFeed();
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
Loading…
Reference in New Issue
Block a user