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
(null); const [categoryTitle, setCategoryTitle] = useState(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 (
{loading ? (
Wczytywanie zawartości...
) : !article ? (
Nie znaleziono artykułu.
) : (
{article.type === 'article-with-map' && article.map_photo ? (

{article.title}

{article.published_at && (
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
)}
{article.additional_body && (
)}

Kliknij zdjęcie, aby powiększyć

{article.map_body && (
)}
) : (

{article.title}

{article.published_at && (
Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}
)}
{article.thumbnail && (
)}
{article.additional_body && (
)}
)} {article.photos && article.photos.length > 0 && (

Galeria

{article.photos.map((photo, index) => ( ))}
)}
)}
); }