Version 1.0.0
This commit is contained in:
163
resources/js/pages/news/news-details.tsx
Normal file
163
resources/js/pages/news/news-details.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Phone, Mail } from 'lucide-react';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { SingleImageLightbox, ImageLightbox } 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): BreadcrumbItem[] => [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Aktualności',
|
||||
href: '/aktualnosci',
|
||||
},
|
||||
{
|
||||
title: truncateText(section, 35),
|
||||
href: `/aktualnosci/${slug}`,
|
||||
},
|
||||
];
|
||||
|
||||
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 News {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
photos?: Photo[];
|
||||
attachments?: Attachment[];
|
||||
}
|
||||
|
||||
interface NewsApiResponse {
|
||||
articleNews: Record<string, News>;
|
||||
}
|
||||
|
||||
interface NewsPageProps {
|
||||
slug: string;
|
||||
}
|
||||
|
||||
export default function NewsSlug(props: NewsPageProps) {
|
||||
const { slug } = props;
|
||||
const [news, setNews] = useState<NewsApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/news?slug=${encodeURIComponent(slug)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNews(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setNews(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching news:', error);
|
||||
});
|
||||
}, [slug]);
|
||||
|
||||
const sectionName = news && Object.values(news.articleNews)[0]?.title || slug.replace(/-/g, ' ');
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={getBreadcrumbs(sectionName, slug)}>
|
||||
<Head title={`${sectionName ? `${truncateText(sectionName, 35)}` : ''}`}/>
|
||||
<div>
|
||||
<main className="bg-background 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>
|
||||
) : !news || Object.keys(news.articleNews).length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak artykułów.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{Object.values(news.articleNews).map((article) => (
|
||||
<div key={article.id} className="mb-8">
|
||||
{article.thumbnail ? (
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<div className="md:w-1/2">
|
||||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="md:w-1/2 md:sticky md:top-8">
|
||||
<SingleImageLightbox image={{ image_path: article.thumbnail, image_desc: article.title }} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{article.photos && article.photos.length > 0 && (
|
||||
<div className={`mt-8 ${!article.thumbnail ? 'max-w-4xl mx-auto' : ''}`}>
|
||||
<h2 className={`text-2xl font-semibold mb-4 ${!article.thumbnail ? 'text-center' : ''}`}>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 as Array<{
|
||||
id: number;
|
||||
image_path: string;
|
||||
image_desc?: string;
|
||||
}>}
|
||||
initialIndex={index}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="max-w-3xl mx-auto mt-8">
|
||||
<AttachmentsList attachments={article.attachments || []} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
149
resources/js/pages/news/news.tsx
Normal file
149
resources/js/pages/news/news.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { type BreadcrumbItem } from '@/types';
|
||||
import AppLayout from '@/layouts/app-layout';
|
||||
import { Pagination } from '@/components/pagination';
|
||||
|
||||
const breadcrumbs: BreadcrumbItem[] = [
|
||||
{
|
||||
title: 'Strona Główna',
|
||||
href: '/',
|
||||
},
|
||||
{
|
||||
title: 'Aktualności',
|
||||
href: '/aktualnosci',
|
||||
},
|
||||
];
|
||||
|
||||
interface News {
|
||||
id: number;
|
||||
title: string;
|
||||
slug: string;
|
||||
thumbnail: string;
|
||||
body: string;
|
||||
active: boolean;
|
||||
published_at: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user_id: number;
|
||||
}
|
||||
|
||||
interface PaginationData {
|
||||
total: number;
|
||||
per_page: number;
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
}
|
||||
|
||||
interface NewsApiResponse {
|
||||
articleNews: Record<string, News>;
|
||||
pagination: PaginationData;
|
||||
}
|
||||
|
||||
interface NewsProps {
|
||||
page?: string | number;
|
||||
}
|
||||
|
||||
export default function News({ page = 1 }: NewsProps) {
|
||||
const [news, setNews] = useState<NewsApiResponse | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentPage, setCurrentPage] = useState(typeof page === 'string' ? parseInt(page) : page);
|
||||
|
||||
useEffect(() => {
|
||||
const initialPage = typeof page === 'string' ? parseInt(page) : page;
|
||||
if (initialPage !== currentPage) {
|
||||
setCurrentPage(initialPage);
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`/api/news?page=${currentPage}&per_page=10`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setNews(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
setNews(null);
|
||||
setLoading(false);
|
||||
console.error('Error fetching news data:', error);
|
||||
});
|
||||
}, [currentPage]);
|
||||
|
||||
return (
|
||||
<AppLayout breadcrumbs={breadcrumbs}>
|
||||
<Head title="Aktualności"/>
|
||||
<div>
|
||||
<main className="bg-background max-w-screen-xl mx-auto px-4 xl:px-0 pt-8 pb-12">
|
||||
<h1 className="text-3xl font-bold mb-6">Aktualności</h1>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Wczytywanie...</div>
|
||||
</div>
|
||||
) : !news || Object.keys(news.articleNews).length === 0 ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-lg">Brak artykułów.</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="space-y-8 mb-8">
|
||||
{Object.values(news.articleNews).map((article) => {
|
||||
function stripHtml(html: string) {
|
||||
const htmlWithSpaces = html
|
||||
.replace(/<br\s*\/?>/gi, ' ')
|
||||
.replace(/<\/p><p>/gi, ' ')
|
||||
.replace(/<\/div><div>/gi, ' ')
|
||||
.replace(/<\/h[1-6]><h[1-6]>/gi, ' ')
|
||||
.replace(/<\/li><li>/gi, ' ');
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = htmlWithSpaces;
|
||||
|
||||
return (div.textContent || div.innerText || '')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
const plainText = stripHtml(article.body);
|
||||
const shortText = plainText.length > 200
|
||||
? plainText.slice(0, 200).replace(/\s+$/, '') + '…'
|
||||
: plainText;
|
||||
return (
|
||||
<div key={article.id} className="p-6 bg-card rounded-lg shadow-sm">
|
||||
<h2 className="text-2xl font-bold mb-2">{article.title}</h2>
|
||||
<div className="mb-2 text-muted-foreground">Data publikacji: {new Date(article.published_at).toLocaleDateString('pl-PL')}</div>
|
||||
<div className="text-foreground mb-4">{shortText}</div>
|
||||
<a
|
||||
href={`/aktualnosci/${article.slug}`}
|
||||
className="inline-block text-primary dark:text-accent hover:underline font-semibold contrast:font-bold"
|
||||
>
|
||||
Czytaj więcej
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{news.pagination && news.pagination.total > 10 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
lastPage={news.pagination.last_page}
|
||||
onPageChange={(page) => {
|
||||
setCurrentPage(page);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
if (page === 1) {
|
||||
window.history.pushState({}, '', '/aktualnosci');
|
||||
} else {
|
||||
window.history.pushState({}, '', `/aktualnosci?strona=${page}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user