ActionCableでコメントを削除する
解決したいこと
現在ActionCableコメント投稿機能を実装中。
投稿したコメントには削除ボタンが実装されており、これを削除する
現状の実装
❶コメント投稿時に用意したmessage_channel.rbと同様に
delete_channel.rbを用意しサーバーと繋げてあげる記述を行う
❷コントローラーではコメント削除後にdelete_channelへ@commentのデータを渡してあげる
❸delete_channnel.jsにてコメント削除の記述
該当するソースコード
#message_channnel.js
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const html = `<p><a href="/#/">@${data.user.nickname}</a></p>
<span style="font-weight:bold;">${data.content.content}</span>
${data.date}
<button id="<%=comment.post.id%>" class="delete-btn">削除</button>`;
const messages = document.getElementById('comment-box');
const newMessage = document.getElementById('comment_content');
messages.insertAdjacentHTML('beforebegin', html);
newMessage.value='';
}
});
#delete_channnel.js
import consumer from "./consumer"
consumer.subscriptions.create("DeleteChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received: function(data) {
},
window.addEventListener('load', function(){
const deleteBtn = document.getElementById("2")
deleteBtn.addEventListener('click', function() {
console.log("click OK")
})
})
});
#delete_channnel.rb
class DeleteChannel < ApplicationCable::Channel
def subscribed
stream_from "delete_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
#comments_controller.rb
def destroy
@post = Post.find(params[:post_id])
@comment = Comment.find(params[:id])
if @comment.destroy
ActionCable.server.broadcast 'delete_channel', id: @comment
end
end
#_index.html.erb
<div class="collapse" id="collapseExample">
<% @comments.offset(2).each do |comment| %>
<% unless comment.id.nil? %>
<li class="comment-container">
<div class="comment-box">
<div class="comment-text">
<p><%= link_to "@#{comment.user.nickname}", user_path(comment.user.id) %></p>
<div class="comment-entry">
<span style="font-weight:bold;"><%= comment.content %></span>
<%= comment.created_at.to_s(:datetime_jp) %>
<% if comment.user == current_user %>
<%= link_to post_comment_path(comment.post_id, comment.id), method: :delete, remote: true do %>
<button id="<%=comment.post.id%>" class="delete-btn">削除</button>
<% end %>
<% end %>
</div>
</div>
</div>
</li>
<% end %>
<% end %>
</div>
自分で試したこと
ActionCableを用いて、チャンネル内の記述を行い、実装済みのコメント削除ボタンをクリック後に動作が行われる結果を得たいと思い、アクションプランを立てています。
どういった解決策がありますでしょうか？
また、方向性はあっていますでしょうか？
お答えいただけましたら幸いです。。
0
