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 122 123 124 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 10x 1x 3x 5x | import { Stack } from "@mui/material";
import Alert from "components/Alert";
import Button from "components/Button";
import { CONNECTIONS } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { FriendRequest } from "proto/api_pb";
import { useEffect, useRef } from "react";
import { useIsMounted, useSafeState } from "utils/hooks";
import type { SetMutationError } from ".";
import FriendSummaryView from "./FriendSummaryView";
import FriendTile from "./FriendTile";
import useFriendRequests from "./useFriendRequests";
import useRespondToFriendRequest from "./useRespondToFriendRequest";
interface RespondToFriendRequestActionProps {
friendRequest: FriendRequest.AsObject;
setMutationError: SetMutationError;
}
function RespondToFriendRequestAction({ friendRequest, setMutationError }: RespondToFriendRequestActionProps) {
const { t } = useTranslation([CONNECTIONS]);
const { isPending, isSuccess, reset, respondToFriendRequest } = useRespondToFriendRequest();
Iif (friendRequest.state !== FriendRequest.FriendRequestStatus.PENDING) {
return null;
}
const isLoading = isPending || isSuccess;
return (
<Stack direction="row" spacing={1}>
<Button
aria-label={t("connections:friend_requests_dismiss_button")}
onClick={() => {
reset();
respondToFriendRequest({
accept: false,
friendRequest,
setMutationError,
});
}}
variant="outlined"
loading={isLoading}
>
{t("connections:friend_requests_dismiss_button")}
</Button>
<Button
aria-label={t("connections:accept")}
onClick={() => {
reset();
respondToFriendRequest({
accept: true,
friendRequest,
setMutationError,
});
}}
loading={isLoading}
>
{t("connections:accept")}
</Button>
</Stack>
);
}
function FriendRequestsReceived() {
const isMounted = useIsMounted();
const [mutationError, setMutationError] = useSafeState(isMounted, "");
const { data, isLoading, isError, errors } = useFriendRequests("received");
const { t } = useTranslation([CONNECTIONS]);
const router = useRouter();
// Counted from the list rather than the ping, so the badge always agrees with
// the rows below it. Non-pending requests are in the list but not actionable.
const pendingCount = data?.filter(({ state }) => state === FriendRequest.FriendRequestStatus.PENDING).length;
const fromUserId = router.query.from ? Number(router.query.from) : null;
const requestNotFound =
fromUserId !== null && !isLoading && data !== undefined && !data.some((req) => req.userId === fromUserId);
// Scroll to the user id from the URL parameter
const highlightedCardRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (highlightedCardRef.current) {
highlightedCardRef.current.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
}, [fromUserId, data]);
return (
<>
{requestNotFound && (
<Alert severity="info" sx={{ mb: 2 }}>
{t("connections:friend_request_no_longer_available")}
</Alert>
)}
<FriendTile
title={t("connections:friend_requests")}
count={pendingCount}
errorMessage={isError ? errors.join("\n") : mutationError ? mutationError : null}
isLoading={isLoading}
hasData={!!data?.length}
noDataMessage={t("connections:no_friend_requests")}
>
{data &&
data.map((friendRequest) => (
<FriendSummaryView
key={friendRequest.friendRequestId}
friend={friendRequest.friend}
cardRef={friendRequest.userId === fromUserId ? highlightedCardRef : undefined}
>
<RespondToFriendRequestAction friendRequest={friendRequest} setMutationError={setMutationError} />
</FriendSummaryView>
))}
</FriendTile>
</>
);
}
export default FriendRequestsReceived;
|