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; |