Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | import { styled, Typography } from "@mui/material"; import { Box } from "@mui/system"; import Alert from "components/Alert"; import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner"; import CursorPagination from "components/CursorPagination"; import { PersonIcon } from "components/Icons"; import TextBody from "components/TextBody"; import UsersList from "components/UsersList"; import { useTranslation } from "i18n"; import { COMMUNITIES, GLOBAL } from "i18n/namespaces"; import { Community } from "proto/communities_pb"; import { useState } from "react"; import { SectionTitle } from "../CommunityPage"; import { useListMembers } from "../hooks"; const PaginationWrapper = styled("div")(({ theme }) => ({ display: "flex", justifyContent: "center", width: "100%", marginTop: theme.spacing(2), })); export default function CommunityMembersList({ communityId, memberCount, }: { communityId: Community.AsObject["communityId"]; memberCount?: Community.AsObject["memberCount"]; }) { const { t } = useTranslation([GLOBAL, COMMUNITIES]); const PAGE_SIZE = 20; const [pageNumber, setPageNumber] = useState(1); const { data, isFetching, isLoading, error, fetchNextPage } = useListMembers({ communityId, pageSize: PAGE_SIZE, }); const currentPage = data?.pages && data.pages[pageNumber - 1]; const handelPreviousPageClick = () => { setPageNumber(pageNumber - 1); }; const handleNextPageClick = () => { fetchNextPage(); setPageNumber(pageNumber + 1); }; return ( <> <Box sx={{ display: "flex", alignItems: "center" }}> <SectionTitle icon={<PersonIcon />} variant="h2"> {t("communities:members_title")} </SectionTitle> <Typography variant="body2" sx={{ margin: 2 }}> {memberCount} {t("communities:total_members")} </Typography> </Box> {error && <Alert severity="error">{error.message}</Alert>} {isLoading && <CenteredSpinner />} {data?.pages && data?.pages.length > 0 && ( <UsersList userIds={currentPage?.memberUserIdsList} endChildren={ <PaginationWrapper> <CursorPagination hasNextPage={currentPage?.nextPageToken !== ""} onNext={handleNextPageClick} hasPreviousPage={pageNumber > 1} onPrevious={handelPreviousPageClick} isLoading={isLoading} /> </PaginationWrapper> } titleIsLink /> )} {!error && !isFetching && data?.pages.length === 0 && ( <TextBody>{t("communities:members_empty_state")}</TextBody> )} </> ); } |