cialloo
47d6f93e97
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 17s
523 lines
18 KiB
TypeScript
523 lines
18 KiB
TypeScript
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Link } from 'react-router-dom';
|
|
import Layout from '../components/Layout';
|
|
import { listBlogPosts, listBlogTags } from '../blog/api';
|
|
import type { BlogPostSummary, BlogTag } from '../blog/types';
|
|
import '../App.css';
|
|
|
|
const PAGE_SIZE = 6;
|
|
|
|
function formatDate(timestamp: number): string {
|
|
if (!timestamp) {
|
|
return '';
|
|
}
|
|
|
|
const millis = timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp;
|
|
return new Date(millis).toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
function Blog() {
|
|
const { t } = useTranslation();
|
|
|
|
const [tags, setTags] = useState<BlogTag[]>([]);
|
|
const [isLoadingTags, setIsLoadingTags] = useState(false);
|
|
const [tagsError, setTagsError] = useState<string | null>(null);
|
|
|
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
|
|
|
const [posts, setPosts] = useState<BlogPostSummary[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(false);
|
|
const [isLoadingPosts, setIsLoadingPosts] = useState(false);
|
|
const [postError, setPostError] = useState<string | null>(null);
|
|
|
|
const isInitialLoading = isLoadingPosts && posts.length === 0;
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
(async () => {
|
|
setIsLoadingTags(true);
|
|
setTagsError(null);
|
|
try {
|
|
const response = await listBlogTags();
|
|
if (!active) {
|
|
return;
|
|
}
|
|
setTags(response.tags ?? []);
|
|
} catch (error) {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
const message = error instanceof Error ? error.message : 'Failed to load tags';
|
|
setTagsError(message);
|
|
console.error('Failed to load blog tags:', error);
|
|
} finally {
|
|
if (active) {
|
|
setIsLoadingTags(false);
|
|
}
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, []);
|
|
|
|
const fetchPosts = useCallback(
|
|
async (pageToLoad: number, replace = false) => {
|
|
setIsLoadingPosts(true);
|
|
setPostError(null);
|
|
|
|
if (replace) {
|
|
setPosts([]);
|
|
}
|
|
|
|
try {
|
|
const response = await listBlogPosts({
|
|
page: pageToLoad,
|
|
pageSize: PAGE_SIZE,
|
|
tagIds: selectedTags,
|
|
});
|
|
|
|
const total = response.totalCount ?? response.posts.length;
|
|
setPage(pageToLoad);
|
|
|
|
setPosts((previous) => {
|
|
const updated = replace ? response.posts : [...previous, ...response.posts];
|
|
setHasMore(updated.length < total);
|
|
return updated;
|
|
});
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : 'Failed to load posts';
|
|
setPostError(message);
|
|
console.error('Failed to load blog posts:', error);
|
|
} finally {
|
|
setIsLoadingPosts(false);
|
|
}
|
|
},
|
|
[selectedTags]
|
|
);
|
|
|
|
useEffect(() => {
|
|
fetchPosts(1, true);
|
|
}, [fetchPosts]);
|
|
|
|
const featuredPost = useMemo(() => (posts.length > 0 ? posts[0] : null), [posts]);
|
|
const otherPosts = useMemo(() => (featuredPost ? posts.slice(1) : posts), [posts, featuredPost]);
|
|
|
|
const handleLoadMore = () => {
|
|
if (isLoadingPosts || !hasMore) {
|
|
return;
|
|
}
|
|
fetchPosts(page + 1, false);
|
|
};
|
|
|
|
const toggleTag = (tagId: string) => {
|
|
setSelectedTags((current) => {
|
|
if (current.includes(tagId)) {
|
|
return current.filter((id) => id !== tagId);
|
|
}
|
|
return [...current, tagId];
|
|
});
|
|
};
|
|
|
|
const clearTags = () => {
|
|
setSelectedTags([]);
|
|
};
|
|
|
|
return (
|
|
<Layout currentPage="blog">
|
|
<section
|
|
style={{
|
|
padding: '120px 2rem 60px',
|
|
background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: '860px', margin: '0 auto' }}>
|
|
<h1
|
|
style={{
|
|
fontSize: '3.25rem',
|
|
fontWeight: 'bold',
|
|
color: 'var(--text-primary)',
|
|
marginBottom: '1rem',
|
|
}}
|
|
>
|
|
{t('blog.title')}
|
|
</h1>
|
|
<p
|
|
style={{
|
|
fontSize: '1.2rem',
|
|
color: 'var(--text-secondary)',
|
|
lineHeight: 1.6,
|
|
marginBottom: '2.5rem',
|
|
}}
|
|
>
|
|
{t('blog.subtitle')}
|
|
</p>
|
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
|
|
<Link
|
|
to="/blog/create"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
background: 'var(--accent-color)',
|
|
color: 'white',
|
|
padding: '0.9rem 1.8rem',
|
|
borderRadius: '999px',
|
|
fontWeight: 600,
|
|
textDecoration: 'none',
|
|
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
|
|
}}
|
|
onMouseEnter={(event) => {
|
|
event.currentTarget.style.transform = 'translateY(-2px)';
|
|
event.currentTarget.style.boxShadow = '0 6px 18px var(--accent-shadow)';
|
|
}}
|
|
onMouseLeave={(event) => {
|
|
event.currentTarget.style.transform = 'translateY(0)';
|
|
event.currentTarget.style.boxShadow = 'none';
|
|
}}
|
|
>
|
|
{t('blog.readMore')}
|
|
</Link>
|
|
{selectedTags.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={clearTags}
|
|
style={{
|
|
padding: '0.9rem 1.8rem',
|
|
borderRadius: '999px',
|
|
border: '1px solid var(--border-color)',
|
|
background: 'var(--bg-card)',
|
|
color: 'var(--text-secondary)',
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
Clear filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style={{ padding: '40px 2rem 20px' }}>
|
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
|
|
<h2
|
|
style={{
|
|
fontSize: '1.5rem',
|
|
fontWeight: 600,
|
|
color: 'var(--text-primary)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.6rem',
|
|
}}
|
|
>
|
|
Tags
|
|
</h2>
|
|
{isLoadingTags && <span style={{ color: 'var(--text-secondary)', fontSize: '0.95rem' }}>Loading...</span>}
|
|
</div>
|
|
{tagsError && (
|
|
<div
|
|
style={{
|
|
background: 'rgba(244, 67, 54, 0.1)',
|
|
border: '1px solid rgba(244, 67, 54, 0.3)',
|
|
padding: '1rem 1.25rem',
|
|
borderRadius: '10px',
|
|
color: '#F44336',
|
|
marginBottom: '1.5rem',
|
|
}}
|
|
>
|
|
{tagsError}
|
|
</div>
|
|
)}
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
|
|
{tags.map((tag) => {
|
|
const isSelected = selectedTags.includes(tag.tagId);
|
|
return (
|
|
<button
|
|
key={tag.tagId}
|
|
type="button"
|
|
onClick={() => toggleTag(tag.tagId)}
|
|
style={{
|
|
padding: '0.55rem 1.25rem',
|
|
borderRadius: '999px',
|
|
border: isSelected ? 'none' : '1px solid var(--border-color)',
|
|
background: isSelected ? 'var(--accent-color)' : 'var(--bg-card)',
|
|
boxShadow: isSelected ? '0 8px 18px rgba(76, 175, 80, 0.25)' : 'none',
|
|
color: isSelected ? '#fff' : 'var(--text-secondary)',
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.6rem',
|
|
transition: 'all 0.2s ease',
|
|
}}
|
|
>
|
|
<span>{tag.tagName}</span>
|
|
<span
|
|
style={{
|
|
fontSize: '0.8rem',
|
|
padding: '0.15rem 0.45rem',
|
|
borderRadius: '999px',
|
|
background: isSelected ? 'rgba(255, 255, 255, 0.25)' : 'var(--bg-secondary)',
|
|
color: isSelected ? '#fff' : 'var(--text-secondary)',
|
|
}}
|
|
>
|
|
{tag.postCount}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
{!isLoadingTags && tags.length === 0 && !tagsError && (
|
|
<span style={{ color: 'var(--text-secondary)' }}>No tags available yet.</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section style={{ padding: '20px 2rem 80px' }}>
|
|
<div style={{ maxWidth: '1200px', margin: '0 auto' }}>
|
|
{postError && (
|
|
<div
|
|
style={{
|
|
background: 'rgba(244, 67, 54, 0.1)',
|
|
border: '1px solid rgba(244, 67, 54, 0.3)',
|
|
padding: '1rem 1.25rem',
|
|
borderRadius: '10px',
|
|
color: '#F44336',
|
|
marginBottom: '2rem',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: '1rem',
|
|
}}
|
|
>
|
|
<span>{postError}</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => fetchPosts(page || 1, posts.length === 0)}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
borderRadius: '8px',
|
|
border: 'none',
|
|
background: 'var(--accent-color)',
|
|
color: '#fff',
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{featuredPost && (
|
|
<article
|
|
style={{
|
|
background: 'var(--bg-card)',
|
|
border: '1px solid var(--border-color)',
|
|
borderRadius: '16px',
|
|
overflow: 'hidden',
|
|
marginBottom: '3rem',
|
|
boxShadow: '0 12px 32px rgba(0, 0, 0, 0.12)',
|
|
}}
|
|
>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0', alignItems: 'stretch' }}>
|
|
<div style={{ padding: '3rem 3rem 3rem 3.5rem' }}>
|
|
<span
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.4rem',
|
|
background: 'rgba(76, 175, 80, 0.14)',
|
|
color: 'var(--accent-color)',
|
|
padding: '0.4rem 0.9rem',
|
|
borderRadius: '999px',
|
|
fontSize: '0.85rem',
|
|
fontWeight: 600,
|
|
marginBottom: '1rem',
|
|
}}
|
|
>
|
|
Featured
|
|
</span>
|
|
<h2
|
|
style={{
|
|
fontSize: '2.2rem',
|
|
fontWeight: 700,
|
|
color: 'var(--text-primary)',
|
|
lineHeight: 1.3,
|
|
marginBottom: '1.4rem',
|
|
}}
|
|
>
|
|
{featuredPost.title}
|
|
</h2>
|
|
<div style={{ display: 'flex', gap: '1.2rem', color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '1.5rem' }}>
|
|
<span>{formatDate(featuredPost.createdAt)}</span>
|
|
<span>Updated {formatDate(featuredPost.updatedAt)}</span>
|
|
</div>
|
|
<Link
|
|
to={`/blog/${featuredPost.postId}`}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
padding: '0.85rem 1.6rem',
|
|
background: 'var(--accent-color)',
|
|
color: '#fff',
|
|
borderRadius: '10px',
|
|
fontWeight: 600,
|
|
textDecoration: 'none',
|
|
transition: 'transform 0.3s ease',
|
|
}}
|
|
onMouseEnter={(event) => {
|
|
event.currentTarget.style.transform = 'translateY(-2px)';
|
|
}}
|
|
onMouseLeave={(event) => {
|
|
event.currentTarget.style.transform = 'translateY(0)';
|
|
}}
|
|
>
|
|
{'Read article ->'}
|
|
</Link>
|
|
</div>
|
|
<div
|
|
style={{
|
|
minHeight: '320px',
|
|
background: featuredPost.coverImageUrl
|
|
? `linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55)), url(${featuredPost.coverImageUrl})`
|
|
: 'linear-gradient(135deg, rgba(90, 140, 255, 0.25), rgba(90, 140, 255, 0.07))',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{!isInitialLoading && posts.length === 0 && !postError && (
|
|
<div
|
|
style={{
|
|
padding: '4rem 2rem',
|
|
textAlign: 'center',
|
|
border: '1px dashed var(--border-color)',
|
|
borderRadius: '16px',
|
|
background: 'var(--bg-card)',
|
|
color: 'var(--text-secondary)',
|
|
}}
|
|
>
|
|
No posts yet. Be the first to share something with the community!
|
|
</div>
|
|
)}
|
|
|
|
<div style={{ display: 'grid', gap: '2.5rem', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
|
|
{otherPosts.map((post) => (
|
|
<article
|
|
key={post.postId}
|
|
style={{
|
|
background: 'var(--bg-card)',
|
|
border: '1px solid var(--border-color)',
|
|
borderRadius: '14px',
|
|
overflow: 'hidden',
|
|
boxShadow: '0 6px 20px rgba(0, 0, 0, 0.12)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: '180px',
|
|
background: post.coverImageUrl
|
|
? `linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url(${post.coverImageUrl})`
|
|
: 'linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(76, 175, 80, 0.05))',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
}}
|
|
/>
|
|
<div style={{ padding: '1.75rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
|
|
<h3
|
|
style={{
|
|
fontSize: '1.3rem',
|
|
fontWeight: 700,
|
|
color: 'var(--text-primary)',
|
|
marginBottom: '0.9rem',
|
|
}}
|
|
>
|
|
{post.title}
|
|
</h3>
|
|
<div style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '1.4rem' }}>
|
|
Published {formatDate(post.createdAt)}
|
|
</div>
|
|
<div style={{ marginTop: 'auto' }}>
|
|
<Link
|
|
to={`/blog/${post.postId}`}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '0.4rem',
|
|
color: 'var(--accent-color)',
|
|
fontWeight: 600,
|
|
textDecoration: 'none',
|
|
}}
|
|
>
|
|
{'Read more ->'}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{isInitialLoading && (
|
|
<div style={{ display: 'grid', gap: '2rem', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
height: '240px',
|
|
borderRadius: '14px',
|
|
background: 'linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08))',
|
|
border: '1px solid var(--border-color)',
|
|
animation: 'pulse 1.5s ease-in-out infinite',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{hasMore && (
|
|
<div style={{ textAlign: 'center', marginTop: '3rem' }}>
|
|
<button
|
|
type="button"
|
|
onClick={handleLoadMore}
|
|
disabled={isLoadingPosts}
|
|
style={{
|
|
padding: '1rem 2.5rem',
|
|
borderRadius: '999px',
|
|
border: 'none',
|
|
background: isLoadingPosts ? 'var(--bg-secondary)' : 'var(--accent-color)',
|
|
color: '#fff',
|
|
fontWeight: 600,
|
|
cursor: isLoadingPosts ? 'wait' : 'pointer',
|
|
transition: 'transform 0.2s ease',
|
|
}}
|
|
>
|
|
{isLoadingPosts ? 'Loading...' : t('blog.loadMore')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Blog;
|