From d529c86dd6e2aafd47bcdad24d8cf23ad28222b8 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 17:25:55 +0100
Subject: [PATCH 1/6] Update chat messages component to use stimulus 2 syntax

---
 app/components/chat_message/chat_message.html.erb | 4 ++--
 app/components/chat_message/chat_message.js       | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/chat_message/chat_message.html.erb b/app/components/chat_message/chat_message.html.erb
index e7211000c..b669a5284 100644
--- a/app/components/chat_message/chat_message.html.erb
+++ b/app/components/chat_message/chat_message.html.erb
@@ -1,8 +1,8 @@
 <div
   class="<%= class_attr %>"
   data-controller="chat-message"
-  data-chat-message-id="<%= message.id %>"
-  data-chat-message-sender-name="<%= message.sender&.name %>"
+  data-chat-message-id-value="<%= message.id %>"
+  data-chat-message-sender-name-value="<%= message.sender&.name %>"
   id="<%= id %>"
 >
     <div class="ChatMessage-text" data-chat-message-target="text">
diff --git a/app/components/chat_message/chat_message.js b/app/components/chat_message/chat_message.js
index d2977789f..c7d690ca1 100644
--- a/app/components/chat_message/chat_message.js
+++ b/app/components/chat_message/chat_message.js
@@ -5,6 +5,10 @@ const SUCCESS_NOTIFICATION_DURATION = 2000;
 
 export default class extends Controller {
   static targets = ['text', 'toggleExpanded'];
+  static values = {
+    senderName: String,
+    id: String
+  }
 
   connect() {
     if (this.isTruncated()) {
@@ -41,7 +45,7 @@ export default class extends Controller {
 
   copy() {
     const text = this.textTarget.innerText;
-    const sender = this.data.get('sender-name');
+    const sender = this.senderNameValue;
     let clipboardText = `${sender}: ${text}`;
 
     if (!sender) {
@@ -65,7 +69,7 @@ export default class extends Controller {
 
   toggleHighlighted() {
     Rails.ajax({
-      url: `/messages/${this.data.get('id')}/highlight`,
+      url: `/messages/${this.idValue}/highlight`,
       type: 'POST',
       data: `highlighted=${!this.isHighlighted()}`,
     });

From 809405c2dcbe10513e006092bf360ec7764b20fb Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 17:32:07 +0100
Subject: [PATCH 2/6] Update request form component with values api syntax

---
 app/components/request_form/request_form.html.erb | 2 +-
 app/components/request_form/request_form.js       | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/request_form/request_form.html.erb b/app/components/request_form/request_form.html.erb
index 54410b00e..a85631bf8 100644
--- a/app/components/request_form/request_form.html.erb
+++ b/app/components/request_form/request_form.html.erb
@@ -5,7 +5,7 @@
   class: 'RequestForm',
   data: {
     controller: 'request-form',
-    request_form_members_count_message: I18n.t('request.form.members_count_message').to_json
+    request_form_members_count_message_value: I18n.t('request.form.members_count_message').to_json
   }
 ) do %>
   <div class="RequestForm-column" data-action="input->request-form#updatePreview">
diff --git a/app/components/request_form/request_form.js b/app/components/request_form/request_form.js
index 19ede35ed..7de2317ff 100644
--- a/app/components/request_form/request_form.js
+++ b/app/components/request_form/request_form.js
@@ -9,6 +9,9 @@ const template = ({ message, notes }) => {
 
 export default class extends Controller {
   static targets = ['preview', 'message', 'membersCount'];
+  static values = {
+    membersCountMessage: String
+  }
 
   connect() {
     this.updatePreview();
@@ -29,7 +32,7 @@ export default class extends Controller {
       return;
     }
 
-    const messageTemplates = JSON.parse(this.data.get('members-count-message'));
+    const messageTemplates = JSON.parse(this.membersCountMessageValue);
     const tags = event.detail.tags;
 
     Rails.ajax({

From 45b15e68054fc793a164f373bcb0ca1af07003df Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 17:41:21 +0100
Subject: [PATCH 3/6] Update request notification component to use new value
 api syntax

---
 .../request_notification.html.erb                    |  6 +++---
 .../request_notification/request_notification.js     | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/components/request_notification/request_notification.html.erb b/app/components/request_notification/request_notification.html.erb
index 66b6e5fbf..cd61c1392 100644
--- a/app/components/request_notification/request_notification.html.erb
+++ b/app/components/request_notification/request_notification.html.erb
@@ -1,9 +1,9 @@
 <div 
   class="RequestNotification" 
   data-controller="request-notification" 
-  data-request-notification-id="<%= request.id %>" 
-  data-request-notification-last-updated-at="<%= last_updated_at %>"
-  data-request-notification-message-template="<%= t('components.request_notification.message_template').to_json %>"
+  data-request-notification-id-value="<%= request.id %>" 
+  data-request-notification-last-updated-at-value="<%= last_updated_at %>"
+  data-request-notification-message-template-value="<%= t('components.request_notification.message_template').to_json %>"
   hidden
 >
   <%= c 'notification', show_close: false do %>
diff --git a/app/components/request_notification/request_notification.js b/app/components/request_notification/request_notification.js
index 32418e47a..75cccb1b5 100644
--- a/app/components/request_notification/request_notification.js
+++ b/app/components/request_notification/request_notification.js
@@ -5,20 +5,24 @@ const POLLING_INTERVAL = 1000 * 30;
 
 export default class extends Controller {
   static targets = ['text'];
+  static values = {
+    id: String,
+    lastUpdatedAt: String,
+    messageTemplate: String
+  }
 
   connect() {
-    this.lastUpdatedAt = this.data.get('last-updated-at');
-    this.messageTemplate = JSON.parse(this.data.get('message-template'));
+    this.messageTemplate = JSON.parse(this.messageTemplateValue);
     this.fetchMessages();
     setInterval(() => this.fetchMessages(), POLLING_INTERVAL);
   }
 
   fetchMessages() {
     Rails.ajax({
-      url: `/requests/${this.data.get('id')}/notifications`,
+      url: `/requests/${this.idValue}/notifications`,
       type: 'GET',
       data: new URLSearchParams({
-        last_updated_at: this.lastUpdatedAt,
+        last_updated_at: this.lastUpdatedAtValue,
       }).toString(),
       success: ({ message_count }) => {
         if (message_count == 0) {

From d43a70d892b2b70634a2ae6b998cdeff80e930be Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 18:18:12 +0100
Subject: [PATCH 4/6] Update tags input component to use values api syntax

---
 app/components/tags_input/tags_input.html.erb |  6 +++---
 app/components/tags_input/tags_input.js       | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/components/tags_input/tags_input.html.erb b/app/components/tags_input/tags_input.html.erb
index 3d0d514fc..f00ea726c 100644
--- a/app/components/tags_input/tags_input.html.erb
+++ b/app/components/tags_input/tags_input.html.erb
@@ -1,9 +1,9 @@
 <div
   class="TagsInput"
   data-controller="tags-input"
-  data-tags-input-available-tags="<%= available_tags %>"
-  data-tags-input-allow-new="<%= allow_new %>"
-  data-tags-input-members-label="<%= I18n.t('contributor.contributor').to_json %>"
+  data-tags-input-available-tags-value="<%= available_tags %>"
+  data-tags-input-allow-new-value="<%= allow_new %>"
+  data-tags-input-members-label-value="<%= I18n.t('contributor.contributor').to_json %>"
 >
   <%= c 'input', value: value, stimulus_controller: 'tags-input', stimulus_target: 'input', **props %>
 </div>
diff --git a/app/components/tags_input/tags_input.js b/app/components/tags_input/tags_input.js
index 9272726ab..06d8e5c24 100644
--- a/app/components/tags_input/tags_input.js
+++ b/app/components/tags_input/tags_input.js
@@ -37,6 +37,11 @@ function transformTag(tagData) {
 
 export default class extends Controller {
   static targets = ['input'];
+  static values = {
+    availableTags: String,
+    allowNew: Boolean,
+    membersLabel: String
+  }
 
   connect() {
     this.tagify = new Tagify(this.inputTarget, {
@@ -44,8 +49,8 @@ export default class extends Controller {
         return tags.map(tag => tag.value).join(',');
       },
 
-      whitelist: JSON.parse(this.data.get('available-tags')),
-      enforceWhitelist: !JSON.parse(this.data.get('allow-new')),
+      whitelist: JSON.parse(this.availableTagsValue),
+      enforceWhitelist: !this.allowNewValue,
 
       dropdown: {
         classname: 'TagsInput-dropdown',
@@ -58,9 +63,8 @@ export default class extends Controller {
       },
 
       transformTag,
-
       labels: {
-        members: JSON.parse(this.data.get('members-label')),
+        members: JSON.parse(this.membersLabelValue),
       },
     });
 

From 8a1f9da6f59754601dbff565db614eb19764451c Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 18:18:49 +0100
Subject: [PATCH 5/6] Fix lint

---
 app/components/chat_message/chat_message.js                 | 4 ++--
 app/components/request_form/request_form.js                 | 4 ++--
 app/components/request_notification/request_notification.js | 4 ++--
 app/components/tags_input/tags_input.js                     | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/chat_message/chat_message.js b/app/components/chat_message/chat_message.js
index c7d690ca1..a7f8d79a4 100644
--- a/app/components/chat_message/chat_message.js
+++ b/app/components/chat_message/chat_message.js
@@ -7,8 +7,8 @@ export default class extends Controller {
   static targets = ['text', 'toggleExpanded'];
   static values = {
     senderName: String,
-    id: String
-  }
+    id: String,
+  };
 
   connect() {
     if (this.isTruncated()) {
diff --git a/app/components/request_form/request_form.js b/app/components/request_form/request_form.js
index 7de2317ff..f6f81da79 100644
--- a/app/components/request_form/request_form.js
+++ b/app/components/request_form/request_form.js
@@ -10,8 +10,8 @@ const template = ({ message, notes }) => {
 export default class extends Controller {
   static targets = ['preview', 'message', 'membersCount'];
   static values = {
-    membersCountMessage: String
-  }
+    membersCountMessage: String,
+  };
 
   connect() {
     this.updatePreview();
diff --git a/app/components/request_notification/request_notification.js b/app/components/request_notification/request_notification.js
index 75cccb1b5..63ad28dcd 100644
--- a/app/components/request_notification/request_notification.js
+++ b/app/components/request_notification/request_notification.js
@@ -8,8 +8,8 @@ export default class extends Controller {
   static values = {
     id: String,
     lastUpdatedAt: String,
-    messageTemplate: String
-  }
+    messageTemplate: String,
+  };
 
   connect() {
     this.messageTemplate = JSON.parse(this.messageTemplateValue);
diff --git a/app/components/tags_input/tags_input.js b/app/components/tags_input/tags_input.js
index 06d8e5c24..fdb0c63dc 100644
--- a/app/components/tags_input/tags_input.js
+++ b/app/components/tags_input/tags_input.js
@@ -40,8 +40,8 @@ export default class extends Controller {
   static values = {
     availableTags: String,
     allowNew: Boolean,
-    membersLabel: String
-  }
+    membersLabel: String,
+  };
 
   connect() {
     this.tagify = new Tagify(this.inputTarget, {

From 652019b432fa9689ca1fe8e4a5d7dae52290067a Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 6 Feb 2021 18:25:20 +0100
Subject: [PATCH 6/6] Update to use classes api from stimulus 2.0

---
 .../chat_message/chat_message.html.erb        |  4 ++++
 app/components/chat_message/chat_message.js   | 20 +++++++++----------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/components/chat_message/chat_message.html.erb b/app/components/chat_message/chat_message.html.erb
index b669a5284..1ce50b7fc 100644
--- a/app/components/chat_message/chat_message.html.erb
+++ b/app/components/chat_message/chat_message.html.erb
@@ -3,6 +3,10 @@
   data-controller="chat-message"
   data-chat-message-id-value="<%= message.id %>"
   data-chat-message-sender-name-value="<%= message.sender&.name %>"
+  data-chat-message-truncated-class="ChatMessage--truncated"
+  data-chat-message-expanded-class="ChatMessage--expanded"
+  data-chat-message-copied-class="ChatMessage--copied"
+  data-chat-message-highlighted-class="ChatMessage--highlighted"
   id="<%= id %>"
 >
     <div class="ChatMessage-text" data-chat-message-target="text">
diff --git a/app/components/chat_message/chat_message.js b/app/components/chat_message/chat_message.js
index a7f8d79a4..64aae742b 100644
--- a/app/components/chat_message/chat_message.js
+++ b/app/components/chat_message/chat_message.js
@@ -5,14 +5,14 @@ const SUCCESS_NOTIFICATION_DURATION = 2000;
 
 export default class extends Controller {
   static targets = ['text', 'toggleExpanded'];
+  static classes = ['truncated', 'expanded', 'copied', 'highlighted'];
   static values = {
     senderName: String,
     id: String,
   };
-
   connect() {
     if (this.isTruncated()) {
-      this.element.classList.add('ChatMessage--truncated');
+      this.element.classList.add(this.truncatedClass);
       this.collapse();
     }
   }
@@ -22,7 +22,7 @@ export default class extends Controller {
   }
 
   isExpanded() {
-    return this.element.classList.contains('ChatMessage--expanded');
+    return this.element.classList.contains(this.expandedClass);
   }
 
   toggleExpanded() {
@@ -34,12 +34,12 @@ export default class extends Controller {
   }
 
   expand() {
-    this.element.classList.add('ChatMessage--expanded');
+    this.element.classList.add(this.expandedClass);
     this.toggleExpandedTarget.setAttribute('aria-expanded', 'true');
   }
 
   collapse() {
-    this.element.classList.remove('ChatMessage--expanded');
+    this.element.classList.remove(this.expandedClass);
     this.toggleExpandedTarget.setAttribute('aria-expanded', 'false');
   }
 
@@ -56,15 +56,15 @@ export default class extends Controller {
   }
 
   onCopy() {
-    this.element.classList.add('ChatMessage--copied');
+    this.element.classList.add(this.copiedClass);
 
     setTimeout(() => {
-      this.element.classList.remove('ChatMessage--copied');
+      this.element.classList.remove(this.copiedClass);
     }, SUCCESS_NOTIFICATION_DURATION);
   }
 
   isHighlighted() {
-    return this.element.classList.contains('ChatMessage--highlighted');
+    return this.element.classList.contains(this.highlightedClass);
   }
 
   toggleHighlighted() {
@@ -82,10 +82,10 @@ export default class extends Controller {
   }
 
   highlight() {
-    this.element.classList.add('ChatMessage--highlighted');
+    this.element.classList.add(this.highlightedClass);
   }
 
   unhighlight() {
-    this.element.classList.remove('ChatMessage--highlighted');
+    this.element.classList.remove(this.highlightedClass);
   }
 }