From 3120cc845399529d9d104adf24dbe3a89f44ec28 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 11 Sep 2022 11:25:48 -0500
Subject: [PATCH] AccountModerationModal: boilerplate

---
 .../features/account/components/header.tsx    |  11 ++--
 .../features/ui/components/modal_root.js      | Bin 3117 -> 3191 bytes
 .../modals/account-moderation-modal.tsx       |  47 ++++++++++++++++++
 .../features/ui/util/async-components.ts      |   4 ++
 app/soapbox/locales/en.json                   |   2 +-
 5 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 app/soapbox/features/ui/components/modals/account-moderation-modal.tsx

diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index c9620485b9..4691287d03 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -59,7 +59,7 @@ const messages = defineMessages({
   endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
   removeFromFollowers: { id: 'account.remove_from_followers', defaultMessage: 'Remove this follower' },
-  admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
+  adminAccount: { id: 'status.admin_account', defaultMessage: 'Moderate @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
   deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' },
@@ -287,6 +287,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
       .catch(() => {});
   };
 
+  const onModerate = () => {
+    dispatch(openModal('ACCOUNT_MODERATION', { accountId: account.id }));
+  };
+
   const onRemoveFromFollowers = () => {
     dispatch((_, getState) => {
       const unfollowModal = getSettings(getState()).get('unfollowModal');
@@ -534,9 +538,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
 
       if (ownAccount?.admin) {
         menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: account.username }),
-          to: `/pleroma/admin/#/users/${account.id}/`,
-          newTab: true,
+          text: intl.formatMessage(messages.adminAccount, { name: account.username }),
+          action: onModerate,
           icon: require('@tabler/icons/gavel.svg'),
         });
       }
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index f7b9b007cc8ca69c72f900ab905874e1fcb0701e..2c2de05304b71d86959ce6b5c7124935de7dfef5 100644
GIT binary patch
delta 79
zcmZ20@m*p=CzG&(f@5-WeraBbZ+=Q@QDRAEe%|ILrYS6%3JU6u&d&a!ej)L`{w}UT
Sjv=1@e(F|Ol=HL8u>t@;lp0F_

delta 17
Ycmew^u~uS3C)4J|Oua0d6WGOB0YcygF8}}l

diff --git a/app/soapbox/features/ui/components/modals/account-moderation-modal.tsx b/app/soapbox/features/ui/components/modals/account-moderation-modal.tsx
new file mode 100644
index 0000000000..2d338da3c1
--- /dev/null
+++ b/app/soapbox/features/ui/components/modals/account-moderation-modal.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import {  Modal } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const messages = defineMessages({
+  title: { id: 'account_moderation_modal.title', defaultMessage: 'Moderate @{acct}' },
+});
+
+const getAccount = makeGetAccount();
+
+interface IAccountModerationModal {
+  /** Action to close the modal. */
+  onClose: (type: string) => void,
+  /** ID of the account to moderate. */
+  accountId: string,
+}
+
+/** Moderator actions against accounts. */
+const AccountModerationModal: React.FC<IAccountModerationModal> = ({ onClose, accountId }) => {
+  const intl = useIntl();
+  const account = useAppSelector(state => getAccount(state, accountId));
+
+  const handleClose = () => onClose('ACCOUNT_MODERATION');
+
+  if (!account) {
+    return (
+      <Modal onClose={handleClose}>
+        <MissingIndicator />
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      title={intl.formatMessage(messages.title, { acct: account.acct })}
+      onClose={handleClose}
+    >
+      <div>TODO</div>
+    </Modal>
+  );
+};
+
+export default AccountModerationModal;
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 43b5c16a12..979c5da7db 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -106,6 +106,10 @@ export function ReportModal() {
   return import(/* webpackChunkName: "modals/report-modal/report-modal" */'../components/modals/report-modal/report-modal');
 }
 
+export function AccountModerationModal() {
+  return import(/* webpackChunkName: "modals/account-moderation-modal" */'../components/modals/account-moderation-modal');
+}
+
 export function MediaGallery() {
   return import(/* webpackChunkName: "status/media_gallery" */'../../../components/media_gallery');
 }
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index cded97f643..7ce350976d 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -974,7 +974,7 @@
   "soapbox_config.single_user_mode_profile_label": "Main user handle",
   "soapbox_config.verified_can_edit_name_label": "Allow verified users to edit their own display name.",
   "status.actions.more": "More",
-  "status.admin_account": "Open moderation interface for @{name}",
+  "status.admin_account": "Moderate @{name}",
   "status.admin_status": "Open this post in the moderation interface",
   "status.block": "Block @{name}",
   "status.bookmark": "Bookmark",