only make the read_at post request if message is unread (#959)

- adds a data value for read_status on _message.html.erb partial
defaulted to 'unread'
- sets read_status to 'read' when initially loading partial from
_conversation_content.html.erb
- adds if statement cased on read_status in
message_visibility_controller.js

Author: rsmithlal

app/javascript/controllers/better_together/message_visibility_controller.js

@@ -22,7 +22,7 @@ export default class extends Controller {
 				const messageId = this.element.dataset.messageId;
 				console.log(`Message ${messageId} is on screen.`);
 
-				this.markAsRead(messageId);
+				if (this.element.dataset.readStatus === 'unread') { this.markAsRead(messageId); }
 
 				observer.unobserve(this.element);
 			}
@@ -40,13 +40,13 @@ export default class extends Controller {
 				record_id: messageId
 			})
 		})
-		.then(response => {
-			if (response.ok) {
-				console.log(`Notification for message ${messageId} marked as read.`)
-			} else {
-				console.error(`Failed to mark notification for message ${messageId} as read.`)
-			}
-		})
+			.then(response => {
+				if (response.ok) {
+					console.log(`Notification for message ${messageId} marked as read.`)
+				} else {
+					console.error(`Failed to mark notification for message ${messageId} as read.`)
+				}
+			})
 	}
 
 	getCSRFToken() {

app/views/better_together/conversations/_conversation_content.html.erb

@@ -17,7 +17,7 @@
   <%= turbo_stream_from conversation %>
 
   <div id="conversation_messages" class="card-body p-4" data-controller="better_together--conversation-messages" data-better_together--conversation-messages-current-person-id-value="<%= current_person.id %>">
-    <%= render(partial: 'better_together/messages/message', collection: messages, as: :message) || render(partial: 'better_together/conversations/empty', locals: { conversation: }) %>
+    <%= render(partial: 'better_together/messages/message', collection: messages, as: :message, locals: {read_status: 'read'}) || render(partial: 'better_together/conversations/empty', locals: { conversation: }) %>
   </div>
 
   <div class="card-footer">

app/views/better_together/messages/_message.html.erb

@@ -1,15 +1,22 @@
 <!-- app/views/messages/_message.html.erb -->
 
-<%# locals: (message:, me: false) %>
+<%# locals: (message:, me: false, read_status: 'unread') %>
 
-<div id="<%= dom_id(message) %>" class="<%= dom_class(message, :conversation) %> d-flex mb-3 <% if me %>me<% end %>" data-sender-id="<%= message.sender_id %>">
-  <div class="message-container">
-    <div class="message-header d-flex">
-      <strong class="me-2"><%= message.sender.name %></strong>
-      <small class="text-muted"><%= l(message.created_at, format: :short) %></small>
-    </div>
-    <div class="message-bubble p-3 rounded" data-controller="better-together--message_visibility" data-message-id="<%= message.id %>">
-      <%= message.content %>
-    </div>
-  </div>
-</div>
+
+	<div id="<%= dom_id(message) %>" class="<%= dom_class(message, :conversation) %> d-flex mb-3 <% if me %>me<% end %>"
+		data-sender-id="<%= message.sender_id %>">
+		<div class="message-container">
+			<div class="message-header d-flex">
+				<strong class="me-2">
+					<%= message.sender.name %>
+				</strong>
+				<small class="text-muted">
+					<%= l(message.created_at, format: :short) %>
+				</small>
+			</div>
+			<div class="message-bubble p-3 rounded" data-controller="better-together--message_visibility"
+				data-message-id="<%= message.id %>" data-read-status="<%= read_status %>">
+				<%= message.content %>
+			</div>
+		</div>
+	</div>