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 | 14x 21x 21x 25x 42x 42x 42x 42x 2x 42x | import React from "react";
import { useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { useTrpcMutationOptions } from "~app/hooks/use-trpc-mutation-options";
import type { OutboundIntention } from "~app/trpc-types";
import { useTRPC } from "~app/utils/trpc";
import { Button } from "~components/button";
import { Icon } from "~components/icons";
import { Input } from "~components/input";
import { SkeletonInput } from "~components/skeleton-input";
import { View } from "~components/view";
import { options as userConnectionsRemoveOptions } from "~mutations/user-connection-intentions/remove";
export const SkeletonOutboundConnectionIntention: React.FC = () => {
const { t } = useTranslation("peers");
return (
<SkeletonInput
skeletonClassName="w-48"
endContent={
<Button
title={t("intentions.unlinkPeerButton")}
variant="light"
isIconOnly
isDisabled
>
<Icon name="unlink" className="size-6" />
</Button>
}
/>
);
};
type Props = {
intention: OutboundIntention;
};
export const OutboundConnectionIntention: React.FC<Props> = ({ intention }) => {
const trpc = useTRPC();
const { t } = useTranslation("peers");
const removeConnectionMutation = useMutation(
trpc.userConnectionIntentions.remove.mutationOptions(
useTrpcMutationOptions(userConnectionsRemoveOptions),
),
);
const removeConnection = React.useCallback(() => {
removeConnectionMutation.mutate({
targetUserId: intention.user.id,
});
}, [removeConnectionMutation, intention.user.id]);
return (
<View testID="outbound-connection-intention">
<Input
value={intention.user.email}
label={intention.peer.name}
isReadOnly
mutation={removeConnectionMutation}
endContent={
<Button
title={t("intentions.unlinkPeerButton")}
variant="light"
isLoading={removeConnectionMutation.isPending}
isIconOnly
onPress={removeConnection}
>
<Icon name="unlink" className="size-6" />
</Button>
}
/>
</View>
);
};
|