From ea6c455e81f9f01a64adf123d0a4f820c6e67f97 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Fri, 28 Jun 2024 00:01:40 +0200
Subject: [PATCH] Fix follow button in hover cards not working when signed out
 in web UI (#30864)

---
 .../mastodon/components/follow_button.tsx     | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/components/follow_button.tsx b/app/javascript/mastodon/components/follow_button.tsx
index 4b4d278317..db59942882 100644
--- a/app/javascript/mastodon/components/follow_button.tsx
+++ b/app/javascript/mastodon/components/follow_button.tsx
@@ -2,11 +2,13 @@ import { useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
+import { useIdentity } from '@/mastodon/identity_context';
 import {
   fetchRelationships,
   followAccount,
   unfollowAccount,
 } from 'mastodon/actions/accounts';
+import { openModal } from 'mastodon/actions/modal';
 import { Button } from 'mastodon/components/button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { me } from 'mastodon/initial_state';
@@ -29,17 +31,37 @@ export const FollowButton: React.FC<{
 }> = ({ accountId }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const { signedIn } = useIdentity();
+  const account = useAppSelector((state) =>
+    accountId ? state.accounts.get(accountId) : undefined,
+  );
   const relationship = useAppSelector((state) =>
     state.relationships.get(accountId),
   );
   const following = relationship?.following || relationship?.requested;
 
   useEffect(() => {
-    dispatch(fetchRelationships([accountId]));
-  }, [dispatch, accountId]);
+    if (accountId && signedIn) {
+      dispatch(fetchRelationships([accountId]));
+    }
+  }, [dispatch, accountId, signedIn]);
 
   const handleClick = useCallback(() => {
+    if (!signedIn) {
+      dispatch(
+        openModal({
+          modalType: 'INTERACTION',
+          modalProps: {
+            type: 'follow',
+            accountId: accountId,
+            url: account?.url,
+          },
+        }),
+      );
+    }
+
     if (!relationship) return;
+
     if (accountId === me) {
       return;
     } else if (relationship.following || relationship.requested) {
@@ -47,11 +69,13 @@ export const FollowButton: React.FC<{
     } else {
       dispatch(followAccount(accountId));
     }
-  }, [dispatch, accountId, relationship]);
+  }, [dispatch, accountId, relationship, account, signedIn]);
 
   let label;
 
-  if (accountId === me) {
+  if (!signedIn) {
+    label = intl.formatMessage(messages.follow);
+  } else if (accountId === me) {
     label = intl.formatMessage(messages.edit_profile);
   } else if (!relationship) {
     label = <LoadingIndicator />;