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 | 23x 86x 86x 14x 56x 56x 56x 56x 20x 46x 41x 40x 14x 39x 39x | import type React from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { EmptyCard } from "~app/components/empty-card";
import { PageHeader } from "~app/components/page-header";
import { suspendedFallback } from "~app/components/suspense-wrapper";
import { EmailVerificationCard } from "~app/features/email-verification/email-verification-card";
import { useTRPC } from "~app/utils/trpc";
import { BackLink } from "~components/back-link";
import { Text } from "~components/text";
import type { ViewReactNode } from "~components/view";
import { View } from "~components/view";
import {
InboundConnectionIntention,
SkeletonInboundConnectionIntention,
} from "./inbound-connection-intention";
import {
OutboundConnectionIntention,
SkeletonOutboundConnectionIntention,
} from "./outbound-connection-intention";
const ConnectionsWrapper: React.FC<{
type: "inbound" | "outbound";
children: ViewReactNode;
}> = ({ type, children }) => {
const { t } = useTranslation("peers");
return (
<View className="flex flex-col gap-4">
<Text variant="h3">
{t(
type === "inbound"
? "intentions.inboundTitle"
: "intentions.outboundTitle",
)}
</Text>
<View className="flex flex-col gap-12">{children}</View>
</View>
);
};
const ConnectionIntentions: React.FC = suspendedFallback(
() => {
const { t } = useTranslation("peers");
const trpc = useTRPC();
const { data } = useSuspenseQuery(
trpc.userConnectionIntentions.getAll.queryOptions(),
);
if (data.inbound.length === 0 && data.outbound.length === 0) {
return <EmptyCard title={t("intentions.emptyTitle")} />;
}
return (
<View className="flex flex-col gap-12">
{data.inbound.length === 0 ? null : (
<ConnectionsWrapper type="inbound">
{data.inbound.map((intention) => (
<InboundConnectionIntention
key={intention.user.id}
intention={intention}
/>
))}
</ConnectionsWrapper>
)}
{data.outbound.length === 0 ? null : (
<ConnectionsWrapper type="outbound">
{data.outbound.map((intention) => (
<OutboundConnectionIntention
key={intention.user.id}
intention={intention}
/>
))}
</ConnectionsWrapper>
)}
</View>
);
},
<View className="flex flex-col gap-12">
<ConnectionsWrapper type="inbound">
<SkeletonInboundConnectionIntention />
</ConnectionsWrapper>
<ConnectionsWrapper type="outbound">
<SkeletonOutboundConnectionIntention />
</ConnectionsWrapper>
</View>,
);
export const ConnectionIntentionsScreen = () => {
const { t } = useTranslation("peers");
return (
<>
<EmailVerificationCard />
<PageHeader startContent={<BackLink to="/peers" />}>
{t("intentions.header")}
</PageHeader>
<ConnectionIntentions />
</>
);
};
|