Mathis/memegoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(ui): integrate dynamic tag handling in MobileFilters

Browse Source 
Add support for fetching and displaying dynamic popular tags in `MobileFilters` using `TagService`. Replace static tag list with API-driven content and handle empty states gracefully.
This commit is contained in:
Mathis HERRIOT
2026-01-14 22:19:18 +01:00
parent c6b23de481
commit e84aa8a8db
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/mobile-filters.tsx
View File

@@ -16,7 +16,8 @@ import {
SheetTrigger, SheetTrigger,
} from "@/components/ui/sheet"; } from "@/components/ui/sheet";
import { CategoryService } from "@/services/category.service"; import { CategoryService } from "@/services/category.service";
import type { Category } from "@/types/content"; import { TagService } from "@/services/tag.service";
import type { Category, Tag } from "@/types/content";
export function MobileFilters() { export function MobileFilters() {
const router = useRouter(); const router = useRouter();
@@ -24,12 +25,16 @@ export function MobileFilters() {
const pathname = usePathname(); const pathname = usePathname();
const [categories, setCategories] = React.useState<Category[]>([]); const [categories, setCategories] = React.useState<Category[]>([]);
const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
const [query, setQuery] = React.useState(searchParams.get("query") || ""); const [query, setQuery] = React.useState(searchParams.get("query") || "");
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
React.useEffect(() => { React.useEffect(() => {
if (open) { if (open) {
CategoryService.getAll().then(setCategories).catch(console.error); CategoryService.getAll().then(setCategories).catch(console.error);
TagService.getAll({ limit: 10, sort: "popular" })
.then(setPopularTags)
.catch(console.error);
} }
}, [open]); }, [open]);
@@ -127,19 +132,25 @@ export function MobileFilters() {
<div> <div>
<h3 className="text-sm font-medium mb-3">Tags populaires</h3> <h3 className="text-sm font-medium mb-3">Tags populaires</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map( {popularTags.map((tag) => (
(tag) => ( <Badge
<Badge key={tag.id}
key={tag} variant={
variant={searchParams.get("tag") === tag ? "default" : "outline"} searchParams.get("tag") === tag.name ? "default" : "outline"
className="cursor-pointer" }
onClick={() => className="cursor-pointer"
updateSearch("tag", searchParams.get("tag") === tag ? null : tag) onClick={() =>
} updateSearch(
> "tag",
#{tag} searchParams.get("tag") === tag.name ? null : tag.name,
</Badge> )
), }
>
#{tag.name}
</Badge>
))}
{popularTags.length === 0 && (
<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
)} )}
</div> </div>
</div> </div>