Fix follow button in hover cards not working when signed out in web UI (#30864)
This commit is contained in:
		
					parent
					
						
							
								0f3fef6fda
							
						
					
				
			
			
				commit
				
					
						ea6c455e81
					
				
			
		
					 1 changed files with 28 additions and 4 deletions
				
			
		|  | @ -2,11 +2,13 @@ import { useCallback, useEffect } from 'react'; | ||||||
| 
 | 
 | ||||||
| import { useIntl, defineMessages } from 'react-intl'; | import { useIntl, defineMessages } from 'react-intl'; | ||||||
| 
 | 
 | ||||||
|  | import { useIdentity } from '@/mastodon/identity_context'; | ||||||
| import { | import { | ||||||
|   fetchRelationships, |   fetchRelationships, | ||||||
|   followAccount, |   followAccount, | ||||||
|   unfollowAccount, |   unfollowAccount, | ||||||
| } from 'mastodon/actions/accounts'; | } from 'mastodon/actions/accounts'; | ||||||
|  | import { openModal } from 'mastodon/actions/modal'; | ||||||
| import { Button } from 'mastodon/components/button'; | import { Button } from 'mastodon/components/button'; | ||||||
| import { LoadingIndicator } from 'mastodon/components/loading_indicator'; | import { LoadingIndicator } from 'mastodon/components/loading_indicator'; | ||||||
| import { me } from 'mastodon/initial_state'; | import { me } from 'mastodon/initial_state'; | ||||||
|  | @ -29,17 +31,37 @@ export const FollowButton: React.FC<{ | ||||||
| }> = ({ accountId }) => { | }> = ({ accountId }) => { | ||||||
|   const intl = useIntl(); |   const intl = useIntl(); | ||||||
|   const dispatch = useAppDispatch(); |   const dispatch = useAppDispatch(); | ||||||
|  |   const { signedIn } = useIdentity(); | ||||||
|  |   const account = useAppSelector((state) => | ||||||
|  |     accountId ? state.accounts.get(accountId) : undefined, | ||||||
|  |   ); | ||||||
|   const relationship = useAppSelector((state) => |   const relationship = useAppSelector((state) => | ||||||
|     state.relationships.get(accountId), |     state.relationships.get(accountId), | ||||||
|   ); |   ); | ||||||
|   const following = relationship?.following || relationship?.requested; |   const following = relationship?.following || relationship?.requested; | ||||||
| 
 | 
 | ||||||
|   useEffect(() => { |   useEffect(() => { | ||||||
|     dispatch(fetchRelationships([accountId])); |     if (accountId && signedIn) { | ||||||
|   }, [dispatch, accountId]); |       dispatch(fetchRelationships([accountId])); | ||||||
|  |     } | ||||||
|  |   }, [dispatch, accountId, signedIn]); | ||||||
| 
 | 
 | ||||||
|   const handleClick = useCallback(() => { |   const handleClick = useCallback(() => { | ||||||
|  |     if (!signedIn) { | ||||||
|  |       dispatch( | ||||||
|  |         openModal({ | ||||||
|  |           modalType: 'INTERACTION', | ||||||
|  |           modalProps: { | ||||||
|  |             type: 'follow', | ||||||
|  |             accountId: accountId, | ||||||
|  |             url: account?.url, | ||||||
|  |           }, | ||||||
|  |         }), | ||||||
|  |       ); | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|     if (!relationship) return; |     if (!relationship) return; | ||||||
|  | 
 | ||||||
|     if (accountId === me) { |     if (accountId === me) { | ||||||
|       return; |       return; | ||||||
|     } else if (relationship.following || relationship.requested) { |     } else if (relationship.following || relationship.requested) { | ||||||
|  | @ -47,11 +69,13 @@ export const FollowButton: React.FC<{ | ||||||
|     } else { |     } else { | ||||||
|       dispatch(followAccount(accountId)); |       dispatch(followAccount(accountId)); | ||||||
|     } |     } | ||||||
|   }, [dispatch, accountId, relationship]); |   }, [dispatch, accountId, relationship, account, signedIn]); | ||||||
| 
 | 
 | ||||||
|   let label; |   let label; | ||||||
| 
 | 
 | ||||||
|   if (accountId === me) { |   if (!signedIn) { | ||||||
|  |     label = intl.formatMessage(messages.follow); | ||||||
|  |   } else if (accountId === me) { | ||||||
|     label = intl.formatMessage(messages.edit_profile); |     label = intl.formatMessage(messages.edit_profile); | ||||||
|   } else if (!relationship) { |   } else if (!relationship) { | ||||||
|     label = <LoadingIndicator />; |     label = <LoadingIndicator />; | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue