From 86cb6271203fd92c1ce0cbac8e1c98f138d6222a Mon Sep 17 00:00:00 2001
From: Kevin McConnell <kevin@37signals.com>
Date: Wed, 22 Jan 2025 16:44:30 +0000
Subject: [PATCH] Include neighbouring events in paginated query

Since we're rendering according to the local timezone, we'll need to
include events that fall before or after the specific date on the
server, as they might get be inside the current day in the client's
timezone. So let's just grab a window of events either side of today,
and then hide anything that falls outside the client's day.
---
 app/assets/stylesheets/events.css                 | 4 ++++
 app/controllers/events_controller.rb              | 2 +-
 app/javascript/controllers/timeline_controller.js | 9 +++++++++
 app/views/events/_day.html.erb                    | 2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 34a180b3e..a4f212033 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -10,6 +10,10 @@
 
 .event {
   margin: var(--inline-space);
+
+  &.out-of-range {
+    display: none;
+  }
 }
 
 .events--none {
diff --git a/app/controllers/events_controller.rb b/app/controllers/events_controller.rb
index 7eaa09243..5ebc0243c 100644
--- a/app/controllers/events_controller.rb
+++ b/app/controllers/events_controller.rb
@@ -4,7 +4,7 @@ class EventsController < ApplicationController
   def index
     @events = Event.
       where(bubble: user_bubbles).
-      where(created_at: @activity_day.all_day)
+      where(created_at: @activity_day.yesterday.beginning_of_day..@activity_day.tomorrow.end_of_day)
 
     @next_day = @activity_day.yesterday.strftime("%Y-%m-%d")
   end
diff --git a/app/javascript/controllers/timeline_controller.js b/app/javascript/controllers/timeline_controller.js
index 370239176..a9eb906b5 100644
--- a/app/javascript/controllers/timeline_controller.js
+++ b/app/javascript/controllers/timeline_controller.js
@@ -4,6 +4,7 @@ const MAX_ROWS = 25
 
 export default class extends Controller {
   static targets = [ "cell", "item" ]
+  static values = { date: String }
 
   cellTargetConnected(target) {
     const dt = new Date(target.dataset.datetime)
@@ -12,6 +13,14 @@ export default class extends Controller {
 
   itemTargetConnected(target) {
     const dt = new Date(target.dataset.datetime)
+    target.classList.toggle("out-of-range", !this.#dateIsToday(dt))
     target.style.gridRowStart = MAX_ROWS - dt.getHours()
   }
+
+  #dateIsToday(dt) {
+    const date = new Date(this.dateValue)
+    return dt.getYear() == date.getYear() &&
+      dt.getMonth() == date.getMonth() &&
+      dt.getDay() == date.getDay()
+  }
 }
diff --git a/app/views/events/_day.html.erb b/app/views/events/_day.html.erb
index 0eb310096..fa289203e 100644
--- a/app/views/events/_day.html.erb
+++ b/app/views/events/_day.html.erb
@@ -1,4 +1,4 @@
-<div class="margin-block-end-double" data-controller="timeline">
+<div class="margin-block-end-double" data-controller="timeline" data-timeline-date-value="<%= activity_day.to_date.iso8601 %>">
   <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
   <% if @events.any? %>
     <div class="center events">