diff --git a/src/App.tsx b/src/App.tsx index 6ff70e1e..d8e8dada 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -101,6 +101,15 @@ function AppRoutes({ /> } /> + + } + /> } /> ) diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index c9ea02b6..95442a4f 100644 --- a/src/components/Bookmarks.tsx +++ b/src/components/Bookmarks.tsx @@ -42,7 +42,8 @@ const Bookmarks: React.FC = ({ relayPool, onLogout }) => { const meTab = location.pathname === '/me' ? 'highlights' : location.pathname === '/me/highlights' ? 'highlights' : location.pathname === '/me/reading-list' ? 'reading-list' : - location.pathname === '/me/archive' ? 'archive' : 'highlights' + location.pathname === '/me/archive' ? 'archive' : + location.pathname === '/me/writings' ? 'writings' : 'highlights' // Track previous location for going back from settings/me/explore useEffect(() => { diff --git a/src/components/Me.tsx b/src/components/Me.tsx index 387e4f78..0aa52af7 100644 --- a/src/components/Me.tsx +++ b/src/components/Me.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons' +import { faSpinner, faExclamationCircle, faHighlighter, faBookmark, faList, faThLarge, faImage, faPenToSquare } from '@fortawesome/free-solid-svg-icons' import { Hooks } from 'applesauce-react' import { RelayPool } from 'applesauce-relay' import { nip19 } from 'nostr-tools' @@ -10,7 +10,8 @@ import { HighlightItem } from './HighlightItem' import { fetchHighlights } from '../services/highlightService' import { fetchBookmarks } from '../services/bookmarkService' import { fetchReadArticlesWithData } from '../services/libraryService' -import { BlogPostPreview } from '../services/exploreService' +import { BlogPostPreview, fetchBlogPostsFromAuthors } from '../services/exploreService' +import { RELAYS } from '../config/relays' import { Bookmark, IndividualBookmark } from '../types/bookmarks' import AuthorCard from './AuthorCard' import BlogPostCard from './BlogPostCard' @@ -26,7 +27,7 @@ interface MeProps { activeTab?: TabType } -type TabType = 'highlights' | 'reading-list' | 'archive' +type TabType = 'highlights' | 'reading-list' | 'archive' | 'writings' const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { const activeAccount = Hooks.useActiveAccount() @@ -35,6 +36,7 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { const [highlights, setHighlights] = useState([]) const [bookmarks, setBookmarks] = useState([]) const [readArticles, setReadArticles] = useState([]) + const [writings, setWritings] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [viewMode, setViewMode] = useState('cards') @@ -66,14 +68,16 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { setReadArticles(cached.readArticles) } - // Fetch highlights and read articles - const [userHighlights, userReadArticles] = await Promise.all([ + // Fetch highlights, read articles, and writings + const [userHighlights, userReadArticles, userWritings] = await Promise.all([ fetchHighlights(relayPool, activeAccount.pubkey), - fetchReadArticlesWithData(relayPool, activeAccount.pubkey) + fetchReadArticlesWithData(relayPool, activeAccount.pubkey), + fetchBlogPostsFromAuthors(relayPool, [activeAccount.pubkey], RELAYS) ]) setHighlights(userHighlights) setReadArticles(userReadArticles) + setWritings(userWritings) // Fetch bookmarks using callback pattern let fetchedBookmarks: Bookmark[] = [] @@ -163,7 +167,7 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { .sort((a, b) => ((b.added_at || 0) - (a.added_at || 0)) || ((b.created_at || 0) - (a.created_at || 0))) // Only show full loading screen if we don't have any data yet - const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0 + const hasData = highlights.length > 0 || bookmarks.length > 0 || readArticles.length > 0 || writings.length > 0 if (loading && !hasData) { return ( @@ -274,6 +278,23 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { ) + case 'writings': + return writings.length === 0 ? ( + + No articles written yet. Publish your first article to see it here! + + ) : ( + + {writings.map((post) => ( + + ))} + + ) + default: return null } @@ -318,6 +339,15 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab }) => { Archive ({readArticles.length}) + navigate('/me/writings')} + > + + Writings + ({writings.length}) +
No articles written yet. Publish your first article to see it here!