From a1fd4bfc948f14d1e21282ff80cf795c890dba11 Mon Sep 17 00:00:00 2001 From: Gigi Date: Sat, 18 Oct 2025 21:28:42 +0200 Subject: [PATCH] feat: use highlights controller in Explore page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Pass myHighlights from controller through App.tsx → Bookmarks → Explore - Merge controller highlights with friends/nostrverse highlights - Seed Explore with myHighlights immediately (no re-fetch needed) - Eliminate redundant fetching of user's own highlights - Improve performance and consistency across the app Benefits: - User's highlights appear instantly in /explore (already loaded) - No duplicate fetching of same data - DRY principle - single source of truth for user highlights - Better offline support (highlights from controller are in event store) --- src/App.tsx | 14 ++++++++++++++ src/components/Bookmarks.tsx | 7 +++++-- src/components/Explore.tsx | 18 ++++++++++++++---- 3 files changed, 33 insertions(+), 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 03382256..ae43adb4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -165,6 +165,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -177,6 +178,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -189,6 +191,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -201,6 +204,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -213,6 +217,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -225,6 +230,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -241,6 +247,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -253,6 +260,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -265,6 +273,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -277,6 +286,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -289,6 +299,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -301,6 +312,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -313,6 +325,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> @@ -325,6 +338,7 @@ function AppRoutes({ bookmarks={bookmarks} bookmarksLoading={bookmarksLoading} onRefreshBookmarks={handleRefreshBookmarks} + myHighlights={highlights} /> } /> diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index f8617898..bc4f4494 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -14,6 +14,7 @@ import { useBookmarksUI } from '../hooks/useBookmarksUI' import { useRelayStatus } from '../hooks/useRelayStatus' import { useOfflineSync } from '../hooks/useOfflineSync' import { Bookmark } from '../types/bookmarks' +import { Highlight } from '../types/highlights' import ThreePaneLayout from './ThreePaneLayout' import Explore from './Explore' import Me from './Me' @@ -28,6 +29,7 @@ interface BookmarksProps { bookmarks: Bookmark[] bookmarksLoading: boolean onRefreshBookmarks: () => Promise + myHighlights: Highlight[] } const Bookmarks: React.FC = ({ @@ -35,7 +37,8 @@ const Bookmarks: React.FC = ({ onLogout, bookmarks, bookmarksLoading, - onRefreshBookmarks + onRefreshBookmarks, + myHighlights }) => { const { naddr, npub } = useParams<{ naddr?: string; npub?: string }>() const location = useLocation() @@ -322,7 +325,7 @@ const Bookmarks: React.FC = ({ onCreateHighlight={handleCreateHighlight} hasActiveAccount={!!(activeAccount && relayPool)} explore={showExplore ? ( - relayPool ? : null + relayPool ? : null ) : undefined} me={showMe ? ( relayPool ? : null diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx index fae4c2ad..0c579ab6 100644 --- a/src/components/Explore.tsx +++ b/src/components/Explore.tsx @@ -28,11 +28,12 @@ interface ExploreProps { eventStore: IEventStore settings?: UserSettings activeTab?: TabType + myHighlights?: Highlight[] // From highlightsController in App.tsx } type TabType = 'writings' | 'highlights' -const Explore: React.FC = ({ relayPool, eventStore, settings, activeTab: propActiveTab }) => { +const Explore: React.FC = ({ relayPool, eventStore, settings, activeTab: propActiveTab, myHighlights = [] }) => { const activeAccount = Hooks.useActiveAccount() const navigate = useNavigate() const [activeTab, setActiveTab] = useState(propActiveTab || 'highlights') @@ -77,6 +78,15 @@ const Explore: React.FC = ({ relayPool, eventStore, settings, acti if (cachedHighlights && cachedHighlights.length > 0) { setHighlights(prev => prev.length === 0 ? cachedHighlights : prev) } + + // Seed with myHighlights from controller (already loaded on app start) + if (myHighlights.length > 0) { + setHighlights(prev => { + const byId = new Map(prev.map(h => [h.id, h])) + for (const h of myHighlights) byId.set(h.id, h) + return Array.from(byId.values()).sort((a, b) => b.created_at - a.created_at) + }) + } // Fetch the user's contacts (friends) const contacts = await fetchContacts( @@ -180,8 +190,8 @@ const Explore: React.FC = ({ relayPool, eventStore, settings, acti return timeB - timeA }) - // Merge and deduplicate all highlights - const allHighlights = [...friendsHighlights, ...nostriverseHighlights] + // Merge and deduplicate all highlights (mine from controller + friends + nostrverse) + const allHighlights = [...myHighlights, ...friendsHighlights, ...nostriverseHighlights] const highlightsByKey = new Map() for (const highlight of allHighlights) { highlightsByKey.set(highlight.id, highlight) @@ -211,7 +221,7 @@ const Explore: React.FC = ({ relayPool, eventStore, settings, acti } loadData() - }, [relayPool, activeAccount, refreshTrigger, eventStore, settings]) + }, [relayPool, activeAccount, refreshTrigger, eventStore, settings, myHighlights]) // Pull-to-refresh const { isRefreshing, pullPosition } = usePullToRefresh({