Merge pull request #825 from Retrospring/feature/stimulus-announcements

Add Stimulus controller for announcements

app/javascript/packs/application.ts

@@ -4,7 +4,6 @@ import { Application } from '@hotwired/stimulus';
 import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers';
 
 import start from 'retrospring/common';
-import initAnnouncements from 'retrospring/features/announcement';
 import initAnswerbox from 'retrospring/features/answerbox/index';
 import initInbox from 'retrospring/features/inbox/index';
 import initUser from 'retrospring/features/user';
@@ -27,7 +26,6 @@ document.addEventListener('turbo:load', initQuestionbox);
 document.addEventListener('DOMContentLoaded', initQuestion);
 document.addEventListener('DOMContentLoaded', initModeration);
 document.addEventListener('DOMContentLoaded', initMemes);
-document.addEventListener('turbo:load', initAnnouncements);
 document.addEventListener('turbo:load', initLocales);
 document.addEventListener('turbo:load', initFront);
 

app/javascript/retrospring/controllers/announcement_controller.ts

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static values = {
+    id: Number
+  };
+
+  declare readonly idValue: number;
+
+  connect(): void {
+    if (!window.localStorage.getItem(`announcement${this.idValue}`)) {
+      this.element.classList.remove('d-none');
+    }
+  }
+
+  close(): void {
+    window.localStorage.setItem(`announcement${this.idValue}`, 'true');
+  }
+}

app/javascript/retrospring/features/announcement/close.ts

@@ -1,5 +0,0 @@
-export default function (event: Event): void {
-  const announcement = (event.target as HTMLElement).closest(".announcement") as HTMLDivElement;
-  const announcementId = announcement.dataset.announcementId;
-  window.localStorage.setItem(`announcement${announcementId}`, 'true');
-}

app/javascript/retrospring/features/announcement/index.ts

@@ -1,14 +0,0 @@
-import registerEvents from 'utilities/registerEvents';
-import closeAnnouncementHandler from './close';
-
-export default (): void => {
-  registerEvents([
-    { type: 'click', target: document.querySelector('.announcement button.close'), handler: closeAnnouncementHandler },
-  ]);
-
-  document.querySelectorAll('.announcement').forEach(function (el: HTMLDivElement) {
-    if (!window.localStorage.getItem(`announcement${el.dataset.announcementId}`)) {
-      el.classList.remove('d-none');
-    }
-  });
-}

app/views/shared/_announcements.html.haml

@@ -1,8 +1,8 @@
 .announcement__container
   - @active_announcements.each do |announcement|
-    .alert.announcement.alert-info.alert-dismissable.d-none{ data: { 'announcement-id': announcement.id } }
+    .alert.announcement.alert-info.alert-dismissable.d-none{ data: { controller: 'announcement', "announcement-id-value": announcement.id } }
       .container
-        %button.close{ type: :button, data: { dismiss: :alert } }
+        %button.close{ type: :button, data: { dismiss: :alert, action: "click->announcement#close" } }
           %span{ aria: { hidden: true } } ×
         %p
           = announcement.content