55 lines
1.4 KiB
JavaScript
55 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 UserBlock from "@/components/UserBlock";
|
|
import { getAllUsers } from "@/api/client";
|
|
import { useAuthStore } from "@/store/authStore";
|
|
|
|
export function UserSection({ notices, title }) {
|
|
const [users, setUsers] = useState([]);
|
|
const { token } = useAuthStore.getState();
|
|
|
|
useEffect(() => {
|
|
const fetchUsers = async () => {
|
|
try {
|
|
const data = await getAllUsers();
|
|
setUsers(data);
|
|
} catch (error) {
|
|
setUsers([]);
|
|
}
|
|
};
|
|
|
|
if (token) {
|
|
fetchUsers();
|
|
}
|
|
}, [token]);
|
|
|
|
const usersWithNoticeCount =
|
|
users && users.length > 0
|
|
? 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>
|
|
);
|
|
}
|