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 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import Button from "components/Button";
import { CheckIcon, CloseIcon, PersonAddIcon } from "components/Icons";
import Menu, { MenuItem } from "components/Menu";
import type { SetMutationError } from "features/connections/friends";
import useRespondToFriendRequest from "features/connections/friends/useRespondToFriendRequest";
import { PROFILE } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { FriendRequest } from "proto/api_pb";
import React, { useRef, useState } from "react";
interface PendingFriendReqButtonProps {
friendRequest: FriendRequest.AsObject;
setMutationError: SetMutationError;
}
export const RESPOND_TO_FRIEND_REQUEST_MENU_ID =
"respond-to-friend-request-actions-menu";
function PendingFriendReqButton({
friendRequest,
setMutationError,
}: PendingFriendReqButtonProps) {
const [isOpen, setIsOpen] = useState({
accepted: false,
declined: false,
menu: false,
});
const { isLoading, isSuccess, respondToFriendRequest } =
useRespondToFriendRequest();
const menuAnchor = useRef<HTMLButtonElement>(null);
const handleClick = (item: keyof typeof isOpen) => () => {
if (item === "accepted") {
setIsOpen((prevState) => ({ ...prevState, menu: false }));
respondToFriendRequest({
accept: true,
friendRequest,
setMutationError,
});
} else if (item === "declined") {
setIsOpen((prevState) => ({ ...prevState, menu: false }));
respondToFriendRequest({
accept: false,
friendRequest,
setMutationError,
});
} else {
setIsOpen((prevState) => ({ ...prevState, menu: true }));
}
};
const handleClose = (item: keyof typeof isOpen) => () => {
setIsOpen((prevState) => ({ ...prevState, [item]: false }));
};
const { t } = useTranslation([PROFILE]);
return (
<>
{isSuccess ? null : (
<>
<Button
startIcon={<PersonAddIcon />}
innerRef={menuAnchor}
onClick={handleClick("menu")}
aria-controls={RESPOND_TO_FRIEND_REQUEST_MENU_ID}
loading={isLoading}
>
{t("profile:connection_pending")}
</Button>
<Menu
anchorEl={menuAnchor.current}
id={RESPOND_TO_FRIEND_REQUEST_MENU_ID}
onClose={handleClose("menu")}
open={isOpen.menu}
>
<MenuItem onClick={handleClick("accepted")}>
<CheckIcon />
{t("profile:actions.accept_friend_label")}
</MenuItem>
<MenuItem onClick={handleClick("declined")}>
<CloseIcon />
{t("profile:actions.decline_friend_label")}
</MenuItem>
</Menu>
</>
)}
</>
);
}
export default PendingFriendReqButton;
|