matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

pl-fe: migrate account actions to tanstack query

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-23 18:25:50 +02:00
parent ce379e8621
commit 08d7c8dfba
16 changed files with 328 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/pl-fe/src/features/account/components/header.tsx
View File

@ -6,7 +6,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import * as v from 'valibot';
import { biteAccount, blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'pl-fe/actions/accounts';
import { mentionCompose, directCompose } from 'pl-fe/actions/compose';
import { initReport, ReportableEntities } from 'pl-fe/actions/reports';
import Account from 'pl-fe/components/account';
@ -29,7 +28,15 @@ import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useClient } from 'pl-fe/hooks/use-client';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
import { useFollowMutation } from 'pl-fe/queries/accounts/use-relationship';
import {
useBlockAccountMutation,
useFollowAccountMutation,
usePinAccountMutation,
useRemoveAccountFromFollowersMutation,
useUnblockAccountMutation,
useUnmuteAccountMutation,
useUnpinAccountMutation,
} from 'pl-fe/queries/accounts/use-relationship';
import { useChats } from 'pl-fe/queries/chats';
import { queryClient } from 'pl-fe/queries/client';
import { blockDomainMutationOptions, unblockDomainMutationOptions } from 'pl-fe/queries/settings/domain-blocks';
@ -134,7 +141,13 @@ const Header: React.FC<IHeader> = ({ account }) => {
const features = useFeatures();
const { account: ownAccount } = useOwnAccount();
const { mutate: follow } = useFollowMutation(account?.id!);
const { mutate: followAccount } = useFollowAccountMutation(account?.id!);
const { mutate: blockAccount } = useBlockAccountMutation(account?.id!);
const { mutate: unblockAccount } = useUnblockAccountMutation(account?.id!);
const { mutate: unmuteAccount } = useUnmuteAccountMutation(account?.id!);
const { mutate: pinAccount } = usePinAccountMutation(account?.id!);
const { mutate: unpinAccount } = useUnpinAccountMutation(account?.id!);
const { mutate: removeFromFollowers } = useRemoveAccountFromFollowersMutation(account?.id!);
const { openModal } = useModalsActions();
const settings = useSettings();
@ -181,16 +194,16 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onBlock = () => {
if (account.relationship?.blocking) {
dispatch(unblockAccount(account.id));
unblockAccount();
} else {
openModal('CONFIRM', {
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.id)),
onConfirm: () => blockAccount(),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.id));
blockAccount();
dispatch(initReport(ReportableEntities.ACCOUNT, account));
},
});
@ -207,26 +220,26 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onReblogToggle = () => {
if (account.relationship?.showing_reblogs) {
follow({ reblogs: false });
followAccount({ reblogs: false });
} else {
follow({ reblogs: true });
followAccount({ reblogs: true });
}
};
const onEndorseToggle = () => {
if (account.relationship?.endorsed) {
dispatch(unpinAccount(account.id))
.then(() => toast.success(intl.formatMessage(messages.userUnendorsed, { acct: account.acct })))
.catch(() => { });
unpinAccount(undefined, {
onSuccess: () => toast.success(intl.formatMessage(messages.userUnendorsed, { acct: account.acct })),
});
} else {
dispatch(pinAccount(account.id))
.then(() => toast.success(intl.formatMessage(messages.userEndorsed, { acct: account.acct })))
.catch(() => { });
pinAccount(undefined, {
onSuccess: () => toast.success(intl.formatMessage(messages.userEndorsed, { acct: account.acct })),
});
}
};
const onBite = () => {
dispatch(biteAccount(account.id))
client.accounts.biteAccount(account.id)
.then(() => toast.success(intl.formatMessage(messages.userBit, { acct: account.acct })))
.catch(() => toast.error(intl.formatMessage(messages.userBiteFail, { acct: account.acct })));
};
@ -243,7 +256,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
const onMute = () => {
if (account.relationship?.muting) {
dispatch(unmuteAccount(account.id));
unmuteAccount();
} else {
openModal('MUTE', { accountId: account.id });
}
@ -279,10 +292,10 @@ const Header: React.FC<IHeader> = ({ account }) => {
heading: <FormattedMessage id='confirmations.remove_from_followers.heading' defaultMessage='Remove {name} from followers' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong className='break-words'>@{account.acct}</strong> }} />,
confirm: intl.formatMessage(messages.removeFromFollowersConfirm),
onConfirm: () => dispatch(removeFromFollowers(account.id)),
onConfirm: () => removeFromFollowers(),
});
} else {
dispatch(removeFromFollowers(account.id));
removeFromFollowers();
}
};

