Files
ArtisanConnectFrontend/ArtisanConnect/components/UserSection.jsx
2025-06-05 21:40:30 +02:00

49 lines
1.4 KiB
JavaScript

import { View} from 'react-native';
import { useEffect, useState } from 'react'
import { Heading } from '@/components/ui/heading';
import { FlatList } from 'react-native';
import axios from 'axios';
import UserBlock from '@/components/UserBlock';
import {useAuthStore} from "@/store/authStore";
export function UserSection({notices, title}) {
const token = useAuthStore((state) => state.token);
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
const [users, setUsers] = useState([]);
useEffect(() => {
if (token){
axios.get('https://testowe.zikor.pl/api/v1/clients/get/all', { headers })
.then(res => setUsers(res.data))
.catch(() => setUsers([]));
}
}, [token]);
const usersWithNoticeCount = users.map(user => {
const count = notices.filter(n => n.clientId === user.id).length;
return { ...user, noticeCount: count };
});
const topUsers = usersWithNoticeCount
.sort((a, b) => b.noticeCount - a.noticeCount)
.slice(0, 5);
return (
<View className="mb-6">
<Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
<FlatList
data={topUsers}
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
renderItem={({ item }) => {
return (
<UserBlock user={item} />
);
}}
/>
</View>
);
}