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

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Button from "components/Button";
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, isPending, isSuccess, reset } = useCancelFriendRequest();
  const { t } = useTranslation(CONNECTIONS);
 
  return state === FriendRequest.FriendRequestStatus.PENDING ? (
    <Button
      aria-label={t("connections:cancel_request_button_a11y")}
      variant="outlined"
      loading={isPending || isSuccess}
      onClick={() => {
        reset();
        cancelFriendRequest({ friendRequestId, setMutationError, userId });
      }}
    >
      {t("connections:cancel_request_button_a11y")}
    </Button>
  ) : 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;