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 | 2x 2x 2x 2x 2x 2x 2x 6x 6x 6x 6x 6x 1x 1x 1x 6x 6x 1x 6x 1x 6x 6x 1x 1x 3x | import { Block, PersonRemove } from "@mui/icons-material";
import { useTranslation } from "i18n";
import { CONNECTIONS, GLOBAL } from "i18n/namespaces";
import { LiteUser } from "proto/api_pb";
import { useState } from "react";
import ConnectionActionDialog from "./ConnectionActionDialog";
import FriendSummaryView from "./FriendSummaryView";
import { useBlockUser, useRemoveFriend } from "./hooks";
interface FriendItemProps {
friend: LiteUser.AsObject;
onError: (error: Error | null) => void;
}
const FriendItem = ({ friend, onError }: FriendItemProps) => {
const { t } = useTranslation([GLOBAL, CONNECTIONS]);
const [openDialog, setOpenDialog] = useState<"remove-friend" | "block-user" | null>(null);
const { blockUserMutation, isPending: isBlocking } = useBlockUser();
const { removeFriendMutation, isPending: isRemoving } = useRemoveFriend();
const removeFriend = (userId: number) => {
Eif (userId !== undefined) {
removeFriendMutation({ friendId: userId, onError });
handleDialogClose();
}
};
const handleBlockUser = () => {
setOpenDialog("block-user");
};
const handleRemoveFriend = () => {
setOpenDialog("remove-friend");
};
const handleDialogClose = () => {
setOpenDialog(null);
};
const handleConfirmBlockUser = () => {
blockUserMutation(friend);
setOpenDialog(null);
};
const handleConfirmRemoveFriend = () => {
removeFriend(friend.userId);
setOpenDialog(null);
};
// The friends list has the full width of the main column, so it keeps the wide row;
// UserSummary handles the compact mobile layout.
return (
<FriendSummaryView
friend={friend}
isCompact={false}
menuItems={[
{
icon: PersonRemove,
label: t("connections:remove_friend"),
onClick: handleRemoveFriend,
id: "remove-friend",
},
{
icon: Block,
label: t("connections:block_user"),
onClick: handleBlockUser,
id: "block-user",
},
]}
>
{openDialog === "remove-friend" && (
<ConnectionActionDialog
dialogConfirm={t("connections:remove_friend_confirmation_dialog.confirm")}
dialogId="friend-item--confirmation-dialog"
dialogMessage={t("connections:remove_friend_confirmation_dialog.message", { name: friend.name })}
dialogTitle={t("connections:remove_friend_confirmation_dialog.title")}
isLoading={isRemoving}
onConfirm={handleConfirmRemoveFriend}
isOpen={openDialog === "remove-friend"}
onClose={handleDialogClose}
/>
)}
{openDialog === "block-user" && (
<ConnectionActionDialog
dialogConfirm={t("connections:block_user_confirmation_dialog.confirm")}
dialogId="block-user--confirmation-dialog"
dialogMessage={t("connections:block_user_confirmation_dialog.message")}
dialogTitle={t("connections:block_user_confirmation_dialog.title", {
name: friend.name,
})}
isLoading={isBlocking}
onConfirm={handleConfirmBlockUser}
isOpen={openDialog === "block-user"}
onClose={handleDialogClose}
/>
)}
</FriendSummaryView>
);
};
export default FriendItem;
|