From 522180784728530cdeacb38be8bdc2184219f345 Mon Sep 17 00:00:00 2001
From: Jose Farias <jose@37signals.com>
Date: Wed, 23 Oct 2024 14:12:28 -0600
Subject: [PATCH] Render threadables

---
 app/assets/stylesheets/comments.css           |  5 +--
 app/helpers/events_helper.rb                  |  5 +++
 app/javascript/application.js                 |  1 +
 .../controllers/rollup_controller.js          | 33 +++++++++++++++++++
 app/javascript/extensions/array_extensions.js | 17 ++++++++++
 app/javascript/extensions/index.js            |  1 +
 app/views/bubbles/show.html.erb               | 13 +++++---
 app/views/bubbles/threads/_rollup.html.erb    |  3 --
 app/views/bubbles/threads/_thread.html.erb    |  6 ----
 app/views/events/_event.html.erb              |  5 +++
 app/views/events/actions/_assigned.html.erb   |  1 +
 app/views/events/actions/_boosted.html.erb    |  1 +
 app/views/events/actions/_created.html.erb    |  1 +
 app/views/events/actions/_staged.html.erb     |  1 +
 app/views/events/actions/_unstaged.html.erb   |  1 +
 app/views/rollups/_rollup.html.erb            |  3 ++
 .../thread_entries/_thread_entry.html.erb     |  1 +
 config/importmap.rb                           |  1 +
 18 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 app/helpers/events_helper.rb
 create mode 100644 app/javascript/controllers/rollup_controller.js
 create mode 100644 app/javascript/extensions/array_extensions.js
 create mode 100644 app/javascript/extensions/index.js
 delete mode 100644 app/views/bubbles/threads/_rollup.html.erb
 delete mode 100644 app/views/bubbles/threads/_thread.html.erb
 create mode 100644 app/views/events/_event.html.erb
 create mode 100644 app/views/events/actions/_assigned.html.erb
 create mode 100644 app/views/events/actions/_boosted.html.erb
 create mode 100644 app/views/events/actions/_created.html.erb
 create mode 100644 app/views/events/actions/_staged.html.erb
 create mode 100644 app/views/events/actions/_unstaged.html.erb
 create mode 100644 app/views/rollups/_rollup.html.erb
 create mode 100644 app/views/thread_entries/_thread_entry.html.erb

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 2a8021515..b1a030b59 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -44,7 +44,7 @@
     margin-inline: var(--avatar-size) 0;
   }
 
-  .comment:has(+ .comment--upvotes) & {
+  .comment:has(+ .rollup) & {
     padding-block-end: calc(var(--comment-padding-block) * 1.5);
   }
 }
@@ -73,8 +73,9 @@
   opacity: 0.5;
 }
 
-.comment--upvotes {
+.rollup {
   font-weight: 600;
   margin-block: calc(var(--comment-padding-block) * -1);
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
+  gap: 0.5ch;
 }
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
new file mode 100644
index 000000000..f0e390afe
--- /dev/null
+++ b/app/helpers/events_helper.rb
@@ -0,0 +1,5 @@
+module EventsHelper
+  def boost_event_tag(event)
+    tag.span hidden: true, data: { rollup_target: "boostEvent", creator_id: event.creator_id, creator_name: event.creator_name }
+  end
+end
diff --git a/app/javascript/application.js b/app/javascript/application.js
index 0d7b49404..611524bf3 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -1,3 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
+import "extensions"
 import "controllers"
diff --git a/app/javascript/controllers/rollup_controller.js b/app/javascript/controllers/rollup_controller.js
new file mode 100644
index 000000000..3d1d00898
--- /dev/null
+++ b/app/javascript/controllers/rollup_controller.js
@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "boostEvent" ]
+
+  connect() {
+    this.#summarizeBoosts()
+  }
+
+  #summarizeBoosts() {
+    const el = document.createElement("span")
+    el.textContent = this.#boostSumaries.toSentence()
+    this.element.appendChild(el)
+  }
+
+  get #boostSumaries() {
+    return Object.entries(this.#boostsByCreator).map(([_creatorId, boostEvents]) => {
+      return `${boostEvents[0].dataset.creatorName} +${boostEvents.length}`
+    })
+  }
+
+  get #boostsByCreator() {
+    return this.boostEventTargets.reduce((acc, target) => {
+      const creatorId = target.dataset.creatorId
+
+      if (!acc[creatorId]) acc[creatorId] = []
+
+      acc[creatorId].push(target)
+
+      return acc
+    }, {})
+  }
+}
diff --git a/app/javascript/extensions/array_extensions.js b/app/javascript/extensions/array_extensions.js
new file mode 100644
index 000000000..9e8b8822a
--- /dev/null
+++ b/app/javascript/extensions/array_extensions.js
@@ -0,0 +1,17 @@
+Array.prototype.toSentence = function() {
+  const length = this.length
+
+  switch (length) {
+    case 0:
+      return ""
+    case 1:
+      return `${this[0]}.`
+    case 2:
+      return `${this[0]} and ${this[1]}.`
+    default:
+      return this.map((item, index) => {
+        const isLast = index === length - 1
+        return isLast ? `and ${item}.` : item
+      }).join(", ")
+  }
+}
diff --git a/app/javascript/extensions/index.js b/app/javascript/extensions/index.js
new file mode 100644
index 000000000..5424290ea
--- /dev/null
+++ b/app/javascript/extensions/index.js
@@ -0,0 +1 @@
+import "extensions/array_extensions"
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index a43755cd0..30b626e64 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -14,8 +14,13 @@
   </nav>
 <% end %>
 
