フロント側でボタンの内容を出力するよう修正

fjordllc · Mar 20, 2024 · aa6224b · aa6224b
1 parent 6034c72
commit aa6224b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git 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
@@ -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 = '<i class="fa-solid fa-check"></i><span>コメントあり</span>';
+
+          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 = '<i class="fa-solid fa-check"></i><span>コメントなし</span>';
+
+          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
@@ -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