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 88 89 90 91 92 93 94 95 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 4x 9x 9x 5x 15x 16x 4x 8x 1x | import { styled, Typography } from "@mui/material";
import { useInfiniteQuery } from "@tanstack/react-query";
import Alert from "components/Alert";
import Button from "components/Button";
import StyledLink from "components/StyledLink";
import TextBody from "components/TextBody";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { DASHBOARD } from "i18n/namespaces";
import { ListMyEventsRes } from "proto/events_pb";
import { eventsRoute } from "routes";
import { service } from "service";
import hasAtLeastOnePage from "utils/hasAtLeastOnePage";
import { myCommunityEventsKey } from "../queryKeys";
import EventListRow, {
EventListContainer,
EventListRowSkeleton,
} from "./EventListRow";
const SectionHeader = styled("div")({
display: "flex",
alignItems: "baseline",
justifyContent: "space-between",
marginBottom: "8px",
});
const LoadMoreContainer = styled("div")({
display: "flex",
justifyContent: "center",
marginTop: "12px",
});
const PAGE_SIZE = 5;
export default function CommunityEvents() {
const { t } = useTranslation([DASHBOARD]);
const { data, error, fetchNextPage, hasNextPage, isFetching, isLoading } =
useInfiniteQuery<ListMyEventsRes.AsObject, RpcError>({
queryKey: myCommunityEventsKey("upcoming"),
queryFn: ({ pageParam }) =>
service.events.listMyEvents({
pageToken: pageParam as string | undefined,
pageSize: PAGE_SIZE,
myCommunities: true,
myCommunitiesExcludeGlobal: true,
}),
getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
initialPageParam: undefined,
});
return (
<div>
<SectionHeader>
<Typography variant="h2">
{t("dashboard:events.community_header")}
</Typography>
<StyledLink href={`${eventsRoute}#discover`}>
{t("dashboard:events.see_all_link")}
</StyledLink>
</SectionHeader>
{error && <Alert severity="error">{error.message}</Alert>}
{isLoading ? (
<EventListContainer>
{[0, 1, 2, 3].map((i) => (
<EventListRowSkeleton key={i} />
))}
</EventListContainer>
) : hasAtLeastOnePage(data, "eventsList") ? (
<>
<EventListContainer>
{data.pages
.flatMap((page) => page.eventsList)
.map((event) => (
<EventListRow key={event.eventId} event={event} />
))}
</EventListContainer>
{hasNextPage && (
<LoadMoreContainer>
<Button onClick={() => fetchNextPage()} loading={isFetching}>
{t("dashboard:load_more")}
</Button>
</LoadMoreContainer>
)}
</>
) : (
!error && (
<TextBody>{t("dashboard:events.community_empty_message")}</TextBody>
)
)}
</div>
);
}
|