Feed cache rework #339
@ -1,10 +1,9 @@
|
|||||||
import Dexie, { Table } from "dexie";
|
import Dexie, { Table } from "dexie";
|
||||||
import { TaggedRawEvent, u256 } from "@snort/nostr";
|
import { u256 } from "@snort/nostr";
|
||||||
import { MetadataCache } from "State/Users";
|
import { MetadataCache } from "State/Users";
|
||||||
import { hexToBech32 } from "Util";
|
|
||||||
|
|
||||||
export const NAME = "snortDB";
|
export const NAME = "snortDB";
|
||||||
export const VERSION = 3;
|
export const VERSION = 4;
|
||||||
|
|
||||||
export interface SubCache {
|
export interface SubCache {
|
||||||
id: string;
|
id: string;
|
||||||
@ -15,27 +14,14 @@ export interface SubCache {
|
|||||||
|
|
||||||
const STORES = {
|
const STORES = {
|
||||||
users: "++pubkey, name, display_name, picture, nip05, npub",
|
users: "++pubkey, name, display_name, picture, nip05, npub",
|
||||||
events: "++id, pubkey, created_at",
|
|
||||||
feeds: "++id",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export class SnortDB extends Dexie {
|
export class SnortDB extends Dexie {
|
||||||
users!: Table<MetadataCache>;
|
users!: Table<MetadataCache>;
|
||||||
events!: Table<TaggedRawEvent>;
|
|
||||||
feeds!: Table<SubCache>;
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super(NAME);
|
super(NAME);
|
||||||
this.version(VERSION)
|
this.version(VERSION).stores(STORES);
|
||||||
.stores(STORES)
|
|
||||||
.upgrade(async tx => {
|
|
||||||
await tx
|
|
||||||
.table("users")
|
|
||||||
.toCollection()
|
|
||||||
.modify(user => {
|
|
||||||
user.npub = hexToBech32("npub", user.pubkey);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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" />
|
||||||
|
@ -2,8 +2,7 @@ import { useEffect, useMemo, useReducer, useState } from "react";
|
|||||||
import { TaggedRawEvent } from "@snort/nostr";
|
import { TaggedRawEvent } from "@snort/nostr";
|
||||||
import { Subscriptions } from "@snort/nostr";
|
import { Subscriptions } from "@snort/nostr";
|
||||||
import { System } from "System";
|
import { System } from "System";
|
||||||
import { debounce, unwrap } from "Util";
|
import { debounce } from "Util";
|
||||||
import { db } from "Db";
|
|
||||||
|
|
||||||
export type NoteStore = {
|
export type NoteStore = {
|
||||||
notes: Array<TaggedRawEvent>;
|
notes: Array<TaggedRawEvent>;
|
||||||
@ -80,7 +79,6 @@ export default function useSubscription(
|
|||||||
const [state, dispatch] = useReducer(notesReducer, initStore);
|
const [state, dispatch] = useReducer(notesReducer, initStore);
|
||||||
const [debounceOutput, setDebounceOutput] = useState<number>(0);
|
const [debounceOutput, setDebounceOutput] = useState<number>(0);
|
||||||
const [subDebounce, setSubDebounced] = useState<Subscriptions>();
|
const [subDebounce, setSubDebounced] = useState<Subscriptions>();
|
||||||
const useCache = useMemo(() => options?.cache === true, [options]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (sub) {
|
if (sub) {
|
||||||
@ -97,25 +95,11 @@ export default function useSubscription(
|
|||||||
end: false,
|
end: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (useCache) {
|
|
||||||
// preload notes from db
|
|
||||||
PreloadNotes(subDebounce.Id)
|
|
||||||
.then(ev => {
|
|
||||||
dispatch({
|
|
||||||
type: "EVENT",
|
|
||||||
ev: ev,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(console.warn);
|
|
||||||
}
|
|
||||||
subDebounce.OnEvent = e => {
|
subDebounce.OnEvent = e => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: "EVENT",
|
type: "EVENT",
|
||||||
ev: e,
|
ev: e,
|
||||||
});
|
});
|
||||||
if (useCache) {
|
|
||||||
db.events.put(e);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
subDebounce.OnEnd = c => {
|
subDebounce.OnEnd = c => {
|
||||||
@ -144,15 +128,7 @@ export default function useSubscription(
|
|||||||
System.RemoveSubscription(subDebounce.Id);
|
System.RemoveSubscription(subDebounce.Id);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, [subDebounce, useCache]);
|
}, [subDebounce]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (subDebounce && useCache) {
|
|
||||||
return debounce(500, () => {
|
|
||||||
TrackNotesInFeed(subDebounce.Id, state.notes).catch(console.warn);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [state, useCache]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return debounce(DebounceMs, () => {
|
return debounce(DebounceMs, () => {
|
||||||
@ -174,23 +150,3 @@ export default function useSubscription(
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Lookup cached copy of feed
|
|
||||||
*/
|
|
||||||
const PreloadNotes = async (id: string): Promise<TaggedRawEvent[]> => {
|
|
||||||
const feed = await db.feeds.get(id);
|
|
||||||
if (feed) {
|
|
||||||
const events = await db.events.bulkGet(feed.ids);
|
|
||||||
return events.filter(a => a !== undefined).map(a => unwrap(a));
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
};
|
|
||||||
|
|
||||||
const TrackNotesInFeed = async (id: string, notes: TaggedRawEvent[]) => {
|
|
||||||
const existing = await db.feeds.get(id);
|
|
||||||
const ids = Array.from(new Set([...(existing?.ids || []), ...notes.map(a => a.id)]));
|
|
||||||
const since = notes.reduce((acc, v) => (acc > v.created_at ? v.created_at : acc), +Infinity);
|
|
||||||
const until = notes.reduce((acc, v) => (acc < v.created_at ? v.created_at : acc), -Infinity);
|
|
||||||
await db.feeds.put({ id, ids, since, until });
|
|
||||||
};
|
|
||||||
|
@ -17,7 +17,6 @@ import { SearchRelays, SnortPubKey } from "Const";
|
|||||||
import useEventPublisher from "Feed/EventPublisher";
|
import useEventPublisher from "Feed/EventPublisher";
|
||||||
import useModeration from "Hooks/useModeration";
|
import useModeration from "Hooks/useModeration";
|
||||||
import { IndexedUDB } from "State/Users/Db";
|
import { IndexedUDB } from "State/Users/Db";
|
||||||
import { db } from "Db";
|
|
||||||
import { bech32ToHex } from "Util";
|
import { bech32ToHex } from "Util";
|
||||||
import { NoteCreator } from "Element/NoteCreator";
|
import { NoteCreator } from "Element/NoteCreator";
|
||||||
import Plus from "Icons/Plus";
|
import Plus from "Icons/Plus";
|
||||||
@ -120,15 +119,6 @@ export default function Layout() {
|
|||||||
// cleanup on load
|
// cleanup on load
|
||||||
if (dbType === "indexdDb") {
|
if (dbType === "indexdDb") {
|
||||||
IndexedUDB.ready = true;
|
IndexedUDB.ready = true;
|
||||||
await db.feeds.clear();
|
|
||||||
const now = Math.floor(new Date().getTime() / 1000);
|
|
||||||
|
|
||||||
const cleanupEvents = await db.events
|
|
||||||
.where("created_at")
|
|
||||||
.above(now - 60 * 60)
|
|
||||||
.primaryKeys();
|
|
||||||
console.debug(`Cleanup ${cleanupEvents.length} events`);
|
|
||||||
await db.events.bulkDelete(cleanupEvents);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
console.debug(`Using db: ${dbType}`);
|
console.debug(`Using db: ${dbType}`);
|
||||||
|
@ -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,28 +70,63 @@ export default function RootPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function globalRelaySelector() {
|
||||||
|
if (!isGlobal || !allRelays || allRelays.length === 0) return null;
|
||||||
|
|
||||||
|
const paidRelays = allRelays.filter(a => a.paid);
|
||||||
|
const publicRelays = allRelays.filter(a => !a.paid);
|
||||||
|
return (
|
||||||
|
<div className="flex mb10 f-end">
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="Read global from"
|
||||||
|
description="Label for reading global feed from specific relays"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<select onChange={e => setRelay(allRelays.find(a => a.url === e.target.value))} value={relay?.url}>
|
||||||
|
{paidRelays.length > 0 && (
|
||||||
|
<optgroup label="Paid Relays">
|
||||||
|
{paidRelays.map(a => (
|
||||||
|
<option key={a.url} value={a.url}>
|
||||||
|
{new URL(a.url).host}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
|
)}
|
||||||
|
<optgroup label="Public Relays">
|
||||||
|
{publicRelays.map(a => (
|
||||||
|
<option key={a.url} value={a.url}>
|
||||||
|
{new URL(a.url).host}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return debounce(1_000, () => {
|
if (isGlobal) {
|
||||||
const ret: RelayOption[] = [];
|
return debounce(500, () => {
|
||||||
System.Sockets.forEach((v, k) => {
|
const ret: RelayOption[] = [];
|
||||||
ret.push({
|
System.Sockets.forEach((v, k) => {
|
||||||
url: k,
|
ret.push({
|
||||||
paid: v.Info?.limitation?.payment_required ?? false,
|
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);
|
||||||
});
|
});
|
||||||
ret.sort(a => (a.paid ? 1 : -1));
|
}
|
||||||
|
}, [relays, relay, tab]);
|
||||||
|
|
||||||
if (ret.length > 0 && !relay) {
|
|
||||||
setRelay(ret[0]);
|
|
||||||
}
|
|
||||||
setGlobalRelays(ret);
|
|
||||||
});
|
|
||||||
}, [relays, relay]);
|
|
||||||
|
|
||||||
const isGlobal = loggedOut || tab.value === RootTab.Global.value;
|
|
||||||
const timelineSubect: TimelineSubject = (() => {
|
const timelineSubect: TimelineSubject = (() => {
|
||||||
if (isGlobal) {
|
if (isGlobal) {
|
||||||
return { type: "global", items: [], discriminator: "all" };
|
return { type: "global", items: [], discriminator: `all-${relay?.url}` };
|
||||||
}
|
}
|
||||||
if (tab.value >= 3) {
|
if (tab.value >= 3) {
|
||||||
const hashtag = tab.text.slice(1);
|
const hashtag = tab.text.slice(1);
|
||||||
@ -100,49 +136,29 @@ export default function RootPage() {
|
|||||||
return { type: "pubkey", items: follows, discriminator: "follows" };
|
return { type: "pubkey", items: follows, discriminator: "follows" };
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const paidRelays = globalRelays.filter(a => a.paid);
|
function renderTimeline() {
|
||||||
const publicRelays = globalRelays.filter(a => !a.paid);
|
if (isGlobal && !relay) return null;
|
||||||
return (
|
|
||||||
<>
|
return (
|
||||||
<div className="main-content">
|
|
||||||
{pubKey && <Tabs tabs={tabs} tab={tab} setTab={setTab} />}
|
|
||||||
{isGlobal && globalRelays.length > 0 && (
|
|
||||||
<div className="flex mb10 f-end">
|
|
||||||
<FormattedMessage
|
|
||||||
defaultMessage="Read global from"
|
|
||||||
description="Label for reading global feed from specific relays"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<select onChange={e => setRelay(globalRelays.find(a => a.url === e.target.value))}>
|
|
||||||
{paidRelays.length > 0 && (
|
|
||||||
<optgroup label="Paid Relays">
|
|
||||||
{paidRelays.map(a => (
|
|
||||||
<option key={a.url} value={a.url}>
|
|
||||||
{new URL(a.url).host}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</optgroup>
|
|
||||||
)}
|
|
||||||
<optgroup label="Public Relays">
|
|
||||||
{publicRelays.map(a => (
|
|
||||||
<option key={a.url} value={a.url}>
|
|
||||||
{new URL(a.url).host}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</optgroup>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{followHints()}
|
|
||||||
<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 } 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