8
packages/pl-fe/src/features/chats/components/chat-composer.tsx
View File

@ -1,7 +1,6 @@
import React, { useState } from 'react';
import { defineMessages, IntlShape, useIntl } from 'react-intl';
import { unblockAccount } from 'pl-fe/actions/accounts';
import Button from 'pl-fe/components/ui/button';
import Combobox, { ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover } from 'pl-fe/components/ui/combobox';
import HStack from 'pl-fe/components/ui/hstack';
@ -11,9 +10,8 @@ import Text from 'pl-fe/components/ui/text';
import { useChatContext } from 'pl-fe/contexts/chat-context';
import UploadButton from 'pl-fe/features/compose/components/upload-button';
import emojiSearch from 'pl-fe/features/emoji/search';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
import { useRelationshipQuery, useUnblockAccountMutation } from 'pl-fe/queries/accounts/use-relationship';
import { useModalsActions } from 'pl-fe/stores/modals';
import { textAtCursorMatchesToken } from 'pl-fe/utils/suggestions';
@ -76,11 +74,11 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
uploadProgress,
}, ref) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { openModal } = useModalsActions();
const { chat } = useChatContext();
const { data: relationship } = useRelationshipQuery(chat?.account.id);
const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!);
const isBlocked = relationship?.blocked_by && false;
const isBlocking = relationship?.blocking && false;
@ -146,7 +144,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
message: intl.formatMessage(messages.unblockMessage),
confirm: intl.formatMessage(messages.unblockConfirm),
confirmationTheme: 'primary',
onConfirm: () => dispatch(unblockAccount(chat?.account.id as string)),
onConfirm: () => unblockAccount(),
});
};

12
packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@ -2,7 +2,6 @@ import React, { useRef } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link, useHistory, useParams } from 'react-router-dom';
import { blockAccount, unblockAccount } from 'pl-fe/actions/accounts';
import DropdownMenu, { type Menu } from 'pl-fe/components/dropdown-menu';
import Avatar from 'pl-fe/components/ui/avatar';
import HStack from 'pl-fe/components/ui/hstack';
@ -11,9 +10,8 @@ import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import VerificationBadge from 'pl-fe/components/verification-badge';
import { useChatContext } from 'pl-fe/contexts/chat-context';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
import { useBlockAccountMutation, useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
import { useChat, useChatActions, useChats } from 'pl-fe/queries/chats';
import { useModalsActions } from 'pl-fe/stores/modals';
@ -38,7 +36,6 @@ const messages = defineMessages({
});
const ChatPageMain = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
const history = useHistory();
@ -50,6 +47,9 @@ const ChatPageMain = () => {
const { currentChatId } = useChatContext();
const { chatsQuery: { data: chats, isLoading } } = useChats();
const { mutate: blockAccount } = useBlockAccountMutation(chat?.account.id!);
const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!);
const inputRef = useRef<HTMLTextAreaElement | null>(null);
const { deleteChat } = useChatActions(chat?.id as string);
@ -62,7 +62,7 @@ const ChatPageMain = () => {
message: intl.formatMessage(messages.blockMessage),
confirm: intl.formatMessage(messages.blockConfirm),
confirmationTheme: 'primary',
onConfirm: () => dispatch(blockAccount(chat?.account.id as string)),
onConfirm: () => blockAccount(),
});
};
@ -72,7 +72,7 @@ const ChatPageMain = () => {
message: intl.formatMessage(messages.unblockMessage),
confirm: intl.formatMessage(messages.unblockConfirm),
confirmationTheme: 'primary',
onConfirm: () => dispatch(unblockAccount(chat?.account.id as string)),
onConfirm: () => unblockAccount(),
});
};

