Version 1.0.0
This commit is contained in:
237
resources/js/pages/article.tsx
Normal file
237
resources/js/pages/article.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { ImageLightbox, SingleImageLightbox } from '@/components/image-lightbox';
|
||||
import AttachmentsList from '@/components/attachments-list';
|
||||
|
||||
const truncateText = (text: string, maxLength: number): string => {
|
||||
if (text.length <= maxLength) return text;
|
||||
return text.slice(0, maxLength) + '…';
|
||||
};
|
||||
|
||||
const getBreadcrumbs = (section: string, slug: string, categorySlug: string | null, categoryTitle: string | null): BreadcrumbItem[] => {
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
}
|
||||
];
|
||||
|
||||
if (categorySlug && categoryTitle) {
|
||||
breadcrumbs.push({
|
||||
title: truncateText(categoryTitle, 35),
|
||||
href: '#',
|
||||
disabled: true
|
||||
});
|
||||
}
|
||||
|
||||
breadcrumbs.push({
|
||||
title: truncateText(section, 35),
|
||||
href: '#',
|
||||
disabled: true
|
||||
});
|
||||
|
||||
return breadcrumbs;
|
||||
};
|
||||
|
||||
interface Photo {
|
||||
id: number;
|
||||
image_name: string;
|
||||
image_desc: string;
|
||||
image_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Attachment {
|
||||
id: number;
|
||||
file_name: string;
|
||||
file_path: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
interface Category {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
interface Article {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
additional_body?: string;
|
||||
map_body?: string;
|
||||
active: boolean;
|
||||
type: string;
|
||||
external: number;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
photos: Photo[];
|
||||
attachments: Attachment[];
|
||||
map_photo?: Photo;
|
||||
categories: Category[];
|
||||
}
|
||||
|
||||
interface ArticleApiResponse {
|
||||
articles: Article[];
|
||||
}
|
||||
|
||||
interface ArticlePageProps {
|
||||
slug: string;
|
||||
categorySlug: string | null;
|
||||
}
|
||||
|
||||
export default function ArticlePage(props: ArticlePageProps) {
|
||||
const { slug, categorySlug } = props;
|
||||
const [article, setArticle] = useState<Article | null>(null);
|
||||
const [categoryTitle, setCategoryTitle] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/articles?slug=${encodeURIComponent(slug)}`)
|
||||
.then(response => response.json())
|
||||
.then((data: ArticleApiResponse) => {
|
||||
if (data.articles && data.articles.length > 0) {
|
||||
const fetchedArticle = data.articles[0];
|
||||
setArticle(fetchedArticle);
|
||||
|
||||
if (fetchedArticle.categories && fetchedArticle.categories.length > 0) {
|
||||
const matchingCategory = categorySlug ?
|
||||
fetchedArticle.categories.find(cat => cat.slug === categorySlug) : null;
|
||||
|
||||
if (matchingCategory) {
|
||||
setCategoryTitle(matchingCategory.title);
|
||||
} else if (fetchedArticle.categories.length > 0) {
|
||||
setCategoryTitle(fetchedArticle.categories[0].title);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
setArticle(null);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setArticle(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching article:', error);
|
||||
});
|
||||
}, [slug, categorySlug]);
|
||||
|
||||
const sectionName = article?.title || slug.replace(/-/g, ' ');
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(sectionName, slug, categorySlug, categoryTitle)}>
|
||||
<Head title={`${sectionName ? `${truncateText(sectionName, 35)}` : ''}`}/>
|
||||
<div>
|
||||
<main className={`bg-background ${article?.map_photo ? 'max-w-screen-xl' : 'max-w-screen-lg'} mx-auto px-4 xl:px-0 pt-8 pb-12 min-h-[75vh]`}>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie zawartości...</div>
|
||||
</div>
|
||||
) : !article ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Nie znaleziono artykułu.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{article.type === 'article-with-map' && article.map_photo ? (
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<div className="md:w-1/2">
|
||||
<h1 className="text-3xl font-bold mb-6">{article.title}</h1>
|
||||
|
||||
{article.published_at && (
|
||||
<div className="mb-4 text-foreground">
|
||||
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
|
||||
{article.additional_body && (
|
||||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.additional_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 md:sticky md:top-8">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: article.map_photo.image_path,
|
||||
image_desc: article.map_photo.image_desc || 'Mapa lokalizacyjna'
|
||||
}}
|
||||
/>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
Kliknij zdjęcie, aby powiększyć
|
||||
</p>
|
||||
|
||||
{article.map_body && (
|
||||
<div className="mt-4 p-4">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.map_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-6">{article.title}</h1>
|
||||
|
||||
{article.published_at && (
|
||||
<div className="my-4 text-foreground">
|
||||
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col-reverse md:flex-row gap-8 items-start">
|
||||
<div className="text-foreground content w-full md:flex-1" dangerouslySetInnerHTML={{ __html: article.body }}></div>
|
||||
{article.thumbnail && (
|
||||
<div className="md:max-w-[300px] md:flex-shrink-0">
|
||||
<SingleImageLightbox
|
||||
image={{
|
||||
image_path: article.thumbnail,
|
||||
image_desc: article.title
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{article.additional_body && (
|
||||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||||
<div className="text-foreground content" dangerouslySetInnerHTML={{ __html: article.additional_body }}></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{article.photos && article.photos.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">Galeria</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{article.photos.map((photo, index) => (
|
||||
<ImageLightbox
|
||||
key={photo.id}
|
||||
images={article.photos}
|
||||
initialIndex={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AttachmentsList attachments={article.attachments || []} />
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user