diff --git a/app/javascript/application.js b/app/javascript/application.js index 611524bf3..b72a57bf8 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,4 +1,5 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "@hotwired/turbo-rails" import "extensions" +import "initializers" import "controllers" diff --git a/app/javascript/controllers/thread_controller.js b/app/javascript/controllers/thread_controller.js new file mode 100644 index 000000000..0671c8361 --- /dev/null +++ b/app/javascript/controllers/thread_controller.js @@ -0,0 +1,13 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static classes = [ "myComment" ] + + connect() { + this.#myComments.forEach(comment => comment.classList.add(this.myCommentClass)) + } + + get #myComments() { + return this.element.querySelectorAll(`.comment[data-creator-id='${Current.user.id}']`) + } +} diff --git a/app/javascript/initializers/current.js b/app/javascript/initializers/current.js new file mode 100644 index 000000000..96ace04b5 --- /dev/null +++ b/app/javascript/initializers/current.js @@ -0,0 +1,15 @@ +class Current { + get user() { + const currentUserId = this.#extractContentFromMetaTag("current-user-id") + + if (currentUserId) { + return { id: parseInt(currentUserId) } + } + } + + #extractContentFromMetaTag(name) { + return document.head.querySelector(`meta[name="${name}"]`)?.getAttribute("content") + } +} + +window.Current = new Current() diff --git a/app/javascript/initializers/index.js b/app/javascript/initializers/index.js new file mode 100644 index 000000000..10fb36975 --- /dev/null +++ b/app/javascript/initializers/index.js @@ -0,0 +1 @@ +import "initializers/current" diff --git a/app/views/bubbles/_thread.html.erb b/app/views/bubbles/_thread.html.erb index cbf5130a0..3549aa0c6 100644 --- a/app/views/bubbles/_thread.html.erb +++ b/app/views/bubbles/_thread.html.erb @@ -1,4 +1,8 @@ -
+
<%= render partial: "thread_entries/thread_entry", collection: bubble.thread.entries, cache: true %> <%= render "comments/new", bubble: bubble %>
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 7b310226d..19ec8cd92 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,5 +1,4 @@ -<%# FIXME: Can't use a Current.user reference in a partial that must be cached. Needs to convert to use Stimulus controller pulling from a meta current-id %> -<%= tag.div id: dom_id(comment), class: [ "comment flex align-start full-width", { "comment--mine": Current.user == comment.creator } ] do %> +
<%= avatar_tag comment.creator, loading: :lazy %>
@@ -17,4 +16,4 @@ <%= simple_format comment.body %>
-<% end %> + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 990453a7c..74b6ec274 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,6 +9,10 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> + <% if Current.user %> + + <% end %> + <%= yield :head %> <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %> diff --git a/config/importmap.rb b/config/importmap.rb index d5256b3a2..4ea592f21 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -8,3 +8,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" +pin_all_from "app/javascript/initializers", under: "initializers"