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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 6x 6x 3x 6x 9x 1x 3x | import { styled, Typography } from "@mui/material";
import { useInfiniteQuery } from "@tanstack/react-query";
import Alert from "components/Alert";
import StyledLink from "components/StyledLink";
import TextBody from "components/TextBody";
import { RpcError } from "grpc-web";
import { Trans, useTranslation } from "i18n";
import { DASHBOARD } from "i18n/namespaces";
import { ListMyEventsRes } from "proto/events_pb";
import { eventsRoute, routeToNewEvent } from "routes";
import { service } from "service";
import hasAtLeastOnePage from "utils/hasAtLeastOnePage";
import { myEventsKey } from "../queryKeys";
import EventListRow, {
EventListContainer,
EventListRowSkeleton,
} from "./EventListRow";
const SectionHeader = styled("div")({
display: "flex",
alignItems: "baseline",
justifyContent: "space-between",
marginBottom: "8px",
});
const PAGE_SIZE = 3;
export default function MyUpcomingEvents() {
const { t } = useTranslation([DASHBOARD]);
const { data, error, isLoading } = useInfiniteQuery<
ListMyEventsRes.AsObject,
RpcError
>({
queryKey: myEventsKey("upcoming"),
queryFn: ({ pageParam }) =>
service.events.listMyEvents({
pageToken: pageParam as string | undefined,
pageSize: PAGE_SIZE,
}),
getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
initialPageParam: undefined,
});
return (
<div>
<SectionHeader>
<Typography variant="h2">
{t("dashboard:events.your_upcoming_header")}
</Typography>
<StyledLink href={`${eventsRoute}#my-events`}>
{t("dashboard:events.see_all_link")}
</StyledLink>
</SectionHeader>
{error && <Alert severity="error">{error.message}</Alert>}
{isLoading ? (
<EventListContainer>
{[0, 1, 2].map((i) => (
<EventListRowSkeleton key={i} />
))}
</EventListContainer>
) : hasAtLeastOnePage(data, "eventsList") ? (
<EventListContainer>
{data.pages
.flatMap((page) => page.eventsList)
.slice(0, PAGE_SIZE)
.map((event) => (
<EventListRow key={event.eventId} event={event} />
))}
</EventListContainer>
) : (
!error && (
<TextBody>
<Trans
t={t}
i18nKey="dashboard:events.your_upcoming_empty_message"
components={[
<StyledLink key="create-link" href={routeToNewEvent()} />,
]}
/>
</TextBody>
)
)}
</div>
);
}
|