[Glitch] Fix follow button in hover cards not working when signed out…

… in web UI

Port ea6c455 to glitch-soc

Signed-off-by: Claire <[email protected]>

app/javascript/flavours/glitch/components/follow_button.tsx

@@ -2,11 +2,13 @@ import { useCallback, useEffect } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
+import { useIdentity } from '@/flavours/glitch/identity_context';
 import {
   fetchRelationships,
   followAccount,
   unfollowAccount,
 } from 'flavours/glitch/actions/accounts';
+import { openModal } from 'flavours/glitch/actions/modal';
 import { Button } from 'flavours/glitch/components/button';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { me } from 'flavours/glitch/initial_state';
@@ -28,29 +30,51 @@ 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) {
       dispatch(unfollowAccount(accountId));
     } 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 />;