60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import { View, FlatList } from "react-native";
|
|
import { useEffect, useState } from "react";
|
|
import { useAuthStore } from "@/store/authStore";
|
|
import { Heading } from "@/components/ui/heading";
|
|
import { Text } from "@/components/ui/text";
|
|
import { Link } from "expo-router";
|
|
import { Pressable } from "@/components/ui/pressable";
|
|
import { listCategories } from "@/api/categories";
|
|
|
|
export function CategorySection({ notices, title }) {
|
|
const [categoryMap, setCategoryMap] = useState({});
|
|
|
|
useEffect(() => {
|
|
const fetchCategories = async () => {
|
|
let data = await listCategories();
|
|
if (Array.isArray(data)) {
|
|
setCategoryMap(data);
|
|
}
|
|
};
|
|
|
|
fetchCategories();
|
|
}, []);
|
|
|
|
const categories = Array.from(
|
|
new Set(notices.map((notice) => notice.category))
|
|
).filter(Boolean);
|
|
|
|
const getCount = (category) =>
|
|
notices.filter((notice) => notice.category === category).length;
|
|
|
|
if (!categoryMap || Object.keys(categoryMap).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View className="mb-6">
|
|
<Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
|
|
<FlatList
|
|
data={categories}
|
|
keyExtractor={(item) => item}
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
|
|
renderItem={({ item }) => {
|
|
const categoryObj = categoryMap.find((cat) => cat.value === item);
|
|
return (
|
|
<Link href={`/notices?category=${item}`} asChild>
|
|
<Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
|
|
<Text>
|
|
{categoryObj ? categoryObj.label : item} ({getCount(item)})
|
|
</Text>
|
|
</Pressable>
|
|
</Link>
|
|
);
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|