All files / app/features/connections/friends BlockedUsersList.tsx

100% Statements 36/36
100% Branches 2/2
100% Functions 8/8
100% Lines 35/35

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;