FEATURE: support upcomingDays parameter on the upcoming events list (#524)

Adds a before parameter to the events endpoint and uses it through a upcomingDays parameter to the upcoming events list component – which can be used when adding it to the right sidebar blocks theme component.

app/controllers/discourse_post_event/events_controller.rb

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

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

@@ -13,6 +13,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_UPCOMING_DAYS = 180;
 const DEFAULT_COUNT = 8;
 
 export default class UpcomingEventsList extends Component {
@@ -28,6 +29,7 @@ export default class UpcomingEventsList extends Component {
   dateFormat = this.args.params?.dateFormat ?? DEFAULT_DATE_FORMAT;
   timeFormat = this.args.params?.timeFormat ?? DEFAULT_TIME_FORMAT;
   count = this.args.params?.count ?? DEFAULT_COUNT;
+  upcomingDays = this.args.params?.upcomingDays ?? DEFAULT_UPCOMING_DAYS;
 
   title = I18n.t(
     "discourse_calendar.discourse_post_event.upcoming_events_list.title"
@@ -48,7 +50,7 @@ export default class UpcomingEventsList extends Component {
   constructor() {
     super(...arguments);
 
-    this.appEvents.on("page:changed", this, this.updateEventsByMonth);
+    this.appEvents.on("page:changed", this, this.updateEventsList);
   }
 
   get shouldRender() {
@@ -75,13 +77,17 @@ export default class UpcomingEventsList extends Component {
   }
 
   @action
-  async updateEventsByMonth() {
+  async updateEventsList() {
     this.isLoading = true;
     this.hasError = false;
 
     try {
       const { events } = await ajax("/discourse-post-event/events", {
-        data: { category_id: this.categoryId, limit: this.count },
+        data: {
+          category_id: this.categoryId,
+          limit: this.count,
+          before: moment().add(this.upcomingDays, "days").toISOString(),
+        },
       });
 
       this.eventsByMonth = this.groupByMonthAndDay(events);
@@ -148,7 +154,7 @@ export default class UpcomingEventsList extends Component {
               {{this.errorMessage}}
             </div>
             <DButton
-              @action={{this.updateEventsByMonth}}
+              @action={{this.updateEventsList}}
               @label="discourse_calendar.discourse_post_event.upcoming_events_list.try_again"
               class="btn-link upcoming-events-list__try-again"
             />

lib/discourse_post_event/event_finder.rb

@@ -33,6 +33,10 @@ module DiscoursePostEvent
 
       events = events.where(id: Array(params[:post_id])) if params[:post_id]
 
+      if params[:before].present?
+        events = events.where("dcped.starts_at < ?", params[:before].to_datetime)
+      end
+
       if params[:category_id].present?
         if params[:include_subcategories].present?
           events =

spec/lib/discourse_post_event/event_finder_spec.rb

@@ -182,5 +182,17 @@ describe DiscoursePostEvent::EventFinder do
         expect(finder.search(current_user, { limit: 2 })).to match_array([event1, event2])
       end
     end
+
+    describe "with a before  parameter provided" do
+      let!(:event1) { Fabricate(:event) }
+      let!(:event2) { Fabricate(:event) }
+      let!(:event3) { Fabricate(:event, original_starts_at: 2.hours.ago) }
+
+      it "returns the events started before the provided value" do
+        expect(finder.search(current_user, { before: event2.starts_at.to_s })).to match_array(
+          [event3],
+        )
+      end
+    end
   end
 end

spec/requests/events_controller_spec.rb

@@ -298,6 +298,15 @@ module DiscoursePostEvent
             expect(events.length).to eq(1)
             expect(events[0]["id"]).to eq(event_1.id)
           end
+
+          it "filters events before the provided datetime if before param provided" do
+            get "/discourse-post-event/events.json?category_id=#{category.id}&include_subcategories=true&include_expired=true&before=#{event_2.starts_at}"
+
+            expect(response.status).to eq(200)
+            events = response.parsed_body["events"]
+            expect(events.length).to eq(1)
+            expect(events[0]["id"]).to eq(event_3.id)
+          end
         end
       end
     end

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

@@ -293,10 +293,36 @@ module("Integration | Component | upcoming-events-list", function (hooks) {
       "it displays the event name"
     );
   });
+
+  test("with events, overridden upcomingDays parameter", async function (assert) {
+    pretender.get("/discourse-post-event/events", twoEventsResponseHandler);
+
+    await render(<template>
+      <UpcomingEventsList @params={{hash upcomingDays=1}} />
+    </template>);
+
+    this.appEvents.trigger("page:changed", { url: "/" });
+
+    await waitFor(".loading-container .spinner", { count: 0 });
+
+    assert.strictEqual(
+      queryAll(".upcoming-events-list__event").length,
+      1,
+      "it limits the results to started_at before the provided parameter"
+    );
+
+    assert.deepEqual(
+      [...queryAll(".upcoming-events-list__event-name")].map(
+        (el) => el.innerText
+      ),
+      ["Awesome Event"],
+      "it displays the event name"
+    );
+  });
 });
 
 function twoEventsResponseHandler({ queryParams }) {
-  const events = [
+  let events = [
     {
       id: 67501,
       starts_at: tomorrowAllDay,
@@ -333,7 +359,15 @@ function twoEventsResponseHandler({ queryParams }) {
     },
   ];
 
-  return response({
-    events: queryParams.limit ? events.slice(0, queryParams.limit) : events,
-  });
+  if (queryParams.limit) {
+    events.splice(queryParams.limit);
+  }
+
+  if (queryParams.before) {
+    events = events.filter((event) => {
+      return moment(event.starts_at).isBefore(queryParams.before);
+    });
+  }
+
+  return response({ events });
 }