FEATURE: support count parameter on the events list component (#513)

* FEATURE: support count parameter on the events list component

* DEV: fix linting

app/controllers/discourse_post_event/events_controller.rb

@@ -119,7 +119,7 @@ module DiscoursePostEvent
     private
 
     def filtered_events_params
-      params.permit(:post_id, :category_id, :include_subcategories, :include_expired)
+      params.permit(:post_id, :category_id, :include_subcategories, :include_expired, :limit)
     end
   end
 end

assets/javascripts/discourse/components/upcoming-events-list.gjs

@@ -12,6 +12,7 @@ import { isNotFullDayEvent } from "../lib/guess-best-date-format";
 export const DEFAULT_MONTH_FORMAT = "MMMM YYYY";
 export const DEFAULT_DATE_FORMAT = "dddd, MMM D";
 export const DEFAULT_TIME_FORMAT = "LT";
+const DEFAULT_COUNT = 8;
 
 export default class UpcomingEventsList extends Component {
   @service appEvents;
@@ -25,6 +26,7 @@ export default class UpcomingEventsList extends Component {
   monthFormat = this.args.params?.monthFormat ?? DEFAULT_MONTH_FORMAT;
   dateFormat = this.args.params?.dateFormat ?? DEFAULT_DATE_FORMAT;
   timeFormat = this.args.params?.timeFormat ?? DEFAULT_TIME_FORMAT;
+  count = this.args.params?.count ?? DEFAULT_COUNT;
 
   title = I18n.t(
     "discourse_calendar.discourse_post_event.upcoming_events_list.title"
@@ -75,7 +77,7 @@ export default class UpcomingEventsList extends Component {
 
     try {
       const { events } = await ajax("/discourse-post-event/events", {
-        data: { category_id: this.categoryId },
+        data: { category_id: this.categoryId, limit: this.count },
       });
 
       this.eventsByMonth = this.groupByMonthAndDay(events);

lib/discourse_post_event/event_finder.rb

@@ -46,6 +46,8 @@ module DiscoursePostEvent
         end
       end
 
+      events = events.limit(params[:limit].to_i) if params[:limit].present?
+
       events
     end
 

spec/lib/discourse_post_event/event_finder_spec.rb

@@ -172,5 +172,15 @@ describe DiscoursePostEvent::EventFinder do
         end
       end
     end
+
+    describe "with a limit parameter provided" do
+      let!(:event1) { Fabricate(:event) }
+      let!(:event2) { Fabricate(:event) }
+      let!(:event3) { Fabricate(:event) }
+
+      it "returns the correct number of events" do
+        expect(finder.search(current_user, { limit: 2 })).to match_array([event1, event2])
+      end
+    end
   end
 end

spec/requests/events_controller_spec.rb

@@ -290,6 +290,15 @@ module DiscoursePostEvent
               ],
             )
           end
+
+          it "limits the number of events returned when limit param provided" do
+            get "/discourse-post-event/events.json?category_id=#{category.id}&include_subcategories=true&limit=1"
+
+            expect(response.status).to eq(200)
+            events = response.parsed_body["events"]
+            expect(events.length).to eq(1)
+            expect(events[0]["id"]).to eq(event_1.id)
+          end
         end
       end
     end

test/javascripts/integration/components/upcoming-events-list-test.gjs

@@ -134,7 +134,7 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
     );
   });
 
-  test("with events, overriden formats", async function (assert) {
+  test("with events, overridden formats", async function (assert) {
     pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
 
     await render(<template>
@@ -225,45 +225,81 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
       "it displays the try again button"
     );
   });
+
+  test("with events, overridden count parameter", async function (assert) {
+    pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
+
+    await render(<template>
+      <UpcomingEventsList @params={{hash count=1}} />
+    </template>);
+
+    this.appEvents.trigger("page:changed", { url: "/" });
+
+    assert.strictEqual(
+      query(".upcoming-events-list__heading").innerText,
+      I18n.t(
+        "discourse_calendar.discourse_post_event.upcoming_events_list.title"
+      ),
+      "it displays the title"
+    );
+
+    await waitFor(".loading-container .spinner", { count: 0 });
+
+    assert.strictEqual(
+      queryAll(".upcoming-events-list__event").length,
+      1,
+      "it limits the resulting items to the count parameter"
+    );
+
+    assert.deepEqual(
+      [...queryAll(".upcoming-events-list__event-name")].map(
+        (el) => el.innerText
+      ),
+      ["Awesome Event"],
+      "it displays the event name"
+    );
+  });
 });
 
-function twoEventsResponseHandler() {
-  return response({
-    events: [
-      {
+function twoEventsResponseHandler({ queryParams }) {
+  const events = [
+    {
+      id: 67501,
+      starts_at: tomorrowAllDay,
+      ends_at: null,
+      timezone: "Asia/Calcutta",
+      post: {
         id: 67501,
-        starts_at: tomorrowAllDay,
-        ends_at: null,
-        timezone: "Asia/Calcutta",
-        post: {
-          id: 67501,
-          post_number: 1,
-          url: "/t/this-is-an-event/18449/1",
-          topic: {
-            id: 18449,
-            title: "This is an event",
-          },
+        post_number: 1,
+        url: "/t/this-is-an-event/18449/1",
+        topic: {
+          id: 18449,
+          title: "This is an event",
         },
-        name: "Awesome Event",
-        category_id: 1,
       },
-      {
-        id: 67502,
-        starts_at: nextMonth,
-        ends_at: null,
-        timezone: "Asia/Calcutta",
-        post: {
-          id: 67501,
-          post_number: 1,
-          url: "/t/this-is-an-event-2/18450/1",
-          topic: {
-            id: 18449,
-            title: "This is an event 2",
-          },
+      name: "Awesome Event",
+      category_id: 1,
+    },
+    {
+      id: 67502,
+      starts_at: nextMonth,
+      ends_at: null,
+      timezone: "Asia/Calcutta",
+      post: {
+        id: 67501,
+        post_number: 1,
+        url: "/t/this-is-an-event-2/18450/1",
+        topic: {
+          id: 18449,
+          title: "This is an event 2",
         },
-        name: "Another Awesome Event",
-        category_id: 2,
       },
-    ],
+      name: "Another Awesome Event",
+      category_id: 2,
+    },
+  ];
+
+  return response({
+    events: queryParams.limit ? events.slice(0, queryParams.limit) : events,
   });
 }