12
packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
View File

@ -1,16 +1,14 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { blockAccount, unblockAccount } from 'pl-fe/actions/accounts';
import Avatar from 'pl-fe/components/ui/avatar';
import HStack from 'pl-fe/components/ui/hstack';
import Icon from 'pl-fe/components/ui/icon';
import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
import { useBlockAccountMutation, useUnblockAccountMutation, useRelationshipQuery } from 'pl-fe/queries/accounts/use-relationship';
import { useChatActions } from 'pl-fe/queries/chats';
import { useModalsActions } from 'pl-fe/stores/modals';
@ -33,7 +31,6 @@ const messages = defineMessages({
});
const ChatSettings = () => {
const dispatch = useAppDispatch();
const intl = useIntl();
const features = useFeatures();
@ -41,6 +38,9 @@ const ChatSettings = () => {
const { chat, changeScreen, toggleChatPane } = useChatContext();
const { deleteChat } = useChatActions(chat?.id as string);
const { mutate: blockAccount } = useBlockAccountMutation(chat?.account.id!);
const { mutate: unblockAccount } = useUnblockAccountMutation(chat?.account.id!);
const isBlocked = !!useRelationshipQuery(chat?.account.id).data?.blocked_by;
const closeSettings = () => {
@ -58,7 +58,7 @@ const ChatSettings = () => {
message: intl.formatMessage(messages.blockMessage),
confirm: intl.formatMessage(messages.blockConfirm),
confirmationTheme: 'primary',
onConfirm: () => dispatch(blockAccount(chat?.account.id as string)),
onConfirm: () => blockAccount(),
});
};
@ -68,7 +68,7 @@ const ChatSettings = () => {
message: intl.formatMessage(messages.unblockMessage),
confirm: intl.formatMessage(messages.unblockConfirm),
confirmationTheme: 'primary',
onConfirm: () => dispatch(unblockAccount(chat?.account.id as string)),
onConfirm: () => unblockAccount(),
});
};

7
packages/pl-fe/src/features/event/components/event-header.tsx
View File

@ -2,7 +2,6 @@ import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
import { blockAccount } from 'pl-fe/actions/accounts';
import { directCompose, mentionCompose, quoteCompose } from 'pl-fe/actions/compose';
import { fetchEventIcs } from 'pl-fe/actions/events';
import { deleteStatusModal, toggleStatusSensitivityModal } from 'pl-fe/actions/moderation';
@ -21,6 +20,7 @@ import Emojify from 'pl-fe/features/emoji/emojify';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
import { useBlockAccountMutation } from 'pl-fe/queries/accounts/use-relationship';
import { useChats } from 'pl-fe/queries/chats';
import { useBookmarkStatus, usePinStatus, useReblogStatus, useUnbookmarkStatus, useUnpinStatus, useUnreblogStatus } from 'pl-fe/queries/statuses/use-status-interactions';
import { useModalsActions } from 'pl-fe/stores/modals';
@ -95,6 +95,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
const { mutate: unbookmarkStatus } = useUnbookmarkStatus(status?.id!);
const { mutate: pinStatus } = usePinStatus(status?.id!);
const { mutate: unpinStatus } = useUnpinStatus(status?.id!);
const { mutate: blockAccount } = useBlockAccountMutation(status?.account.id!);
if (!status || !status.event) {
return (
@ -191,10 +192,10 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.acct }} />,
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.acct}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.id)),
onConfirm: () => blockAccount(),
secondary: intl.formatMessage(messages.blockAndReport),
onSecondary: () => {
dispatch(blockAccount(account.id));
blockAccount();
dispatch(initReport(ReportableEntities.STATUS, account, { status }));
},
});

43
packages/pl-fe/src/features/ui/components/action-button.tsx
View File

