diff --git a/src/App.tsx b/src/App.tsx index 52c1bfbe..c7b29d1e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -120,6 +120,15 @@ function AppRoutes({ /> } /> + + } + /> = ({ relayPool, onLogout }) => { const meTab = location.pathname === '/me' ? 'highlights' : location.pathname === '/me/highlights' ? 'highlights' : location.pathname === '/me/reading-list' ? 'reading-list' : - location.pathname === '/me/reads' ? 'reads' : + location.pathname.startsWith('/me/reads') ? 'reads' : location.pathname === '/me/links' ? 'links' : location.pathname === '/me/writings' ? 'writings' : 'highlights' diff --git a/src/components/Me.tsx b/src/components/Me.tsx index b84e3597..6d49ebea 100644 --- a/src/components/Me.tsx +++ b/src/components/Me.tsx @@ -5,7 +5,7 @@ import { Hooks } from 'applesauce-react' import { BlogPostSkeleton, HighlightSkeleton, BookmarkSkeleton } from './Skeletons' import { RelayPool } from 'applesauce-relay' import { nip19 } from 'nostr-tools' -import { useNavigate } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import { Highlight } from '../types/highlights' import { HighlightItem } from './HighlightItem' import { fetchHighlights } from '../services/highlightService' @@ -44,6 +44,7 @@ type TabType = 'highlights' | 'reading-list' | 'reads' | 'links' | 'writings' const Me: React.FC = ({ relayPool, activeTab: propActiveTab, pubkey: propPubkey }) => { const activeAccount = Hooks.useActiveAccount() const navigate = useNavigate() + const { filter: urlFilter } = useParams<{ filter?: string }>() const [activeTab, setActiveTab] = useState(propActiveTab || 'highlights') // Use provided pubkey or fall back to active account @@ -61,7 +62,13 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab, pubkey: pr const [viewMode, setViewMode] = useState('cards') const [refreshTrigger, setRefreshTrigger] = useState(0) const [bookmarkFilter, setBookmarkFilter] = useState('all') - const [readingProgressFilter, setReadingProgressFilter] = useState('all') + + // Initialize reading progress filter from URL param + const validFilters: ReadingProgressFilterType[] = ['all', 'unopened', 'started', 'reading', 'completed'] + const initialFilter = urlFilter && validFilters.includes(urlFilter as ReadingProgressFilterType) + ? (urlFilter as ReadingProgressFilterType) + : 'all' + const [readingProgressFilter, setReadingProgressFilter] = useState(initialFilter) // Update local state when prop changes useEffect(() => { @@ -70,6 +77,26 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab, pubkey: pr } }, [propActiveTab]) + // Sync filter state with URL changes + useEffect(() => { + const filterFromUrl = urlFilter && validFilters.includes(urlFilter as ReadingProgressFilterType) + ? (urlFilter as ReadingProgressFilterType) + : 'all' + setReadingProgressFilter(filterFromUrl) + }, [urlFilter]) + + // Handler to change reading progress filter and update URL + const handleReadingProgressFilterChange = (filter: ReadingProgressFilterType) => { + setReadingProgressFilter(filter) + if (activeTab === 'reads') { + if (filter === 'all') { + navigate('/me/reads', { replace: true }) + } else { + navigate(`/me/reads/${filter}`, { replace: true }) + } + } + } + // Tab-specific loading functions const loadHighlightsTab = async () => { if (!viewingPubkey) return @@ -536,7 +563,7 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab, pubkey: pr <> {filteredReads.length === 0 ? (
@@ -583,7 +610,7 @@ const Me: React.FC = ({ relayPool, activeTab: propActiveTab, pubkey: pr <> {filteredLinks.length === 0 ? (