From 3d898957e3dfa55981e2186d0daf7b6059cc868b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 14 May 2022 11:21:12 -0500
Subject: [PATCH 1/4] ActionButton: put remote follow behind feature detection

---
 .../features/ui/components/action-button.tsx  | 41 +++++++++++++------
 app/soapbox/utils/features.ts                 |  6 +++
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index e79c225672..c710f43d96 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -105,10 +105,9 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
     );
   };
 
-  const empty = <></>;
-
-  if (!me) {
-    // Remote follow
+  /** Render a remote follow button, depending on features. */
+  const renderRemoteFollow = (): JSX.Element | null => {
+    // Remote follow through the API.
     if (features.remoteInteractionsAPI) {
       return (
         <Button
@@ -117,18 +116,36 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
           text={intl.formatMessage(messages.follow)}
         />
       );
+    // Pleroma's classic remote follow form.
+    } else if (features.pleromaRemoteFollow) {
+      return (
+        <form method='POST' action='/main/ostatus'>
+          <input type='hidden' name='nickname' value={account.acct} />
+          <input type='hidden' name='profile' value='' />
+          <Button text={intl.formatMessage(messages.remote_follow)} type='submit' />
+        </form>
+      );
     }
 
-    return (
-      <form method='POST' action='/main/ostatus'>
-        <input type='hidden' name='nickname' value={account.get('acct')} />
-        <input type='hidden' name='profile' value='' />
-        <Button text={intl.formatMessage(messages.remote_follow)} type='submit' />
-      </form>
-    );
+    return null;
+  };
+
+  /** Render remote follow if federating, otherwise hide the button. */
+  const renderLoggedOut = (): JSX.Element | null => {
+    if (features.federating) {
+      return renderRemoteFollow();
+    }
+
+    return null;
+  };
+
+  const empty = <></>;
+
+  if (!me) {
+    return renderLoggedOut();
   }
 
-  if (me !== account.get('id')) {
+  if (me !== account.id) {
     const isFollowing = account.getIn(['relationship', 'following']);
     const blockedBy = account.getIn(['relationship', 'blocked_by']) as boolean;
 
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 9f60b5a05e..1e4d762669 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -356,6 +356,12 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     paginatedContext: v.software === TRUTHSOCIAL,
 
+    /**
+     * Displays a form to follow a user when logged out.
+     * @see POST /main/ostatus
+     */
+    pleromaRemoteFollow: v.software === PLEROMA,
+
     /**
      * Can add polls to statuses.
      * @see POST /api/v1/statuses

From 9e09823f807e1480639e0a59267f2473180eebf0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 14 May 2022 11:44:31 -0500
Subject: [PATCH 2/4] ActionButton: remove most calls to .get, fix relationship
 loading bug

---
 .../features/ui/components/action-button.tsx  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index c710f43d96..7d59674179 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -30,13 +30,13 @@ const messages = defineMessages({
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
 });
 
-interface iActionButton {
+interface IActionButton {
   account: AccountEntity
   actionType?: 'muting' | 'blocking'
   small?: boolean
 }
 
-const ActionButton = ({ account, actionType, small }: iActionButton) => {
+const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) => {
   const dispatch = useDispatch();
   const features = useFeatures();
   const intl = useIntl();
@@ -45,40 +45,40 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
 
   const handleFollow = () => {
     if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
-      dispatch(unfollowAccount(account.get('id')));
+      dispatch(unfollowAccount(account.id));
     } else {
-      dispatch(followAccount(account.get('id')));
+      dispatch(followAccount(account.id));
     }
   };
 
   const handleBlock = () => {
     if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
+      dispatch(unblockAccount(account.id));
     } else {
-      dispatch(blockAccount(account.get('id')));
+      dispatch(blockAccount(account.id));
     }
   };
 
   const handleMute = () => {
     if (account.getIn(['relationship', 'muting'])) {
-      dispatch(unmuteAccount(account.get('id')));
+      dispatch(unmuteAccount(account.id));
     } else {
-      dispatch(muteAccount(account.get('id')));
+      dispatch(muteAccount(account.id));
     }
   };
 
   const handleRemoteFollow = () => {
     dispatch(openModal('UNAUTHORIZED', {
       action: 'FOLLOW',
-      account: account.get('id'),
-      ap_id: account.get('url'),
+      account: account.id,
+      ap_id: account.url,
     }));
   };
 
   const mutingAction = () => {
     const isMuted = account.getIn(['relationship', 'muting']);
     const messageKey = isMuted ? messages.unmute : messages.mute;
-    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+    const text = intl.formatMessage(messageKey, { name: account.username });
 
     return (
       <Button
@@ -93,7 +93,7 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
   const blockingAction = () => {
     const isBlocked = account.getIn(['relationship', 'blocking']);
     const messageKey = isBlocked ? messages.unblock : messages.block;
-    const text = intl.formatMessage(messageKey, { name: account.get('username') });
+    const text = intl.formatMessage(messageKey, { name: account.username });
 
     return (
       <Button
@@ -157,7 +157,7 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
       }
     }
 
-    if (!account.get('relationship')) {
+    if (account.relationship.isEmpty()) {
       // Wait until the relationship is loaded
       return empty;
     } else if (account.getIn(['relationship', 'requested'])) {
@@ -193,7 +193,7 @@ const ActionButton = ({ account, actionType, small }: iActionButton) => {
         <Button
           theme='danger'
           size='sm'
-          text={intl.formatMessage(messages.unblock, { name: account.get('username') })}
+          text={intl.formatMessage(messages.unblock, { name: account.username })}
           onClick={handleBlock}
         />
       );

From 6fa6e5b3b4d0c1da230f397d3798aa13df891f2f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 14 May 2022 11:48:57 -0500
Subject: [PATCH 3/4] ActionButton: add jsdoc comments

---
 .../features/ui/components/action-button.tsx       | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index 7d59674179..acf06e2447 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -31,11 +31,19 @@ const messages = defineMessages({
 });
 
 interface IActionButton {
+  /** Target account for the action. */
   account: AccountEntity
+  /** Type of action to prioritize, eg on Blocks and Mutes pages. */
   actionType?: 'muting' | 'blocking'
+  /** Displays shorter text on the "Awaiting approval" button. */
   small?: boolean
 }
 
+/**
+ * Circumstantial action button (usually "Follow") to display on accounts.
+ * May say "Unblock" or something else, depending on the relationship and
+ * `actionType` prop.
+ */
 const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) => {
   const dispatch = useDispatch();
   const features = useFeatures();
@@ -75,6 +83,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     }));
   };
 
