GuilanCE/guilan-ace-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): add rich listing filters

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-11 21:21:43 +03:30
parent 3ec931aabb
commit e89fcfb20e
4 changed files with 524 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/blog/page.tsx
View File

@@ -1,6 +1,6 @@
import type { Metadata } from "next";
import Blog from "@/views/Blog";
import { getPublicPosts } from "@/lib/public-api";
import { getBlogBanners, getBlogFilters, getPublicPosts } from "@/lib/public-api";
import { siteUrl } from "@/lib/site";
type SearchParams = Promise<Record<string, string | string[] | undefined>>;
@@ -9,6 +9,11 @@ function firstString(value?: string | string[]) {
return Array.isArray(value) ? (value[0] ?? "") : (value ?? "");
}
function stringList(value?: string | string[]) {
const values = Array.isArray(value) ? value : value ? [value] : [];
return values.flatMap((item) => item.split(",")).map((item) => item.trim()).filter(Boolean);
}
export async function generateMetadata({
searchParams,
}: {
@@ -45,7 +50,24 @@ export default async function BlogPage({
}) {
const resolved = await searchParams;
const search = firstString(resolved.search).trim();
const posts = await getPublicPosts({ search: search || undefined });
const category = firstString(resolved.category).trim();
const tags = stringList(resolved.tag);
const authors = stringList(resolved.author);
const [posts, banners, filters] = await Promise.all([
getPublicPosts({ search: search || undefined, category: category || undefined, tag: tags, author: authors }),
getBlogBanners().catch(() => []),
getBlogFilters().catch(() => ({ categories: [], tags: [], authors: [] })),
]);
return <Blog initialPosts={posts} initialSearch={search} />;
return (
<Blog
initialPosts={posts}
initialSearch={search}
initialCategory={category}
initialTags={tags}
initialAuthors={authors}
banners={banners}
filters={filters}
/>
);
}

28
src/lib/public-api.ts
View File

@@ -71,15 +71,39 @@ async function requestJson<T>(
return (await response.json()) as T;
}
export async function getPublicPosts(options?: { search?: string; limit?: number }) {
export async function getPublicPosts(options?: {
search?: string;
category?: string;
tag?: string[];
author?: string[];
limit?: number;
}) {
const search = options?.search?.trim();
const category = options?.category?.trim();
const tag = options?.tag?.filter(Boolean) ?? [];
const author = options?.author?.filter(Boolean) ?? [];
return requestJson<Types.PostListSchema[]>("/api/blog/posts", {
params: {
limit: options?.limit ?? 50,
...(search ? { search } : {}),
...(category ? { category } : {}),
...(tag.length ? { tag } : {}),
...(author.length ? { author } : {}),
},
revalidate: search ? 60 : DEFAULT_REVALIDATE_SECONDS,
revalidate: search || category || tag.length || author.length ? 60 : DEFAULT_REVALIDATE_SECONDS,
});
}
export async function getBlogFilters() {
return requestJson<Types.BlogFiltersSchema>("/api/blog/filters", {
revalidate: DEFAULT_REVALIDATE_SECONDS,
});
}
export async function getBlogBanners() {
return requestJson<Types.BlogBannerSchema[]>("/api/blog/banners", {
revalidate: DEFAULT_REVALIDATE_SECONDS,
});
}

71
src/lib/types.ts
View File

@@ -229,6 +229,7 @@ export interface PostListSchema {
username: string;
first_name: string;
last_name: string;
bio?: string | null;
profile_picture?: string;
profile_picture_thumbnail_url?: string | null;
profile_picture_preview_url?: string | null;
@@ -238,7 +239,23 @@ export interface PostListSchema {
name: string;
slug: string;
description?: string;
parent_id?: number | null;
};
category_path?: Array<{
id: number;
name: string;
slug: string;
}>;
writers?: Array<{
id: number;
username: string;
first_name: string;
last_name: string;
bio?: string | null;
profile_picture?: string;
profile_picture_thumbnail_url?: string | null;
profile_picture_preview_url?: string | null;
}>;
tags: Array<{
id: number;
name: string;
@@ -276,6 +293,7 @@ export interface PostCreateSchema {
excerpt?: string;
category_id?: number | null;
tag_ids?: number[];
writer_ids?: number[];
is_featured?: boolean;
status?: 'draft' | 'submitted' | 'changes_requested' | 'published' | 'archived';
seo_title?: string;
@@ -323,14 +341,23 @@ export interface CommentSchema {
username: string;
first_name: string;
last_name: string;
bio?: string | null;
profile_picture?: string | null;
profile_picture_thumbnail_url?: string | null;
profile_picture_preview_url?: string | null;
};
post_id: number;
post_title: string;
post_slug: string;
parent_id?: number;
created_at: string;
updated_at?: string;
is_approved: boolean;
is_hidden?: boolean;
is_deleted?: boolean;
hidden_at?: string | null;
deleted_at?: string | null;
hidden_replies_count?: number;
replies?: CommentSchema[];
}
@@ -339,6 +366,19 @@ export interface CommentCreateSchema {
parent_id?: number;
}
export interface CommentUpdateSchema {
content: string;
}
export interface BlogBannerSchema {
id: number;
title?: string;
alt_text?: string;
image_url: string;
url: string;
sort_order: number;
}
export interface BlogInteractionSchema {
liked: boolean;
saved: boolean;
@@ -359,6 +399,7 @@ export interface CategorySchema {
name: string;
slug: string;
description?: string;
parent_id?: number | null;
created_at: string;
}
@@ -369,6 +410,36 @@ export interface TagSchema {
created_at: string;
}
export interface BlogFilterCategory {
id: number;
name: string;
slug: string;
parent_id?: number | null;
post_count: number;
children: BlogFilterCategory[];
}
export interface BlogFilterTag {
id: number;
name: string;
slug: string;
post_count: number;
}
export interface BlogFilterAuthor {
id: number;
username: string;
first_name: string;
last_name: string;
post_count: number;
}
export interface BlogFiltersSchema {
categories: BlogFilterCategory[];
tags: BlogFilterTag[];
authors: BlogFilterAuthor[];
}
// Events Types
export interface EventListItemSchema {
id: number;

409
src/views/Blog.tsx
View File

@@ -1,69 +1,350 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { ChevronDown, ChevronLeft, ChevronRight, Filter, UserRound, X } from "lucide-react";
import BlogThumbnail from "@/components/BlogThumbnail";
import { BlogCardsSkeleton } from "@/components/page-loading";
import { Button } from "@/components/ui/button";
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Link, useLocation, useNavigate } from "@/lib/router";
import { api } from "@/lib/api";
import { blogPostPath } from "@/lib/blog-routes";
import { apiBaseUrl, toAbsoluteUrl } from "@/lib/site";
import type * as Types from "@/lib/types";
import { formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";
import { cn, formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";
type BlogProps = {
initialPosts?: Types.PostListSchema[];
initialSearch?: string;
initialCategory?: string;
initialTags?: string[];
initialAuthors?: string[];
banners?: Types.BlogBannerSchema[];
filters?: Types.BlogFiltersSchema;
};
function buildBlogPath(
pathname: string,
search: string,
category: string,
tags: string[],
authors: string[],
) {
const params = new URLSearchParams();
if (category.trim()) params.set("category", category.trim());
tags.forEach((tag) => params.append("tag", tag));
authors.forEach((author) => params.append("author", author));
if (search.trim()) params.set("search", search.trim());
return params.size ? `${pathname}?${params.toString()}` : pathname;
}
function BlogBannerSlider({ banners }: { banners: Types.BlogBannerSchema[] }) {
const [activeIndex, setActiveIndex] = useState(0);
useEffect(() => {
if (banners.length <= 1) return;
const timer = window.setInterval(() => {
setActiveIndex((index) => (index + 1) % banners.length);
}, 6000);
return () => window.clearInterval(timer);
}, [banners.length]);
if (!banners.length) return null;
const activeBanner = banners[activeIndex] ?? banners[0];
const goToPrevious = () => setActiveIndex((index) => (index - 1 + banners.length) % banners.length);
const goToNext = () => setActiveIndex((index) => (index + 1) % banners.length);
return (
<section className="mb-8 overflow-hidden rounded-[2rem] border border-border/70 bg-card">
<a href={activeBanner.url} target="_blank" rel="noopener noreferrer" className="block">
<img
src={activeBanner.image_url}
alt={activeBanner.alt_text || activeBanner.title || "بنر بلاگ"}
className="aspect-[5/1.25] w-full object-cover md:aspect-[6/1.25]"
/>
</a>
{banners.length > 1 ? (
<div className="flex items-center justify-between gap-3 bg-background/80 px-4 py-3 backdrop-blur">
<div className="flex gap-1.5">
{banners.map((banner, index) => (
<button
key={banner.id}
type="button"
onClick={() => setActiveIndex(index)}
className={cn(
"h-2.5 rounded-full transition-all",
index === activeIndex ? "w-8 bg-primary" : "w-2.5 bg-muted-foreground/30",
)}
aria-label={`نمایش بنر ${index + 1}`}
/>
))}
</div>
<div className="flex gap-2">
<Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToNext}>
<ChevronRight className="h-4 w-4" />
</Button>
<Button type="button" size="icon" variant="ghost" className="rounded-full" onClick={goToPrevious}>
<ChevronLeft className="h-4 w-4" />
</Button>
</div>
</div>
) : null}
</section>
);
}
export default function Blog({
initialPosts = [],
initialSearch = "",
initialCategory = "",
initialTags = [],
initialAuthors = [],
banners = [],
filters = { categories: [], tags: [], authors: [] },
}: BlogProps) {
const navigate = useNavigate();
const location = useLocation();
const [posts, setPosts] = useState<Types.PostListSchema[]>(initialPosts);
const [search, setSearch] = useState(initialSearch);
const [loading, setLoading] = useState(!initialPosts.length && !initialSearch);
const pathname = location.pathname || "/blog";
const posts = initialPosts;
const [searchDraft, setSearchDraft] = useState(initialSearch);
const [selectedCategory, setSelectedCategory] = useState(initialCategory);
const [selectedTags, setSelectedTags] = useState<string[]>(initialTags);
const [selectedAuthors, setSelectedAuthors] = useState<string[]>(initialAuthors);
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
() => new Set(initialCategory ? [initialCategory] : []),
);
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
const [listPending, setListPending] = useState(false);
useEffect(() => {
setPosts(initialPosts);
}, [initialPosts]);
useEffect(() => {
setSearch(initialSearch);
setSearchDraft(initialSearch);
setListPending(false);
}, [initialSearch]);
const loadPosts = useCallback(async () => {
try {
setLoading(true);
const data = await api.getPosts({ search: search || undefined });
setPosts(data);
} catch (error) {
console.error("Error loading posts:", error);
} finally {
setLoading(false);
useEffect(() => {
setSelectedCategory(initialCategory);
if (initialCategory) {
setExpandedCategories((current) => new Set([...current, initialCategory]));
}
}, [search]);
setListPending(false);
}, [initialCategory]);
useEffect(() => {
loadPosts();
}, [loadPosts]);
setSelectedTags(initialTags);
setListPending(false);
}, [initialTags]);
useEffect(() => {
const params = new URLSearchParams();
if (search.trim()) {
params.set("search", search.trim());
setSelectedAuthors(initialAuthors);
setListPending(false);
}, [initialAuthors]);
useEffect(() => {
const timer = window.setTimeout(() => {
if (searchDraft.trim() !== initialSearch.trim()) {
setListPending(true);
navigate(
buildBlogPath(pathname, searchDraft, selectedCategory, selectedTags, selectedAuthors),
{ replace: true },
);
}
const basePath = location.pathname || "/blog";
const nextPath = params.size
? `${basePath}?${params.toString()}`
: basePath;
navigate(nextPath, { replace: true });
}, [location.pathname, navigate, search]);
}, 400);
return () => window.clearTimeout(timer);
}, [initialSearch, navigate, pathname, searchDraft, selectedAuthors, selectedCategory, selectedTags]);
const navigateFilters = (next: {
search?: string;
category?: string;
tags?: string[];
authors?: string[];
}) => {
setListPending(true);
navigate(
buildBlogPath(
pathname,
next.search ?? searchDraft,
next.category ?? selectedCategory,
next.tags ?? selectedTags,
next.authors ?? selectedAuthors,
),
{ replace: true },
);
};
const selectCategory = (slug: string) => {
const nextCategory = selectedCategory === slug ? "" : slug;
setSelectedCategory(nextCategory);
navigateFilters({ category: nextCategory });
};
const toggleCategoryExpanded = (slug: string) => {
setExpandedCategories((current) => {
const next = new Set(current);
if (next.has(slug)) {
next.delete(slug);
} else {
next.add(slug);
}
return next;
});
};
const toggleTag = (slug: string) => {
const nextTags = selectedTags.includes(slug)
? selectedTags.filter((item) => item !== slug)
: [...selectedTags, slug];
setSelectedTags(nextTags);
navigateFilters({ tags: nextTags });
};
const toggleAuthor = (username: string) => {
const nextAuthors = selectedAuthors.includes(username)
? selectedAuthors.filter((item) => item !== username)
: [...selectedAuthors, username];
setSelectedAuthors(nextAuthors);
navigateFilters({ authors: nextAuthors });
};
const clearFilters = () => {
setSearchDraft("");
setSelectedCategory("");
setSelectedTags([]);
setSelectedAuthors([]);
setListPending(true);
navigate(pathname, { replace: true });
};
const renderCategoryTree = (categories: Types.BlogFilterCategory[], level = 0) => (
<div className={level === 0 ? "space-y-2" : "mt-2 space-y-2"}>
{categories.map((category) => {
const active = selectedCategory === category.slug;
const hasChildren = Boolean(category.children?.length);
const expanded = expandedCategories.has(category.slug);
return (
<div key={category.id} style={{ paddingRight: `${level * 0.75}rem` }}>
<div
className={cn(
"flex w-full items-center gap-1 rounded-2xl text-sm transition",
active ? "bg-primary text-primary-foreground shadow-sm" : "bg-background/70 text-muted-foreground hover:bg-primary/10 hover:text-primary",
)}
>
{hasChildren ? (
<button
type="button"
onClick={() => toggleCategoryExpanded(category.slug)}
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition hover:bg-current/10"
aria-label={expanded ? "بستن زیر دسته‌ها" : "نمایش زیر دسته‌ها"}
>
<ChevronDown className={cn("h-4 w-4 transition", expanded && "rotate-180")} />
</button>
) : (
<span className="h-8 w-8 shrink-0" />
)}
<button
type="button"
onClick={() => selectCategory(category.slug)}
className="min-w-0 flex-1 px-2 py-2 text-right"
>
<span className="line-clamp-1">{category.name}</span>
</button>
</div>
{hasChildren && expanded ? renderCategoryTree(category.children, level + 1) : null}
</div>
);
})}
</div>
);
const hasActiveFilters = Boolean(searchDraft || selectedCategory || selectedTags.length || selectedAuthors.length);
const filtersPanel = (
<div className="space-y-4">
<div className="flex flex-wrap items-center justify-between gap-3 text-right">
<div className="flex items-center justify-start gap-2">
<Filter className="h-5 w-5 text-primary" />
<div>
<h2 className="font-bold">فیلترهای بلاگ</h2>
</div>
</div>
{hasActiveFilters ? (
<Button type="button" variant="ghost" size="sm" className="gap-2 rounded-full" onClick={clearFilters}>
<X className="h-4 w-4" />
پاک کردن
</Button>
) : null}
</div>
<div className="space-y-4">
<div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
<h3 className="mb-3 text-right text-sm font-semibold">دسته‌بندی‌ها</h3>
{filters.categories.length ? renderCategoryTree(filters.categories) : (
<p className="text-right text-xs text-muted-foreground">دسته‌ای برای فیلتر وجود ندارد.</p>
)}
</div>
<div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
<h3 className="mb-3 text-right text-sm font-semibold">موضوعات</h3>
<div className="flex flex-wrap gap-2">
{filters.tags.map((tag) => {
const active = selectedTags.includes(tag.slug);
return (
<button
key={tag.id}
type="button"
onClick={() => toggleTag(tag.slug)}
className={cn(
"rounded-full px-3 py-1.5 text-xs transition",
active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
)}
>
{tag.name}
</button>
);
})}
{!filters.tags.length ? <p className="text-xs text-muted-foreground">موضوعی برای فیلتر وجود ندارد.</p> : null}
</div>
</div>
<div className="rounded-3xl border border-border/60 bg-muted/20 p-3">
<h3 className="mb-3 text-right text-sm font-semibold">نویسندگان</h3>
<div className="space-y-2">
{filters.authors.map((author) => {
const active = selectedAuthors.includes(author.username);
const name = [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
return (
<button
key={author.id}
type="button"
onClick={() => toggleAuthor(author.username)}
className={cn(
"flex w-full items-center justify-start gap-2 rounded-2xl px-3 py-2 text-right text-sm transition",
active ? "bg-primary text-primary-foreground" : "bg-background text-muted-foreground hover:bg-primary/10 hover:text-primary",
)}
>
<UserRound className="h-4 w-4" />
<span className="min-w-0 flex-1 truncate">{name}</span>
<span className="rounded-full bg-current/10 px-2 py-0.5 text-xs">{author.post_count}</span>
</button>
);
})}
{!filters.authors.length ? <p className="text-right text-xs text-muted-foreground">نویسنده‌ای برای فیلتر وجود ندارد.</p> : null}
</div>
</div>
</div>
</div>
);
return (
<div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
<div className="container mx-auto px-4 py-10">
<BlogBannerSlider banners={banners} />
<div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
<div className="text-right">
<p className="mb-2 text-sm font-medium text-primary">خواندنی‌های انجمن</p>
@@ -72,23 +353,74 @@ export default function Blog({
نوشته‌های آموزشی، تجربه‌های دانشجویی و یادداشت‌های تخصصی اعضای انجمن علمی.
</p>
</div>
<div className="flex w-full max-w-md items-center gap-2">
<Input
type="text"
placeholder="جستجو در نوشته‌ها..."
value={search}
onChange={(event) => setSearch(event.target.value)}
className="max-w-md rounded-full bg-background/80 text-right shadow-sm backdrop-blur"
value={searchDraft}
onChange={(event) => setSearchDraft(event.target.value)}
className="h-12 flex-1 rounded-2xl bg-background/80 text-right shadow-sm backdrop-blur"
/>
<Button
type="button"
variant="outline"
size="icon"
aria-label="باز کردن فیلترهای بلاگ"
onClick={() => setMobileFiltersOpen(true)}
className="h-12 w-12 shrink-0 rounded-2xl border-border/70 bg-card/80 shadow-sm backdrop-blur xl:hidden"
>
<Filter className="h-5 w-5 text-primary" />
</Button>
</div>
</div>
{loading ? (
<p className="text-center text-muted-foreground">در حال بارگذاری...</p>
<div className="xl:hidden">
<Drawer open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
<DrawerTrigger asChild>
<Button
type="button"
variant="outline"
className="hidden h-12 w-full justify-between rounded-[1.5rem] border-border/70 bg-card/80 px-4 shadow-sm backdrop-blur"
>
<span className="flex items-center justify-start gap-2 font-bold">
<Filter className="h-5 w-5 text-primary" />
فیلترهای بلاگ
</span>
<ChevronDown className={cn("h-4 w-4 transition", mobileFiltersOpen && "rotate-180")} />
</Button>
</DrawerTrigger>
<DrawerContent className="max-h-[85vh] rounded-t-[2rem]" dir="rtl">
<DrawerTitle className="sr-only">فیلترهای بلاگ</DrawerTitle>
<DrawerDescription className="sr-only">
انتخاب دسته‌بندی، موضوع و نویسنده برای فیلتر کردن نوشته‌های بلاگ
</DrawerDescription>
<div className="overflow-y-auto px-4 pb-4 pt-2">
{filtersPanel}
<DrawerClose asChild>
<Button type="button" variant="outline" className="mt-4 w-full rounded-full">
بستن
</Button>
</DrawerClose>
</div>
</DrawerContent>
</Drawer>
</div>
<div className="grid gap-8 xl:grid-cols-[18rem_minmax(0,1fr)] xl:items-start">
<aside className="hidden xl:block">
<div className="sticky top-24 max-h-[calc(100vh-7rem)] overflow-y-auto rounded-[2rem] border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
{filtersPanel}
</div>
</aside>
{listPending ? (
<BlogCardsSkeleton />
) : posts.length === 0 ? (
<p className="rounded-3xl border border-dashed bg-background/70 p-10 text-center text-muted-foreground">
نوشته‌ای پیدا نشد.
</p>
) : (
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
<div className="grid gap-6 md:grid-cols-2 2xl:grid-cols-3">
{posts.map((post) => (
<Link
key={post.id}
@@ -117,5 +449,6 @@ export default function Blog({
)}
</div>
</div>
</div>
);
}