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

Port ea6c455e81 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-06-28 00:01:40 +02:00 committed by Claire
parent 98185247b8
commit 412e5ddcbf
1 changed files with 28 additions and 4 deletions

View File

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