Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 12x 12x 12x 12x 1x 12x 1x 1x 1x 14x 1x 1x 5x | import { People } from "@mui/icons-material";
import { useQuery } from "@tanstack/react-query";
import { blockedUsersKey } from "features/queryKeys";
import { RpcError } from "grpc-web";
import { useTranslation } from "i18n";
import { CONNECTIONS } from "i18n/namespaces";
import { BlockedUser, GetBlockedUsersRes } from "proto/blocking_pb";
import { useState } from "react";
import { service } from "service";
import ConnectionActionDialog from "./ConnectionActionDialog";
import FriendSummaryView from "./FriendSummaryView";
import FriendTile from "./FriendTile";
import { useUnblockUser } from "./hooks";
function BlockedUsersList({ refetchFriends }: { refetchFriends: () => void }) {
const { t } = useTranslation([CONNECTIONS]);
const [userToUnblock, setUserToUnblock] = useState<BlockedUser.AsObject | null>(null);
const { data, error, isPending } = useQuery<GetBlockedUsersRes.AsObject, RpcError>({
queryKey: [blockedUsersKey],
queryFn: service.blocking.getBlockedUsers,
});
const { unblockUserMutation, isUnblocking } = useUnblockUser();
const handleDialogClose = () => {
setUserToUnblock(null);
};
const handleUnblockUserConfirm = ({ username }: { username: string }) => {
unblockUserMutation({ username });
refetchFriends();
handleDialogClose();
};
return (
<>
<FriendTile
title={t("connections:blocked_list_title")}
errorMessage={error?.message || null}
isLoading={isPending}
hasData={!!data?.blockedUsersList.length}
noDataMessage={t("connections:no_blocked_users")}
>
{data?.blockedUsersList.map((user: BlockedUser.AsObject) => (
<FriendSummaryView
key={user.username}
friend={user}
isProfileLink={false}
menuItems={[
{
icon: People,
label: t("connections:unblock_user"),
onClick: () => setUserToUnblock(user),
id: "unblock-user",
},
]}
/>
))}
</FriendTile>
{userToUnblock && (
<ConnectionActionDialog
isOpen
onClose={handleDialogClose}
dialogConfirm={t("connections:unblock_user_confirmation_dialog.confirm")}
dialogId="unblock-user--confirmation-dialog"
dialogMessage={t("connections:unblock_user_confirmation_dialog.message")}
dialogTitle={t("connections:unblock_user_confirmation_dialog.title", {
name: userToUnblock.name,
})}
isLoading={isUnblocking}
onConfirm={() => handleUnblockUserConfirm({ username: userToUnblock.username })}
/>
)}
</>
);
}
export default BlockedUsersList;
|