@ -1,21 +1,22 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import {
blockAccount,
unblockAccount,
muteAccount,
unmuteAccount,
biteAccount,
} from 'pl-fe/actions/accounts';
import Button from 'pl-fe/components/ui/button';
import HStack from 'pl-fe/components/ui/hstack';
import Spinner from 'pl-fe/components/ui/spinner';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useClient } from 'pl-fe/hooks/use-client';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useLoggedIn } from 'pl-fe/hooks/use-logged-in';
import { useAcceptFollowRequestMutation, useRejectFollowRequestMutation } from 'pl-fe/queries/accounts/use-follow-requests';
import { useRelationshipQuery, useFollowMutation, useUnfollowMutation } from 'pl-fe/queries/accounts/use-relationship';
import {
useRelationshipQuery,
useBlockAccountMutation,
useUnblockAccountMutation,
useMuteAccountMutation,
useUnmuteAccountMutation,
useFollowAccountMutation,
useUnfollowAccountMutation,
} from 'pl-fe/queries/accounts/use-relationship';
import { useModalsActions } from 'pl-fe/stores/modals';
import toast from 'pl-fe/toast';
@ -55,15 +56,19 @@ interface IActionButton {
* `actionType` prop.
*/
const ActionButton: React.FC<IActionButton> = ({ account, actionType, small = true }) => {
const dispatch = useAppDispatch();
const features = useFeatures();
const intl = useIntl();
const client = useClient();
const { openModal } = useModalsActions();
const { isLoggedIn, me } = useLoggedIn();
const { mutate: follow, isPending: isPendingFollow } = useFollowMutation(account.id);
const { mutate: unfollow, isPending: isPendingUnfollow } = useUnfollowMutation(account.id);
const { mutate: followAccount, isPending: isPendingFollow } = useFollowAccountMutation(account.id);
const { mutate: unfollowAccount, isPending: isPendingUnfollow } = useUnfollowAccountMutation(account.id);
const { mutate: blockAccount } = useBlockAccountMutation(account.id);
const { mutate: unblockAccount } = useUnblockAccountMutation(account.id);
const { mutate: muteAccount } = useMuteAccountMutation(account.id);
const { mutate: unmuteAccount } = useUnmuteAccountMutation(account.id);
const { data: relationship, isLoading } = useRelationshipQuery(account.id);
@ -72,25 +77,25 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small = tr
const handleFollow = () => {
if (relationship?.following || relationship?.requested) {
unfollow();
unfollowAccount();
} else {
follow(undefined);
followAccount(undefined);
}
};
const handleBlock = () => {
if (relationship?.blocking) {
dispatch(unblockAccount(account.id));
unblockAccount();
} else {
dispatch(blockAccount(account.id));
blockAccount();
}
};
const handleMute = () => {
if (relationship?.muting) {
dispatch(unmuteAccount(account.id));
unmuteAccount();
} else {
dispatch(muteAccount(account.id));
muteAccount(undefined);
}
};
@ -103,7 +108,7 @@ const ActionButton: React.FC<IActionButton> = ({ account, actionType, small = tr
};
const handleBite = () => {
dispatch(biteAccount(account.id))
client.accounts.biteAccount(account.id)
.then(() => toast.success(intl.formatMessage(messages.userBit, { acct: account.acct })))
.catch(() => toast.error(intl.formatMessage(messages.userBiteFail, { acct: account.acct })));
};

4
packages/pl-fe/src/features/ui/components/subscription-button.tsx
View File

@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
import IconButton from 'pl-fe/components/ui/icon-button';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useFollowMutation } from 'pl-fe/queries/accounts/use-relationship';
import { useFollowAccountMutation } from 'pl-fe/queries/accounts/use-relationship';
import toast from 'pl-fe/toast';
import type { Account as AccountEntity } from 'pl-fe/normalizers/account';
@ -24,7 +24,7 @@ interface ISubscriptionButton {
const SubscriptionButton = ({ account }: ISubscriptionButton) => {
const features = useFeatures();
const intl = useIntl();
const { mutate: follow, isPending } = useFollowMutation(account.id);
const { mutate: follow, isPending } = useFollowAccountMutation(account.id);
const isFollowing = account.relationship?.following;
const isRequested = account.relationship?.requested;