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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 13x 13x 13x 13x 13x 13x 13x 1x 13x 1x 13x 1x 1x 13x 1x 13x 1x 1x 1x 17x 1x 5x | import { People } from "@mui/icons-material";
import { MenuItem, Typography } from "@mui/material";
import EllipsisMenu from "components/EllipsisMenu";
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 { useQuery } from "react-query";
import { service } from "service";
import { theme } from "theme";
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 [isDialogOpen, setIsDialogOpen] = useState(false);
const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLButtonElement | null>(
null,
);
const isMenuOpen = Boolean(menuAnchorEl);
const { data, error, isLoading } = useQuery<
GetBlockedUsersRes.AsObject,
RpcError
>(blockedUsersKey, service.blocking.getBlockedUsers);
const { unblockUserMutation, isUnblocking } = useUnblockUser();
const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
setMenuAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setMenuAnchorEl(null);
};
const handleDialogOpen = () => {
setIsDialogOpen(true);
handleMenuClose();
};
const handleDialogClose = () => {
setIsDialogOpen(false);
};
const handleUnblockUserConfirm = ({ username }: { username: string }) => {
unblockUserMutation({ username });
refetchFriends();
handleDialogClose();
};
return (
<>
<FriendTile
title={t("connections:blocked_list_title")}
errorMessage={error?.message || null}
isLoading={isLoading}
hasData={!!data?.blockedUsersList.length}
noDataMessage={t("connections:no_blocked_users")}
>
{data?.blockedUsersList.map((user: BlockedUser.AsObject) => (
<FriendSummaryView
key={user.username}
friend={user}
isProfileLink={false}
>
<EllipsisMenu
idName="blocked-user-item"
isMenuOpen={isMenuOpen}
menuAnchorEl={menuAnchorEl}
onMenuOpen={handleMenuOpen}
onMenuClose={handleMenuClose}
>
<MenuItem onClick={handleDialogOpen} data-testid="unblock-user">
<People fontSize="small" />
<Typography
variant="body2"
sx={{ marginLeft: theme.spacing(1), fontWeight: 500 }}
>
{t("connections:unblock_user")}
</Typography>
</MenuItem>
</EllipsisMenu>
<ConnectionActionDialog
isOpen={isDialogOpen}
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: user.name,
},
)}
isLoading={isUnblocking}
onConfirm={() =>
handleUnblockUserConfirm({
username: user.username,
})
}
/>
</FriendSummaryView>
))}
</FriendTile>
</>
);
}
export default BlockedUsersList;
|