From aa6224b7ab9e5216d44dac04f21b99eb67bfa771 Mon Sep 17 00:00:00 2001 From: yocchan-git Date: Wed, 20 Mar 2024 17:13:43 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=83=AD=E3=83=B3=E3=83=88=E5=81=B4?= =?UTF-8?q?=E3=81=A7=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E3=82=92=E5=87=BA=E5=8A=9B=E3=81=99=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/controllers/api/followings_controller.rb | 6 +-- app/javascript/following.js | 55 +++++++++++++++++--- app/views/users/_following.html.slim | 2 +- 3 files changed, 53 insertions(+), 10 deletions(-) diff --git a/app/controllers/api/followings_controller.rb b/app/controllers/api/followings_controller.rb index df2deba1b48..5f67a25f5f6 100644 --- a/app/controllers/api/followings_controller.rb +++ b/app/controllers/api/followings_controller.rb @@ -7,7 +7,7 @@ def create user = User.find(params[:id]) watch = params[:watch] == 'true' if current_user.follow(user, watch:) - render json: { html: render_to_string(partial: 'users/following', locals: { user: }) } + render json: {} else head :bad_request end @@ -17,7 +17,7 @@ def update user = User.find(params[:id]) watch = params[:watch] == 'true' if current_user.change_watching(user, watch) - render json: { html: render_to_string(partial: 'users/following', locals: { user: }) } + render json: {} else head :bad_request end @@ -26,7 +26,7 @@ def update def destroy user = User.find(params[:id]) if current_user.unfollow(user) - render json: { html: render_to_string(partial: 'users/following', locals: { user: }) } + render json: {} else head :bad_request end diff --git a/app/javascript/following.js b/app/javascript/following.js index 3df20cfca24..1a3c37f910b 100644 --- a/app/javascript/following.js +++ b/app/javascript/following.js @@ -29,15 +29,40 @@ const usersIndex = { redirect: 'manual', body: JSON.stringify(params) }) - .then(function (response) { + .then(response => { if (response.ok) { return response.json() } else { alert('フォロー処理に失敗しました') } }) - .then(function (data) { - document.getElementById(`follow_${userId}`).innerHTML = data.html + .then(() => { + const button = document.getElementById(`follow_${userId}`); + const summary = button.querySelector('.following__summary span'); + const options = Array.from(button.querySelectorAll('.following__dropdown-item button')); + + if (isWatch) { + summary.className = 'a-button is-warning is-sm is-block'; + summary.innerHTML = 'コメントあり'; + + options[0].className = 'following-option a-dropdown__item-inner is-active'; + options[0].onclick = null; + options[1].className = 'following-option a-dropdown__item-inner'; + options[1].onclick = function() { usersIndex.followOrChangeFollow(userId, true, false); }; + options[2].className = 'following-option a-dropdown__item-inner'; + options[2].onclick = function() { usersIndex.unfollow(userId, true); }; + } else { + summary.className = 'a-button is-warning is-sm is-block'; + summary.innerHTML = 'コメントなし'; + + options[0].className = 'following-option a-dropdown__item-inner'; + options[0].onclick = function() { usersIndex.followOrChangeFollow(userId, true, true); }; + options[1].className = 'following-option a-dropdown__item-inner is-active'; + options[1].onclick = null; + options[2].className = 'following-option a-dropdown__item-inner'; + options[2].onclick = function() { usersIndex.unfollow(userId, true); }; + } + this.closeFollowDetails(userId); }) .catch(function (error) { console.warn(error) @@ -59,19 +84,37 @@ const usersIndex = { redirect: 'manual', body: JSON.stringify(params) }) - .then(function (response) { + .then(response => { if (response.ok) { return response.json() } else { alert('フォロー処理に失敗しました') } }) - .then(function (data) { - document.getElementById(`follow_${userId}`).innerHTML = data.html + .then(() => { + const button = document.getElementById(`follow_${userId}`); + + const summary = button.querySelector('.following__summary span'); + summary.className = 'a-button is-secondary is-sm is-block'; + summary.innerHTML = "フォローする"; + + const options = Array.from(button.querySelectorAll('.following__dropdown-item button')); + options[0].className = 'following-option a-dropdown__item-inner'; + options[0].onclick = function() { usersIndex.followOrChangeFollow(userId, false, true); }; + options[1].className = 'following-option a-dropdown__item-inner'; + options[1].onclick = function() { usersIndex.followOrChangeFollow(userId, false, false); }; + options[2].className = 'following-option a-dropdown__item-inner is-active'; + options[2].onclick = null; + + this.closeFollowDetails(userId); }) .catch(function (error) { console.warn(error) }) + }, + closeFollowDetails(userId) { + const details = document.getElementById(`follow_details${userId}`); + details.open = false } } diff --git a/app/views/users/_following.html.slim b/app/views/users/_following.html.slim index 141cfa2dccf..8f0257c0597 100644 --- a/app/views/users/_following.html.slim +++ b/app/views/users/_following.html.slim @@ -1,4 +1,4 @@ -details.following ref='followingDetailsRef' +details.following id="follow_details#{user.id}" - is_following = current_user.following?(user) - is_watching = current_user.watching?(user) summary.following__summary