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 | import { Box, CircularProgress, IconButton } from "@material-ui/core";
import { CloseIcon } from "components/Icons";
import { CONNECTIONS } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { FriendRequest } from "proto/api_pb";
import React from "react";
import { useIsMounted, useSafeState } from "utils/hooks";
import type { SetMutationError } from ".";
import FriendSummaryView from "./FriendSummaryView";
import FriendTile from "./FriendTile";
import useCancelFriendRequest from "./useCancelFriendRequest";
import useFriendRequests from "./useFriendRequests";
interface CancelFriendRequestActionProps {
friendRequestId: number;
state: FriendRequest.FriendRequestStatus;
setMutationError: SetMutationError;
userId: number;
}
function CancelFriendRequestAction({
friendRequestId,
state,
setMutationError,
userId,
}: CancelFriendRequestActionProps) {
const { cancelFriendRequest, isLoading, isSuccess, reset } =
useCancelFriendRequest();
return state === FriendRequest.FriendRequestStatus.PENDING ? (
<Box>
{isLoading || isSuccess ? (
<CircularProgress />
) : (
<IconButton
aria-label="Cancel request"
onClick={() => {
reset();
cancelFriendRequest({ friendRequestId, setMutationError, userId });
}}
>
<CloseIcon />
</IconButton>
)}
</Box>
) : null;
}
function FriendRequestsSent() {
const isMounted = useIsMounted();
const [mutationError, setMutationError] = useSafeState(isMounted, "");
const { data, isLoading, isError, errors } = useFriendRequests("sent");
const { t } = useTranslation([CONNECTIONS]);
return (
<FriendTile
title={t("connections:friend_requests_sent")}
errorMessage={
isError ? errors.join("\n") : mutationError ? mutationError : null
}
isLoading={isLoading}
hasData={!!data?.length}
noDataMessage={t("connections:no_friend_requests_sent")}
>
{data &&
data.map(({ friendRequestId, friend, userId, state }) => (
<FriendSummaryView key={friendRequestId} friend={friend}>
<CancelFriendRequestAction
friendRequestId={friendRequestId}
state={state}
setMutationError={setMutationError}
userId={userId}
/>
</FriendSummaryView>
))}
</FriendTile>
);
}
export default FriendRequestsSent;
|