feat: redux timeline cache
This commit is contained in:
parent
a49121c05a
commit
e6f64e9b9e
@ -168,7 +168,7 @@ export default function Note(props: NoteProps) {
|
|||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
if (entry && inView && extendable === false) {
|
if (entry && inView && extendable === false) {
|
||||||
const h = entry?.target.clientHeight ?? 0;
|
const h = (entry?.target as HTMLDivElement)?.offsetHeight ?? 0;
|
||||||
if (h > 650) {
|
if (h > 650) {
|
||||||
setExtendable(true);
|
setExtendable(true);
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import "./Timeline.css";
|
import "./Timeline.css";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { useCallback, useMemo } from "react";
|
import { useCallback, useEffect, useMemo } from "react";
|
||||||
import { useInView } from "react-intersection-observer";
|
import { useInView } from "react-intersection-observer";
|
||||||
|
|
||||||
import ArrowUp from "Icons/ArrowUp";
|
import ArrowUp from "Icons/ArrowUp";
|
||||||
import { dedupeByPubkey, tagFilterOfTextRepost } from "Util";
|
import { dedupeById, dedupeByPubkey, tagFilterOfTextRepost } from "Util";
|
||||||
import ProfileImage from "Element/ProfileImage";
|
import ProfileImage from "Element/ProfileImage";
|
||||||
import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
|
import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
|
||||||
import { TaggedRawEvent } from "@snort/nostr";
|
import { TaggedRawEvent } from "@snort/nostr";
|
||||||
@ -16,6 +16,9 @@ import NoteReaction from "Element/NoteReaction";
|
|||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import ProfilePreview from "./ProfilePreview";
|
import ProfilePreview from "./ProfilePreview";
|
||||||
import Skeleton from "Element/Skeleton";
|
import Skeleton from "Element/Skeleton";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { RootState } from "State/Store";
|
||||||
|
import { setTimeline } from "State/Cache";
|
||||||
|
|
||||||
export interface TimelineProps {
|
export interface TimelineProps {
|
||||||
postsOnly: boolean;
|
postsOnly: boolean;
|
||||||
@ -38,7 +41,9 @@ export default function Timeline({
|
|||||||
relay,
|
relay,
|
||||||
}: TimelineProps) {
|
}: TimelineProps) {
|
||||||
const { muted, isMuted } = useModeration();
|
const { muted, isMuted } = useModeration();
|
||||||
const { main, related, latest, parent, loadMore, showLatest } = useTimelineFeed(subject, {
|
const dispatch = useDispatch();
|
||||||
|
const cache = useSelector((s: RootState) => s.cache.timeline);
|
||||||
|
const feed = useTimelineFeed(subject, {
|
||||||
method,
|
method,
|
||||||
window: timeWindow,
|
window: timeWindow,
|
||||||
relay,
|
relay,
|
||||||
@ -52,20 +57,34 @@ export default function Timeline({
|
|||||||
?.filter(a => (postsOnly ? !a.tags.some(b => b[0] === "e") : true))
|
?.filter(a => (postsOnly ? !a.tags.some(b => b[0] === "e") : true))
|
||||||
.filter(a => ignoreModeration || !isMuted(a.pubkey));
|
.filter(a => ignoreModeration || !isMuted(a.pubkey));
|
||||||
},
|
},
|
||||||
[postsOnly, muted]
|
[postsOnly, muted, ignoreModeration]
|
||||||
);
|
);
|
||||||
|
|
||||||
const mainFeed = useMemo(() => {
|
const mainFeed = useMemo(() => {
|
||||||
return filterPosts(main.notes);
|
return filterPosts(cache.main);
|
||||||
}, [main, filterPosts]);
|
}, [cache, filterPosts]);
|
||||||
|
|
||||||
const latestFeed = useMemo(() => {
|
const latestFeed = useMemo(() => {
|
||||||
return filterPosts(latest.notes).filter(a => !mainFeed.some(b => b.id === a.id));
|
return filterPosts(cache.latest).filter(a => !mainFeed.some(b => b.id === a.id));
|
||||||
}, [latest, mainFeed, filterPosts]);
|
}, [cache, filterPosts]);
|
||||||
const latestAuthors = useMemo(() => {
|
const latestAuthors = useMemo(() => {
|
||||||
return dedupeByPubkey(latestFeed).map(e => e.pubkey);
|
return dedupeByPubkey(latestFeed).map(e => e.pubkey);
|
||||||
}, [latestFeed]);
|
}, [latestFeed]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const key = `${subject.type}-${subject.discriminator}`;
|
||||||
|
const newFeed = key !== cache.key;
|
||||||
|
dispatch(
|
||||||
|
setTimeline({
|
||||||
|
key: key,
|
||||||
|
main: dedupeById([...(newFeed ? [] : cache.main), ...feed.main.notes]),
|
||||||
|
latest: [...feed.latest.notes],
|
||||||
|
related: dedupeById([...(newFeed ? [] : cache.related), ...feed.related.notes]),
|
||||||
|
parent: dedupeById([...(newFeed ? [] : cache.parent), ...feed.parent.notes]),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, [feed.main, feed.latest, feed.related, feed.parent]);
|
||||||
|
|
||||||
function eventElement(e: TaggedRawEvent) {
|
function eventElement(e: TaggedRawEvent) {
|
||||||
switch (e.kind) {
|
switch (e.kind) {
|
||||||
case EventKind.SetMetadata: {
|
case EventKind.SetMetadata: {
|
||||||
@ -74,9 +93,9 @@ export default function Timeline({
|
|||||||
case EventKind.TextNote: {
|
case EventKind.TextNote: {
|
||||||
const eRef = e.tags.find(tagFilterOfTextRepost(e))?.at(1);
|
const eRef = e.tags.find(tagFilterOfTextRepost(e))?.at(1);
|
||||||
if (eRef) {
|
if (eRef) {
|
||||||
return <NoteReaction data={e} key={e.id} root={parent.notes.find(a => a.id === eRef)} />;
|
return <NoteReaction data={e} key={e.id} root={cache.parent.find(a => a.id === eRef)} />;
|
||||||
}
|
}
|
||||||
return <Note key={e.id} data={e} related={related.notes} ignoreModeration={ignoreModeration} />;
|
return <Note key={e.id} data={e} related={cache.related} ignoreModeration={ignoreModeration} />;
|
||||||
}
|
}
|
||||||
case EventKind.ZapReceipt: {
|
case EventKind.ZapReceipt: {
|
||||||
const zap = parseZap(e);
|
const zap = parseZap(e);
|
||||||
@ -85,18 +104,17 @@ export default function Timeline({
|
|||||||
case EventKind.Reaction:
|
case EventKind.Reaction:
|
||||||
case EventKind.Repost: {
|
case EventKind.Repost: {
|
||||||
const eRef = e.tags.find(a => a[0] === "e")?.at(1);
|
const eRef = e.tags.find(a => a[0] === "e")?.at(1);
|
||||||
return <NoteReaction data={e} key={e.id} root={parent.notes.find(a => a.id === eRef)} />;
|
return <NoteReaction data={e} key={e.id} root={cache.parent.find(a => a.id === eRef)} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onShowLatest(scrollToTop = false) {
|
function onShowLatest(scrollToTop = false) {
|
||||||
showLatest();
|
feed.showLatest();
|
||||||
if (scrollToTop) {
|
if (scrollToTop) {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
{latestFeed.length > 0 && (
|
{latestFeed.length > 0 && (
|
||||||
@ -126,7 +144,7 @@ export default function Timeline({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{mainFeed.map(eventElement)}
|
{mainFeed.map(eventElement)}
|
||||||
<LoadMore onLoadMore={loadMore} shouldLoadMore={main.end}>
|
<LoadMore onLoadMore={feed.loadMore} shouldLoadMore={feed.main.end}>
|
||||||
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
||||||
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
||||||
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
<Skeleton width="100%" height="120px" margin="0 0 16px 0" />
|
||||||
|
@ -11,7 +11,7 @@ import { System } from "System";
|
|||||||
import { TimelineSubject } from "Feed/TimelineFeed";
|
import { TimelineSubject } from "Feed/TimelineFeed";
|
||||||
|
|
||||||
import messages from "./messages";
|
import messages from "./messages";
|
||||||
import { debounce } from "Util";
|
import { debounce, unwrap } from "Util";
|
||||||
|
|
||||||
interface RelayOption {
|
interface RelayOption {
|
||||||
url: string;
|
url: string;
|
||||||
@ -46,11 +46,12 @@ export default function RootPage() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
const [relay, setRelay] = useState<RelayOption>();
|
const [relay, setRelay] = useState<RelayOption>();
|
||||||
const [globalRelays, setGlobalRelays] = useState<RelayOption[]>([]);
|
const [allRelays, setAllRelays] = useState<RelayOption[]>();
|
||||||
const tagTabs = tags.map((t, idx) => {
|
const tagTabs = tags.map((t, idx) => {
|
||||||
return { text: `#${t}`, value: idx + 3 };
|
return { text: `#${t}`, value: idx + 3 };
|
||||||
});
|
});
|
||||||
const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
|
const tabs = [RootTab.Posts, RootTab.PostsAndReplies, RootTab.Global, ...tagTabs];
|
||||||
|
const isGlobal = loggedOut || tab.value === RootTab.Global.value;
|
||||||
|
|
||||||
function followHints() {
|
function followHints() {
|
||||||
if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
|
if (follows?.length === 0 && pubKey && tab !== RootTab.Global) {
|
||||||
@ -69,51 +70,19 @@ export default function RootPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
function globalRelaySelector() {
|
||||||
return debounce(1_000, () => {
|
if (!isGlobal || !allRelays || allRelays.length === 0) return null;
|
||||||
const ret: RelayOption[] = [];
|
|
||||||
System.Sockets.forEach((v, k) => {
|
|
||||||
ret.push({
|
|
||||||
url: k,
|
|
||||||
paid: v.Info?.limitation?.payment_required ?? false,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
ret.sort(a => (a.paid ? 1 : -1));
|
|
||||||
|
|
||||||
if (ret.length > 0 && !relay) {
|
const paidRelays = allRelays.filter(a => a.paid);
|
||||||
setRelay(ret[0]);
|
const publicRelays = allRelays.filter(a => !a.paid);
|
||||||
}
|
|
||||||
setGlobalRelays(ret);
|
|
||||||
});
|
|
||||||
}, [relays, relay]);
|
|
||||||
|
|
||||||
const isGlobal = loggedOut || tab.value === RootTab.Global.value;
|
|
||||||
const timelineSubect: TimelineSubject = (() => {
|
|
||||||
if (isGlobal) {
|
|
||||||
return { type: "global", items: [], discriminator: "all" };
|
|
||||||
}
|
|
||||||
if (tab.value >= 3) {
|
|
||||||
const hashtag = tab.text.slice(1);
|
|
||||||
return { type: "hashtag", items: [hashtag], discriminator: hashtag };
|
|
||||||
}
|
|
||||||
|
|
||||||
return { type: "pubkey", items: follows, discriminator: "follows" };
|
|
||||||
})();
|
|
||||||
|
|
||||||
const paidRelays = globalRelays.filter(a => a.paid);
|
|
||||||
const publicRelays = globalRelays.filter(a => !a.paid);
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<div className="main-content">
|
|
||||||
{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}
|
|
||||||
{isGlobal && globalRelays.length > 0 && (
|
|
||||||
<div className="flex mb10 f-end">
|
<div className="flex mb10 f-end">
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
defaultMessage="Read global from"
|
defaultMessage="Read global from"
|
||||||
description="Label for reading global feed from specific relays"
|
description="Label for reading global feed from specific relays"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<select onChange={e => setRelay(globalRelays.find(a => a.url === e.target.value))}>
|
<select onChange={e => setRelay(allRelays.find(a => a.url === e.target.value))} value={relay?.url}>
|
||||||
{paidRelays.length > 0 && (
|
{paidRelays.length > 0 && (
|
||||||
<optgroup label="Paid Relays">
|
<optgroup label="Paid Relays">
|
||||||
{paidRelays.map(a => (
|
{paidRelays.map(a => (
|
||||||
@ -132,17 +101,64 @@ export default function RootPage() {
|
|||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
)}
|
);
|
||||||
</div>
|
}
|
||||||
{followHints()}
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isGlobal) {
|
||||||
|
return debounce(500, () => {
|
||||||
|
const ret: RelayOption[] = [];
|
||||||
|
System.Sockets.forEach((v, k) => {
|
||||||
|
ret.push({
|
||||||
|
url: k,
|
||||||
|
paid: v.Info?.limitation?.payment_required ?? false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ret.sort(a => (a.paid ? -1 : 1));
|
||||||
|
|
||||||
|
if (ret.length > 0 && !relay) {
|
||||||
|
setRelay(ret[0]);
|
||||||
|
}
|
||||||
|
setAllRelays(ret);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [relays, relay, tab]);
|
||||||
|
|
||||||
|
const timelineSubect: TimelineSubject = (() => {
|
||||||
|
if (isGlobal) {
|
||||||
|
return { type: "global", items: [], discriminator: `all-${relay?.url}` };
|
||||||
|
}
|
||||||
|
if (tab.value >= 3) {
|
||||||
|
const hashtag = tab.text.slice(1);
|
||||||
|
return { type: "hashtag", items: [hashtag], discriminator: hashtag };
|
||||||
|
}
|
||||||
|
|
||||||
|
return { type: "pubkey", items: follows, discriminator: "follows" };
|
||||||
|
})();
|
||||||
|
|
||||||
|
function renderTimeline() {
|
||||||
|
if (isGlobal && !relay) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
<Timeline
|
<Timeline
|
||||||
key={tab.value}
|
key={tab.value}
|
||||||
subject={timelineSubect}
|
subject={timelineSubect}
|
||||||
postsOnly={tab.value === RootTab.Posts.value}
|
postsOnly={tab.value === RootTab.Posts.value}
|
||||||
method={"TIME_RANGE"}
|
method={"TIME_RANGE"}
|
||||||
window={undefined}
|
window={undefined}
|
||||||
relay={isGlobal ? relay?.url : undefined}
|
relay={isGlobal ? unwrap(relay).url : undefined}
|
||||||
/>
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="main-content">
|
||||||
|
{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}
|
||||||
|
{globalRelaySelector()}
|
||||||
|
</div>
|
||||||
|
{followHints()}
|
||||||
|
{renderTimeline()}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
38
packages/app/src/State/Cache.ts
Normal file
38
packages/app/src/State/Cache.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import { TaggedRawEvent, u256 } from "@snort/nostr";
|
||||||
|
|
||||||
|
export interface TimelineCache {
|
||||||
|
key: string;
|
||||||
|
main: TaggedRawEvent[];
|
||||||
|
related: TaggedRawEvent[];
|
||||||
|
latest: TaggedRawEvent[];
|
||||||
|
parent: TaggedRawEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FeedCache {
|
||||||
|
timeline: TimelineCache;
|
||||||
|
}
|
||||||
|
|
||||||
|
const InitState = {
|
||||||
|
timeline: {
|
||||||
|
key: "",
|
||||||
|
main: [],
|
||||||
|
related: [],
|
||||||
|
latest: [],
|
||||||
|
parent: [],
|
||||||
|
},
|
||||||
|
} as FeedCache;
|
||||||
|
|
||||||
|
const CacheSlice = createSlice({
|
||||||
|
name: "Cache",
|
||||||
|
initialState: InitState,
|
||||||
|
reducers: {
|
||||||
|
setTimeline: (state, action: PayloadAction<TimelineCache>) => {
|
||||||
|
state.timeline = action.payload;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { setTimeline } = CacheSlice.actions;
|
||||||
|
|
||||||
|
export const reducer = CacheSlice.reducer;
|
@ -1,11 +1,13 @@
|
|||||||
import { configureStore } from "@reduxjs/toolkit";
|
import { configureStore } from "@reduxjs/toolkit";
|
||||||
import { reducer as LoginReducer } from "State/Login";
|
import { reducer as LoginReducer } from "State/Login";
|
||||||
import { reducer as UsersReducer } from "State/Users";
|
import { reducer as UsersReducer } from "State/Users";
|
||||||
|
import { reducer as CacheReducer } from "State/Cache";
|
||||||
|
|
||||||
const store = configureStore({
|
const store = configureStore({
|
||||||
reducer: {
|
reducer: {
|
||||||
login: LoginReducer,
|
login: LoginReducer,
|
||||||
users: UsersReducer,
|
users: UsersReducer,
|
||||||
|
cache: CacheReducer,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -177,6 +177,23 @@ export function dedupeByPubkey(events: TaggedRawEvent[]) {
|
|||||||
return deduped.list as TaggedRawEvent[];
|
return deduped.list as TaggedRawEvent[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function dedupeById(events: TaggedRawEvent[]) {
|
||||||
|
const deduped = events.reduce(
|
||||||
|
({ list, seen }: { list: TaggedRawEvent[]; seen: Set<HexKey> }, ev) => {
|
||||||
|
if (seen.has(ev.id)) {
|
||||||
|
return { list, seen };
|
||||||
|
}
|
||||||
|
seen.add(ev.id);
|
||||||
|
return {
|
||||||
|
seen,
|
||||||
|
list: [...list, ev],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
{ list: [], seen: new Set([]) }
|
||||||
|
);
|
||||||
|
return deduped.list as TaggedRawEvent[];
|
||||||
|
}
|
||||||
|
|
||||||
export function unwrap<T>(v: T | undefined | null): T {
|
export function unwrap<T>(v: T | undefined | null): T {
|
||||||
if (v === undefined || v === null) {
|
if (v === undefined || v === null) {
|
||||||
throw new Error("missing value");
|
throw new Error("missing value");
|
||||||
|
Loading…
Reference in New Issue
Block a user