Merge pull request #1421 from Retrospring/feature/turbo-relationships

Move relationship functionality to Turbo Streams

app/controllers/relationships_controller.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+class RelationshipsController < ApplicationController
+  include TurboStreamable
+
+  before_action :authenticate_user!
+
+  turbo_stream_actions :create, :destroy
+
+  def create
+    params.require :screen_name
+
+    UseCase::Relationship::Create.call(
+      source_user: current_user,
+      target_user: ::User.find_by!(screen_name: params[:screen_name]),
+      type:        params[:type],
+    )
+
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: [
+          turbo_stream.replace("#{params[:type]}-#{params[:screen_name]}", partial: "relationships/destroy", locals: { type: params[:type], screen_name: params[:screen_name] }),
+          render_toast(t(".#{params[:type]}.success"))
+        ]
+      end
+
+      format.html { redirect_back(fallback_location: user_path(username: params[:screen_name])) }
+    end
+  end
+
+  def destroy
+    UseCase::Relationship::Destroy.call(
+      source_user: current_user,
+      target_user: ::User.find_by!(screen_name: params[:screen_name]),
+      type:        params[:type],
+    )
+
+    respond_to do |format|
+      format.turbo_stream do
+        render turbo_stream: [
+          turbo_stream.replace("#{params[:type]}-#{params[:screen_name]}", partial: "relationships/create", locals: { type: params[:type], screen_name: params[:screen_name] }),
+          render_toast(t(".#{params[:type]}.success"))
+        ]
+      end
+
+      format.html { redirect_back(fallback_location: user_path(username: params[:screen_name])) }
+    end
+  end
+end

app/javascript/retrospring/features/user/index.ts

@@ -1,12 +1,8 @@
-import { userActionHandler } from './action';
 import { userReportHandler } from './report';
 import registerEvents from 'retrospring/utilities/registerEvents';
 
 export default (): void => {
   registerEvents([
-    { type: 'click', target: 'button[name=user-action]', handler: userActionHandler, global: true },
-    { type: 'click', target: '[data-action=block], [data-action=unblock]', handler: userActionHandler, global: true },
-    { type: 'click', target: '[data-action=mute], [data-action=unmute]', handler: userActionHandler, global: true },
     { type: 'click', target: 'a[data-action=report-user]', handler: userReportHandler, global: true }
   ]);
 }

app/views/relationships/_create.html.haml

@@ -0,0 +1,13 @@
+- if type == "follow"
+  = button_to relationships_path(screen_name:, type:), form: { id: "#{type}-#{screen_name}" }, class: "btn btn-primary", form_class: "d-grid" do
+    = t("voc.follow")
+
+- if type == "block"
+  = button_to relationships_path(screen_name:, type:), form: { id: "#{type}-#{screen_name}" }, class: "dropdown-item" do
+    %i.fa.fa-minus-circle.fa-fw
+    = t("voc.block")
+
+- if type == "mute"
+  = button_to relationships_path(screen_name:, type:), form: { id: "#{type}-#{screen_name}" }, class: "dropdown-item" do
+    %i.fa.fa-volume-off.fa-fw
+    = t("voc.mute")

app/views/relationships/_destroy.html.haml

@@ -0,0 +1,14 @@
+- if type == "follow"
+  = button_to relationships_path(screen_name:, type:), method: :delete, form: { id: "#{type}-#{screen_name}" }, class: "btn btn-primary",
+                                                       form_class: "d-grid" do
+    = t("voc.unfollow")
+
+- if type == "block"
+  = button_to relationships_path(screen_name:, type:), method: :delete, form: { id: "#{type}-#{screen_name}" }, class: "dropdown-item" do
+    %i.fa.fa-minus-circle.fa-fw
+    = t("voc.unblock")
+
+- if type == "mute"
+  = button_to relationships_path(screen_name:, type:), method: :delete, form: { id: "#{type}-#{screen_name}" }, class: "dropdown-item" do
+    %i.fa.fa-volume-off.fa-fw
+    = t("voc.unmute")

app/views/user/_actions.html.haml

@@ -9,11 +9,9 @@
   - elsif user_signed_in?
     .d-grid.gap-2
       - if own_followings&.include?(user.id) || current_user.following?(user)