-<div class="bubble__perma flex justify-center center margin-block-end-double">
-  <%= render "bubbles/bubble", bubble: @bubble %>
-</div>
+<%= cache @bubble do %>
+  <div class="bubble__perma flex justify-center center margin-block-end-double">
+    <%= render "bubbles/bubble", bubble: @bubble %>
+  </div>
 
-<%= render @bubble.thread %>
+  <section id="<%= dom_id(@bubble, :thread) %>" class="comments align-center center borderless margin flex flex-column gap-half" style="--bubble-color: <%= @bubble.color %>;">
+    <%= render partial: "thread_entries/thread_entry", collection: @bubble.thread.entries, cache: true %>
+    <%= render "comments/new", bubble: @bubble %>
+  </section>
+<% end %>
diff --git a/app/views/bubbles/threads/_rollup.html.erb b/app/views/bubbles/threads/_rollup.html.erb
deleted file mode 100644
index adbfd5138..000000000
--- a/app/views/bubbles/threads/_rollup.html.erb
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="comment--upvotes flex-inline flex-wrap align-start fill-white border-radius center position-relative">
-  <%= rollup.body %>
-</div>
diff --git a/app/views/bubbles/threads/_thread.html.erb b/app/views/bubbles/threads/_thread.html.erb
deleted file mode 100644
index 9d8103bb1..000000000
--- a/app/views/bubbles/threads/_thread.html.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-<% bubble = thread.bubble %>
-
-<section id="<%= dom_id(bubble, :thread) %>" class="comments align-center center borderless margin flex flex-column gap-half" style="--bubble-color: <%= bubble.color %>;">
-  <%= render thread.entries %>
-  <%= render "comments/new", bubble: bubble %>
-</section>
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
new file mode 100644
index 000000000..4979f8d80
--- /dev/null
+++ b/app/views/events/_event.html.erb
@@ -0,0 +1,5 @@
+<%= cache event do %>
+  <%# Template Dependency: events/actions/* %>
+  <%= render "events/actions/#{event.action}", event: event %>
+<% end %>
+
diff --git a/app/views/events/actions/_assigned.html.erb b/app/views/events/actions/_assigned.html.erb
new file mode 100644
index 000000000..52ba8fa07
--- /dev/null
+++ b/app/views/events/actions/_assigned.html.erb
@@ -0,0 +1 @@
+<span>Assigned to <%= event.assignee_names.to_sentence %> <%= time_ago_in_words(event.created_at) %> ago.</span>
diff --git a/app/views/events/actions/_boosted.html.erb b/app/views/events/actions/_boosted.html.erb
new file mode 100644
index 000000000..39268e2b4
--- /dev/null
+++ b/app/views/events/actions/_boosted.html.erb
@@ -0,0 +1 @@
+<%= boost_event_tag event %>
diff --git a/app/views/events/actions/_created.html.erb b/app/views/events/actions/_created.html.erb
new file mode 100644
index 000000000..6c32028df
--- /dev/null
+++ b/app/views/events/actions/_created.html.erb
@@ -0,0 +1 @@
+<span>Added by <%= event.creator_name %> <%= time_ago_in_words(event.created_at) %> ago.</span>
diff --git a/app/views/events/actions/_staged.html.erb b/app/views/events/actions/_staged.html.erb
new file mode 100644
index 000000000..a9821ee79
--- /dev/null
+++ b/app/views/events/actions/_staged.html.erb
@@ -0,0 +1 @@
+<span><%= event.creator_name %> moved this to '<%= event.stage_name %>'.</span>
diff --git a/app/views/events/actions/_unstaged.html.erb b/app/views/events/actions/_unstaged.html.erb
new file mode 100644
index 000000000..0a3ec87ce
--- /dev/null
+++ b/app/views/events/actions/_unstaged.html.erb
@@ -0,0 +1 @@
+<span><%= event.creator_name %> removed this from '<%= event.stage_name %>'.</span>
diff --git a/app/views/rollups/_rollup.html.erb b/app/views/rollups/_rollup.html.erb
new file mode 100644
index 000000000..63cdce5f2
--- /dev/null
+++ b/app/views/rollups/_rollup.html.erb
@@ -0,0 +1,3 @@
+<div class="rollup flex-inline flex-wrap align-start fill-white border-radius center position-relative" data-controller="rollup">
+  <%= render rollup.events, cache: true %>
+</div>
diff --git a/app/views/thread_entries/_thread_entry.html.erb b/app/views/thread_entries/_thread_entry.html.erb
new file mode 100644
index 000000000..5a2b1f00c
--- /dev/null
+++ b/app/views/thread_entries/_thread_entry.html.erb
@@ -0,0 +1 @@
+<%= render thread_entry.threadable %>
diff --git a/config/importmap.rb b/config/importmap.rb
index 768403738..d5256b3a2 100644
--- a/config/importmap.rb
+++ b/config/importmap.rb
@@ -7,3 +7,4 @@ pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 
 pin_all_from "app/javascript/controllers", under: "controllers"
 pin_all_from "app/javascript/helpers", under: "helpers"
+pin_all_from "app/javascript/extensions", under: "extensions"