WIP: Add UI to manage (anonymous) blocks

app/controllers/ajax/anonymous_block_controller.rb

@@ -31,7 +31,7 @@ class Ajax::AnonymousBlockController < AjaxController
     block.destroy!
 
     @response[:status] = :okay
-    @response[:message] = I18n.t("messages.block.create.okay")
+    @response[:message] = I18n.t("messages.block.destroy.okay")
     @response[:success] = true
   end
 end

app/controllers/user_controller.rb

@@ -223,4 +223,9 @@ class UserController < ApplicationController
     @rules = MuteRule.where(user: current_user)
   end
   # endregion
+
+  def edit_blocks
+    @blocks = Relationships::Block.where(source: current_user)
+    @anonymous_blocks = AnonymousBlock.where(user: current_user)
+  end
 end

app/javascript/retrospring/features/settings/block.ts

@@ -0,0 +1,27 @@
+import Rails from '@rails/ujs';
+import { showNotification, showErrorNotification } from 'utilities/notifications';
+import I18n from 'retrospring/i18n';
+
+export function unblockAnonymousHandler(event: Event): void {
+  const button: HTMLButtonElement = event.currentTarget as HTMLButtonElement;
+  const targetId = button.dataset.target;
+  let success = false;
+
+  Rails.ajax({
+    url: `/ajax/block_anon/${targetId}`,
+    type: 'DELETE',
+    success: (data) => {
+      success = data.success;
+      showNotification(data.message, data.success);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    },
+    complete: () => {
+      if (!success) return;
+
+      button.closest('.list-group-item').remove();
+     }
+  });
+}

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

@@ -3,6 +3,7 @@ import { muteDocumentHandler } from "./mute";
 import { profileHeaderChangeHandler, profilePictureChangeHandler } from "./crop";
 import { themeDocumentHandler, themeSubmitHandler } from "./theme";
 import { userSubmitHandler } from "./password";
+import { unblockAnonymousHandler } from "./block";
 
 export default (): void => {
   muteDocumentHandler();
@@ -12,6 +13,7 @@ export default (): void => {
     { type: 'submit', target: document.querySelector('#update_theme'), handler: themeSubmitHandler },
     { type: 'submit', target: document.querySelector('#edit_user'), handler: userSubmitHandler },
     { type: 'change', target: document.querySelector('#user_profile_picture[type=file]'), handler: profilePictureChangeHandler },
-    { type: 'change', target: document.querySelector('#user_profile_header[type=file]'), handler: profileHeaderChangeHandler }
+    { type: 'change', target: document.querySelector('#user_profile_header[type=file]'), handler: profileHeaderChangeHandler },
+    { type: 'click', target: document.querySelectorAll('[data-action="anon-unblock"]'), handler: unblockAnonymousHandler }
   ]);
 }

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

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

app/views/settings/_blocks.haml

@@ -0,0 +1,40 @@
+.card
+  .card-body
+    %h2 Blocks
+    %p 
+      Here every user you are currently blocking is listed with a quick option to unblock them. You can block users on their profile using the "Actions" dropdown.
+
+    %ul.list-group
+      - @blocks.each do |block|
+        %li.list-group-item
+          .d-flex
+            %img.avatar-md.d-none.d-sm-inline.mr-2{ src: block.target.profile_picture.url(:small) }
+            %div
+              %p.mb-0= user_screen_name(block.target)
+              %p.text-muted.mb-0
+                blocked
+                = time_ago_in_words(block.created_at)
+                ago
+            .ml-auto.d-inline-flex
+              %button.btn.btn-default.align-self-center{ data: { action: :unblock, target: block.target.screen_name } }
+                %span.pe-none Unblock
+.card
+  .card-body
+    %h2 Anonymous Blocks
+    %p
+      Here every anonymous user you are blocking is listed with a quick option to unblock them. Anonymous users can be blocked from questions in your inbox. To provide
+      more context on who you blocked, the question they asked you is provided as context.
+    %ul.list-group
+      - @anonymous_blocks.each do |block|
+        %li.list-group-item
+          .d-flex
+            %div
+              %p.mb-0= block.question.content
+              %p.text-muted.mb-0
+                blocked
+                = time_ago_in_words(block.created_at)
+                ago
+            .ml-auto.d-inline-flex
+              %button.btn.btn-default.align-self-center{ data: { action: "anon-unblock", target: block.id } }
+                %span.pe-none Unblock
+

app/views/tabs/_settings.haml

@@ -6,6 +6,7 @@
     = list_group_item t(".security"), edit_user_security_path
     = list_group_item t(".sharing"), services_path
     = list_group_item t(".mutes"), edit_user_mute_rules_path
+    = list_group_item t(".blocks"), edit_user_blocks_path
     = list_group_item t(".theme"), edit_user_theme_path
     = list_group_item t(".data"), user_data_path
     = list_group_item t(".export"), user_export_path

app/views/user/edit_blocks.haml

@@ -0,0 +1,4 @@
+= render "settings/blocks"
+
+- provide(:title, generate_title(t(".title")))
+- parent_layout "user/settings"

config/routes.rb

@@ -74,6 +74,7 @@ Rails.application.routes.draw do
   match '/settings/security/2fa', to: 'user#destroy_2fa', via: :delete, as: :destroy_user_2fa
   match '/settings/security/recovery', to: 'user#reset_user_recovery_codes', via: :delete, as: :reset_user_recovery_codes
   match '/settings/muted', to: 'user#edit_mute', via: :get, as: :edit_user_mute_rules
+  match '/settings/blocks', to: 'user#edit_blocks', via: :get, as: :edit_user_blocks
 
   # resources :services, only: [:index, :destroy]
   match '/settings/services', to: 'services#index', via: 'get', as: :services