Merge pull request #4894 from Couchers-org/na/feature/listAllEventsCa…

…ncelled

Add showCancelled to ListAllEvents and filter on backend

app/backend/src/couchers/servicers/events.py

@@ -1061,6 +1061,9 @@ def ListAllEvents(self, request, context, session):
             select(EventOccurrence).join(Event, Event.id == EventOccurrence.event_id).where(~EventOccurrence.is_deleted)
         )
 
+        if not request.include_cancelled:
+            occurrences = occurrences.where(~EventOccurrence.is_cancelled)
+
         if not request.past:
             occurrences = occurrences.where(EventOccurrence.end_time > page_token - timedelta(seconds=1)).order_by(
                 EventOccurrence.start_time.asc()

app/proto/events.proto

@@ -291,9 +291,12 @@ message ListMyEventsRes {
 message ListAllEventsReq {
   // whether to paginate backwards
   bool past = 1;
+
+  bool include_cancelled = 4;
 
   uint32 page_size = 2;
   string page_token = 3;
+
 }
 
 message ListAllEventsRes {

app/web/features/communities/events/EventsPage.test.tsx

@@ -20,14 +20,11 @@ const listAllEventsMock = service.events.listAllEvents as jest.MockedFunction<
 >;
 
 describe("Events page", () => {
-  beforeEach(() => {
+  it("shows the 'Upcoming' tab by default", async () => {
     listAllEventsMock.mockResolvedValue({
-      eventsList: events,
+      eventsList: events.filter((event) => !event.isCancelled),
       nextPageToken: "",
     });
-  });
-
-  it("shows the 'Upcoming' tab by default", async () => {
     render(<EventsPage />, { wrapper });
 
     expect(
@@ -100,9 +97,19 @@ describe("Events page", () => {
   it(`shows cancelled events if "${t(
     "communities:show_cancelled_events"
   )}" is checked`, async () => {
+    listAllEventsMock.mockResolvedValue({
+      eventsList: events.filter((event) => !event.isCancelled),
+      nextPageToken: "",
+    });
+
     render(<EventsPage />, { wrapper });
     await waitForElementToBeRemoved(screen.getByRole("progressbar"));
 
+    expect(listAllEventsMock).toHaveBeenCalledWith({
+      pastEvents: false,
+      showCancelled: false,
+    });
+
     expect(screen.getAllByRole("link")).toHaveLength(3);
 
     const switchSpan = screen.getByRole("checkbox", {
@@ -111,8 +118,11 @@ describe("Events page", () => {
 
     userEvent.click(switchSpan);
 
-    // Check that there are 4 events cards in success case (3 + 1 cancelled)
-    expect(screen.getAllByRole("link")).toHaveLength(4);
+    // Check that listAllEvents is called with showCancelled: true
+    expect(listAllEventsMock).toHaveBeenCalledWith({
+      pastEvents: false,
+      showCancelled: true,
+    });
   });
 
   describe("when there are more than one page of events", () => {
@@ -137,11 +147,11 @@ describe("Events page", () => {
         within(seeMoreEventsButton).getByRole("progressbar")
       );
 
-      expect(screen.getAllByRole("link")).toHaveLength(3);
+      expect(screen.getAllByRole("link")).toHaveLength(4);
       expect(listAllEventsMock).toHaveBeenCalledTimes(2);
       expect(listAllEventsMock.mock.calls).toEqual([
-        [{ pastEvents: false }],
-        [{ pastEvents: false, pageToken: "2" }],
+        [{ pastEvents: false, showCancelled: false }],
+        [{ pastEvents: false, pageToken: "2", showCancelled: false }],
       ]);
     });
   });

app/web/features/communities/events/EventsTab.tsx

@@ -53,11 +53,11 @@ export default function EventsTab({
   const classes = { ...useCommunityPageStyles(), ...useStyles() };
   const router = useRouter();
 
-  const { data, error, hasNextPage, fetchNextPage, isLoading } =
-    useListAllEvents({ pastEvents });
-
   const [showCancelled, setShowCancelled] = useState(false);
 
+  const { data, error, hasNextPage, fetchNextPage, isLoading } =
+    useListAllEvents({ pastEvents, showCancelled });
+
   const handleShowCancelledClick = () => {
     setShowCancelled(!showCancelled);
   };
@@ -87,7 +87,6 @@ export default function EventsTab({
           <div className={classNames(classes.cardContainer, classes.container)}>
             {data.pages
               .flatMap((page) => page.eventsList)
-              .filter((event) => showCancelled || !event.isCancelled)
               .map((event) => (
                 <EventCard
                   key={event.eventId}

app/web/features/communities/events/hooks.ts

@@ -110,14 +110,16 @@ export function useEvent({ eventId }: { eventId: number }) {
 export function useListAllEvents({
   pastEvents,
   pageSize,
+  showCancelled,
 }: Omit<ListAllEventsInput, "pageToken">) {
   return useInfiniteQuery<ListAllEventsRes.AsObject, RpcError>({
-    queryKey: eventsKey(pastEvents ? "past" : "upcoming"),
+    queryKey: [eventsKey(pastEvents ? "past" : "upcoming"), showCancelled],
     queryFn: ({ pageParam }) =>
       service.events.listAllEvents({
         pastEvents,
         pageSize,
         pageToken: pageParam,
+        showCancelled,
       }),
     getNextPageParam: (lastPage) => lastPage.nextPageToken || undefined,
   });

app/web/service/events.ts

@@ -221,22 +221,29 @@ export interface ListAllEventsInput {
   pastEvents: boolean;
   pageSize?: number;
   pageToken?: string;
+  showCancelled?: boolean;
 }
 
 export async function listAllEvents({
   pastEvents = false,
   pageSize,
   pageToken,
+  showCancelled,
 }: ListAllEventsInput) {
   const req = new ListAllEventsReq();
-  req.setPast(pastEvents);
 
+  if (pastEvents !== undefined) {
+    req.setPast(pastEvents);
+  }
   if (pageSize) {
     req.setPageSize(pageSize);
   }
   if (pageToken) {
     req.setPageToken(pageToken);
   }
+  if (showCancelled !== undefined) {
+    req.setIncludeCancelled(showCancelled);
+  }
 
   const res = await client.events.listAllEvents(req);
   return res.toObject();