feat: show latest

src/Element/FollowersList.tsx

@@ -12,7 +12,7 @@ export default function FollowersList({ pubkey }: FollowersListProps) {
     const feed = useFollowersFeed(pubkey);
 
     const pubkeys = useMemo(() => {
-        let contactLists = feed?.notes.filter(a => a.kind === EventKind.ContactList && a.tags.some(b => b[0] === "p" && b[1] === pubkey));
+        let contactLists = feed?.store.notes.filter(a => a.kind === EventKind.ContactList && a.tags.some(b => b[0] === "p" && b[1] === pubkey));
         return [...new Set(contactLists?.map(a => a.pubkey))];
     }, [feed]);
 

src/Element/FollowsList.tsx

@@ -12,7 +12,7 @@ export default function FollowsList({ pubkey }: FollowsListProps) {
     const feed = useFollowsFeed(pubkey);
 
     const pubkeys = useMemo(() => {
-        return getFollowers(feed, pubkey);
+        return getFollowers(feed.store, pubkey);
     }, [feed]);
 
     return <FollowListBase pubkeys={pubkeys} title={`Following ${pubkeys?.length}`} />

src/Element/FollowsYou.tsx

@@ -15,7 +15,7 @@ export default function FollowsYou({ pubkey }: FollowsYouProps ) {
     const loginPubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
 
     const pubkeys = useMemo(() => {
-        return getFollowers(feed, pubkey);
+        return getFollowers(feed.store, pubkey);
     }, [feed]);
 
     const followsMe = pubkeys.includes(loginPubKey!) ?? false ;

src/Element/Timeline.css

@@ -0,0 +1,5 @@
+.latest-notes {
+    cursor: pointer;
+    font-weight: bold;
+    user-select: none;
+}

src/Element/Timeline.tsx

@@ -1,3 +1,4 @@
+import "./Timeline.css";
 import { useMemo } from "react";
 import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
 import { TaggedRawEvent } from "Nostr";
@@ -5,6 +6,8 @@ import EventKind from "Nostr/EventKind";
 import LoadMore from "Element/LoadMore";
 import Note from "Element/Note";
 import NoteReaction from "Element/NoteReaction";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFastForward, faForward } from "@fortawesome/free-solid-svg-icons";
 
 export interface TimelineProps {
     postsOnly: boolean,
@@ -16,18 +19,26 @@ export interface TimelineProps {
  * A list of notes by pubkeys
  */
 export default function Timeline({ subject, postsOnly = false, method }: TimelineProps) {
-    const { main, others, loadMore } = useTimelineFeed(subject, {
+    const { main, related, latest, loadMore, showLatest } = useTimelineFeed(subject, {
         method
     });
 
+    const filterPosts = (notes: TaggedRawEvent[]) => {
+        return [...notes].sort((a, b) => b.created_at - a.created_at)?.filter(a => postsOnly ? !a.tags.some(b => b[0] === "e") : true);
+    }
+
     const mainFeed = useMemo(() => {
-        return main?.sort((a, b) => b.created_at - a.created_at)?.filter(a => postsOnly ? !a.tags.some(b => b[0] === "e") : true);
+        return filterPosts(main.notes);
     }, [main]);
 
+    const latestFeed = useMemo(() => {
+        return filterPosts(latest.notes);
+    }, [latest]);
+
     function eventElement(e: TaggedRawEvent) {
         switch (e.kind) {
             case EventKind.TextNote: {
-                return <Note key={e.id} data={e} related={others} />
+                return <Note key={e.id} data={e} related={related.notes} />
             }
             case EventKind.Reaction:
             case EventKind.Repost: {
@@ -38,6 +49,11 @@ export default function Timeline({ subject, postsOnly = false, method }: Timelin
 
     return (
         <>
+            {latestFeed.length > 0 && (<div className="card latest-notes pointer" onClick={() => showLatest()}>
+                <FontAwesomeIcon icon={faForward}  size="xl"/>
+                &nbsp;
+                Show latest {latestFeed.length} notes
+            </div>)}
             {mainFeed.map(eventElement)}
             {mainFeed.length > 0 ? <LoadMore onLoadMore={loadMore} /> : null}
         </>