+  /** Handles actionType='muting' */
   const mutingAction = () => {
     const isMuted = account.getIn(['relationship', 'muting']);
     const messageKey = isMuted ? messages.unmute : messages.mute;
@@ -90,6 +99,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     );
   };
 
+  /** Handles actionType='blocking' */
   const blockingAction = () => {
     const isBlocked = account.getIn(['relationship', 'blocking']);
     const messageKey = isBlocked ? messages.unblock : messages.block;
@@ -106,7 +116,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
   };
 
   /** Render a remote follow button, depending on features. */
-  const renderRemoteFollow = (): JSX.Element | null => {
+  const renderRemoteFollow = () => {
     // Remote follow through the API.
     if (features.remoteInteractionsAPI) {
       return (
@@ -131,7 +141,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
   };
 
   /** Render remote follow if federating, otherwise hide the button. */
-  const renderLoggedOut = (): JSX.Element | null => {
+  const renderLoggedOut = () => {
     if (features.federating) {
       return renderRemoteFollow();
     }

From 22d37a2f10d10d6c829aa10ce0a8ff4ebceffd1e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 14 May 2022 11:49:28 -0500
Subject: [PATCH 4/4] ActionButton: remove `empty` variable(?)

---
 app/soapbox/features/ui/components/action-button.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/components/action-button.tsx b/app/soapbox/features/ui/components/action-button.tsx
index acf06e2447..51348ee1de 100644
--- a/app/soapbox/features/ui/components/action-button.tsx
+++ b/app/soapbox/features/ui/components/action-button.tsx
@@ -149,8 +149,6 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     return null;
   };
 
-  const empty = <></>;
-
   if (!me) {
     return renderLoggedOut();
   }
@@ -169,7 +167,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
 
     if (account.relationship.isEmpty()) {
       // Wait until the relationship is loaded
-      return empty;
+      return null;
     } else if (account.getIn(['relationship', 'requested'])) {
       // Awaiting acceptance
       return (
@@ -220,7 +218,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small }) =
     );
   }
 
-  return empty;
+  return null;
 };
 
 export default ActionButton;