53 lines
1.6 KiB
JavaScript
53 lines
1.6 KiB
JavaScript
import { View, FlatList} from 'react-native';
|
|
import { useEffect, useState } from 'react'
|
|
import { Heading } from '@/components/ui/heading';
|
|
import { Text } from '@/components/ui/text';
|
|
import { Link } from 'expo-router';
|
|
import { Pressable } from '@/components/ui/pressable';
|
|
import axios from 'axios';
|
|
|
|
export function CategorySection({notices, title}) {
|
|
// const notices = useNoticesStore((state) => state.notices);
|
|
|
|
const [categoryMap, setCategoryMap] = useState({});
|
|
|
|
useEffect(() => {
|
|
axios.get('https://testowe.zikor.pl/api/v1/vars/categories')
|
|
.then(res => setCategoryMap(res.data))
|
|
.catch(() => setCategoryMap({}));
|
|
}, []);
|
|
|
|
const categories = Array.from(
|
|
new Set(notices.map((notice) => notice.category))
|
|
).filter(Boolean);
|
|
|
|
|
|
const getCount = (category) =>
|
|
notices.filter((notice) => notice.category === category).length;
|
|
|
|
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>
|
|
);
|
|
|
|
} |