[Glitch] Add option to remove account from followers in web UI

Port bed614d44e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/actions/accounts_typed.ts

@@ -1,7 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
 
+import { apiRemoveAccountFromFollowers } from 'flavours/glitch/api/accounts';
 import type { ApiAccountJSON } from 'flavours/glitch/api_types/accounts';
 import type { ApiRelationshipJSON } from 'flavours/glitch/api_types/relationships';
+import { createDataLoadingThunk } from 'flavours/glitch/store/typed_functions';
 
 export const revealAccount = createAction<{
   id: string;
@@ -95,3 +97,10 @@ export const fetchRelationshipsSuccess = createAction(
   'relationships/fetch/SUCCESS',
   actionWithSkipLoadingTrue<{ relationships: ApiRelationshipJSON[] }>,
 );
+
+export const removeAccountFromFollowers = createDataLoadingThunk(
+  'accounts/remove_from_followers',
+  ({ accountId }: { accountId: string }) =>
+    apiRemoveAccountFromFollowers(accountId),
+  (relationship) => ({ relationship }),
+);

app/javascript/flavours/glitch/api/accounts.ts

@@ -18,3 +18,8 @@ export const apiFollowAccount = (
 
 export const apiUnfollowAccount = (id: string) =>
   apiRequestPost<ApiRelationshipJSON>(`v1/accounts/${id}/unfollow`);
+
+export const apiRemoveAccountFromFollowers = (id: string) =>
+  apiRequestPost<ApiRelationshipJSON>(
+    `v1/accounts/${id}/remove_from_followers`,
+  );

app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx

@@ -18,6 +18,7 @@ import {
   unmuteAccount,
   pinAccount,
   unpinAccount,
+  removeAccountFromFollowers,
 } from 'flavours/glitch/actions/accounts';
 import { initBlockModal } from 'flavours/glitch/actions/blocks';
 import { mentionCompose, directCompose } from 'flavours/glitch/actions/compose';
@@ -156,6 +157,23 @@ const messages = defineMessages({
     id: 'account.open_original_page',
     defaultMessage: 'Open original page',
   },
+  removeFromFollowers: {
+    id: 'account.remove_from_followers',
+    defaultMessage: 'Remove {name} from followers',
+  },
+  confirmRemoveFromFollowersTitle: {
+    id: 'confirmations.remove_from_followers.title',
+    defaultMessage: 'Remove follower?',
+  },
+  confirmRemoveFromFollowersMessage: {
+    id: 'confirmations.remove_from_followers.message',
+    defaultMessage:
+      '{name} will stop following you. Are you sure you want to proceed?',
+  },
+  confirmRemoveFromFollowersButton: {
+    id: 'confirmations.remove_from_followers.confirm',
+    defaultMessage: 'Remove follower',
+  },
 });
 
 const titleFromAccount = (account: Account) => {
@@ -498,6 +516,39 @@ export const AccountHeader: React.FC<{
         arr.push(null);
       }
 
+      if (relationship?.followed_by) {
+        const handleRemoveFromFollowers = () => {
+          dispatch(
+            openModal({
+              modalType: 'CONFIRM',
+              modalProps: {
+                title: intl.formatMessage(
+                  messages.confirmRemoveFromFollowersTitle,
+                ),
+                message: intl.formatMessage(
+                  messages.confirmRemoveFromFollowersMessage,
+                  { name: <strong>{account.acct}</strong> },
+                ),
+                confirm: intl.formatMessage(
+                  messages.confirmRemoveFromFollowersButton,
+                ),
+                onConfirm: () => {
+                  void dispatch(removeAccountFromFollowers({ accountId }));
+                },
+              },
+            }),
+          );
+        };
+
+        arr.push({
+          text: intl.formatMessage(messages.removeFromFollowers, {
+            name: account.username,
+          }),
+          action: handleRemoveFromFollowers,
+          dangerous: true,
+        });
+      }
+
       if (relationship?.muting) {
         arr.push({
           text: intl.formatMessage(messages.unmute, {
@@ -596,6 +647,8 @@ export const AccountHeader: React.FC<{
 
     return arr;
   }, [
+    dispatch,
+    accountId,
     account,
     relationship,
     permissions,

app/javascript/flavours/glitch/reducers/relationships.ts

@@ -24,6 +24,7 @@ import {
   pinAccountSuccess,
   unpinAccountSuccess,
   fetchRelationshipsSuccess,
+  removeAccountFromFollowers,
 } from '../actions/accounts_typed';
 import {
   blockDomainSuccess,
@@ -109,7 +110,8 @@ export const relationshipsReducer: Reducer<State> = (
     unmuteAccountSuccess.match(action) ||
     pinAccountSuccess.match(action) ||
     unpinAccountSuccess.match(action) ||
-    isFulfilled(submitAccountNote)(action)
+    isFulfilled(submitAccountNote)(action) ||
+    isFulfilled(removeAccountFromFollowers)(action)
   )
     return normalizeRelationship(state, action.payload.relationship);
   else if (fetchRelationshipsSuccess.match(action))