diff --git a/src/components/BlogPostCard.tsx b/src/components/BlogPostCard.tsx index 3356be6e..3e221732 100644 --- a/src/components/BlogPostCard.tsx +++ b/src/components/BlogPostCard.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { Link } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCalendar, faUser } from '@fortawesome/free-solid-svg-icons' import { formatDistance } from 'date-fns' @@ -8,10 +9,10 @@ import { Models } from 'applesauce-core' interface BlogPostCardProps { post: BlogPostPreview - onClick: () => void + href: string } -const BlogPostCard: React.FC = ({ post, onClick }) => { +const BlogPostCard: React.FC = ({ post, href }) => { const profile = useEventModel(Models.ProfileModel, [post.author]) const displayName = profile?.name || profile?.display_name || `${post.author.slice(0, 8)}...${post.author.slice(-4)}` @@ -22,10 +23,10 @@ const BlogPostCard: React.FC = ({ post, onClick }) => { }) return ( -
{post.image && (
@@ -52,7 +53,7 @@ const BlogPostCard: React.FC = ({ post, onClick }) => {
- + ) } diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx index c058dcf2..6a5f1702 100644 --- a/src/components/Explore.tsx +++ b/src/components/Explore.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react' -import { useNavigate } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faSpinner, faExclamationCircle, faCompass } from '@fortawesome/free-solid-svg-icons' import { Hooks } from 'applesauce-react' @@ -14,7 +13,6 @@ interface ExploreProps { } const Explore: React.FC = ({ relayPool }) => { - const navigate = useNavigate() const activeAccount = Hooks.useActiveAccount() const [blogPosts, setBlogPosts] = useState([]) const [loading, setLoading] = useState(true) @@ -67,7 +65,7 @@ const Explore: React.FC = ({ relayPool }) => { loadBlogPosts() }, [relayPool, activeAccount]) - const handlePostClick = (post: BlogPostPreview) => { + const getPostUrl = (post: BlogPostPreview) => { // Get the d-tag identifier const dTag = post.event.tags.find(t => t[0] === 'd')?.[1] || '' @@ -78,8 +76,7 @@ const Explore: React.FC = ({ relayPool }) => { identifier: dTag }) - // Navigate to article view - navigate(`/a/${naddr}`) + return `/a/${naddr}` } if (loading) { @@ -120,7 +117,7 @@ const Explore: React.FC = ({ relayPool }) => { t[0] === 'd')?.[1]}`} post={post} - onClick={() => handlePostClick(post)} + href={getPostUrl(post)} /> ))}