37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import useTranslation from "next-translate/useTranslation"
|
|
import InfiniteScroll from "react-infinite-scroll-component"
|
|
|
|
import { Divider } from "../../design/Divider"
|
|
import { Loader } from "../../design/Loader"
|
|
import { useMembers } from "../../../contexts/Members"
|
|
import { Member } from "./Member"
|
|
import { capitalize } from "../../../tools/utils/capitalize"
|
|
|
|
export const Members: React.FC = () => {
|
|
const { members, hasMore, nextPage } = useMembers()
|
|
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-2">
|
|
<h1 data-cy="members-title" className="my-2 pt-2 text-center text-xl">
|
|
{capitalize(t("application:members"))}
|
|
</h1>
|
|
<Divider />
|
|
</div>
|
|
<InfiniteScroll
|
|
className="members-list"
|
|
dataLength={members.length}
|
|
next={nextPage}
|
|
hasMore={hasMore}
|
|
loader={<Loader />}
|
|
>
|
|
{members.map((member) => {
|
|
return <Member key={member.id} member={member} />
|
|
})}
|
|
</InfiniteScroll>
|
|
</>
|
|
)
|
|
}
|