-        %button.btn.btn-primary{ type: :button, name: 'user-action', data: { action: :unfollow, type: type, target: user.screen_name } }
-          = t("voc.unfollow")
+        = render "relationships/destroy", type: "follow", screen_name: user.screen_name
       - else
-        %button.btn.btn-primary{ type: :button, name: 'user-action', data: { action: :follow, type: type, target: user.screen_name } }
-          = t("voc.follow")
+        = render "relationships/create", type: "follow", screen_name: user.screen_name
       .btn-group
         %button.btn.btn-light.btn-sm.dropdown-toggle{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
           = t(".title")
@@ -23,21 +21,13 @@
             %i.fa.fa-list.fa-fw
             = t(".list")
           - if own_blocks&.include?(user.id) || current_user.blocking?(user)
-            %a.dropdown-item{ href: '#', data: { action: :unblock, target: user.screen_name } }
-              %i.fa.fa-minus-circle.fa-fw
-              %span.pe-none= t("voc.unblock")
+            = render "relationships/destroy", type: "block", screen_name: user.screen_name
           - else
-            %a.dropdown-item{ href: '#', data: { action: :block, target: user.screen_name } }
-              %i.fa.fa-minus-circle.fa-fw
-              %span.pe-none= t("voc.block")
+            = render "relationships/create", type: "block", screen_name: user.screen_name
           - if own_mutes&.include?(user.id) || current_user.muting?(user)
-            %a.dropdown-item{ href: '#', data: { action: :unmute, target: user.screen_name } }
-              %i.fa.fa-volume-off.fa-fw
-              %span.pe-none= t("voc.unmute")
+            = render "relationships/destroy", type: "mute", screen_name: user.screen_name
           - else
-            %a.dropdown-item{ href: '#', data: { action: :mute, target: user.screen_name } }
-              %i.fa.fa-volume-off.fa-fw
-              %span.pe-none= t("voc.mute")
+            = render "relationships/create", type: "mute", screen_name: user.screen_name
           %a.dropdown-item{ href: '#', data: { action: 'report-user', target: user.screen_name } }
             %i.fa.fa-exclamation-triangle.fa-fw
             = t("voc.report")

config/locales/controllers.en.yml

@@ -101,27 +101,6 @@ en:
         notfound: "Question does not exist."
         noauth: "You are not allowed to delete this question."
         success: "Successfully deleted question."
-    relationship:
-      create:
-        block:
-          success: "Successfully blocked user."
-          error: "You are already blocking that user."
-        follow:
-          success: "Successfully followed user."
-          error: "You are already following that user."
-        mute:
-          success: "Successfully muted user."
-          error: "You are already muting that user."
-      destroy:
-        block:
-          success: "Successfully unblocked user."
-          error: "You are not blocking that user."
-        follow:
-          success: "Successfully unfollowed user."
-          error: "You are not following that user."
-        mute:
-          success: "Successfully unmuted user."
-          error: "You are not muting that user."
     report:
       create:
         noauth: :ajax.noauth
@@ -216,6 +195,27 @@ en:
     registrations:
       destroy:
         export_pending: "You may not delete your account while account data is currently being exported."
+  relationships:
+    create:
+      block:
+        success: "Successfully blocked user."
+        error: "You are already blocking that user."
+      follow:
+        success: "Successfully followed user."
+        error: "You are already following that user."
+      mute:
+        success: "Successfully muted user."
+        error: "You are already muting that user."
+    destroy:
+      block:
+        success: "Successfully unblocked user."
+        error: "You are not blocking that user."
+      follow:
+        success: "Successfully unfollowed user."
+        error: "You are not following that user."
+      mute:
+        success: "Successfully unmuted user."
+        error: "You are not muting that user."
   timeline:
     public:
       title: "Public Timeline"

config/routes.rb

@@ -147,6 +147,7 @@
   get "/inbox", to: "inbox#show", as: :inbox
 
   resource :subscriptions, controller: :subscriptions, only: %i[create destroy]
+  resource :relationships, only: %i[create destroy]
 
   get "/user/:username", to: "user#show"
   get "/@:username", to: "user#show", as: :user