Improve related articles display to exclude current article
Update the `RelatedArticles` component to accept and filter by `currentSlug`, preventing the currently viewed article from appearing in the related articles section. Also, remove the category badge from the article page. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 53a34264-831f-46e8-9a51-b1e9f2ebe801 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/cftwqyT Replit-Helium-Checkpoint-Created: true
This commit is contained in:
parent
9dbcd1a93d
commit
20f703b0b5
BIN
attached_assets/image_1772298161849.png
Normal file
BIN
attached_assets/image_1772298161849.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
attached_assets/image_1772298326494.png
Normal file
BIN
attached_assets/image_1772298326494.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
client/public/uploads/folx-stadl-20.jpg
Normal file
BIN
client/public/uploads/folx-stadl-20.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
client/public/uploads/oberkrainer-goes-royal.jpg
Normal file
BIN
client/public/uploads/oberkrainer-goes-royal.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
@ -4,7 +4,6 @@ import { type Article } from "@shared/schema";
|
||||
import { format } from "date-fns";
|
||||
import { de } from "date-fns/locale";
|
||||
import { ArrowLeft, Eye, Calendar, User, Clock } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import Header from "@/components/header";
|
||||
@ -52,18 +51,20 @@ function ArticleSkeleton() {
|
||||
);
|
||||
}
|
||||
|
||||
function RelatedArticles() {
|
||||
function RelatedArticles({ currentSlug }: { currentSlug: string }) {
|
||||
const { data: articles } = useQuery<Article[]>({
|
||||
queryKey: ["/api/articles/popular"],
|
||||
});
|
||||
|
||||
if (!articles || articles.length === 0) return null;
|
||||
const filtered = articles?.filter((a) => a.slug !== currentSlug);
|
||||
|
||||
if (!filtered || filtered.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section className="mt-12 border-t border-border pt-8" data-testid="section-related">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-6">Weitere Artikel</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{articles.slice(0, 3).map((article) => (
|
||||
{filtered.slice(0, 3).map((article) => (
|
||||
<Link key={article.id} href={`/article/${article.slug}`}>
|
||||
<div className="group cursor-pointer" data-testid={`card-related-${article.id}`}>
|
||||
<div className="relative overflow-hidden rounded-md mb-3">
|
||||
@ -145,9 +146,6 @@ export default function ArticlePage() {
|
||||
)}
|
||||
|
||||
<div className="mb-6">
|
||||
<Badge className="mb-3 no-default-active-elevate" data-testid="badge-category">
|
||||
{article.category}
|
||||
</Badge>
|
||||
<h1
|
||||
className="text-3xl md:text-4xl font-bold text-foreground mb-4 leading-tight"
|
||||
data-testid="text-article-title"
|
||||
@ -185,7 +183,7 @@ export default function ArticlePage() {
|
||||
data-testid="article-content"
|
||||
/>
|
||||
|
||||
<RelatedArticles />
|
||||
<RelatedArticles currentSlug={slug || ""} />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user