cal.pub0.org/packages/features/webhooks/pages/webhooks-view.tsx

84 lines
2.3 KiB
TypeScript

import { useRouter } from "next/router";
import { Suspense } from "react";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import { Button } from "@calcom/ui/components/button";
import { EmptyScreen, SkeletonText } from "@calcom/ui/v2";
import Meta from "@calcom/ui/v2/core/Meta";
import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout";
import { WebhookListItem, WebhookListSkeleton } from "../components";
const WebhooksView = () => {
return (
<>
<Meta
title="Webhooks"
description="Receive meeting data in real-time when something happens in Cal.com"
/>
<div>
<Suspense fallback={<WebhookListSkeleton />}>
<WebhooksList />
</Suspense>
</div>
</>
);
};
const NewWebhookButton = () => {
const { t, isLocaleReady } = useLocale();
return (
<Button
color="secondary"
data-testid="new_webhook"
StartIcon={Icon.FiPlus}
href={`${WEBAPP_URL}/settings/developer/webhooks/new`}>
{isLocaleReady ? t("new_webhook") : <SkeletonText className="h-4 w-24" />}
</Button>
);
};
const WebhooksList = () => {
const { t } = useLocale();
const router = useRouter();
const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, {
suspense: true,
enabled: router.isReady,
});
return (
<>
{webhooks?.length ? (
<>
<div className="mt-6 mb-8 rounded-md border">
{webhooks.map((webhook, index) => (
<WebhookListItem
key={webhook.id}
webhook={webhook}
lastItem={webhooks.length === index + 1}
onEditWebhook={() => router.push(`${WEBAPP_URL}/settings/developer/webhooks/${webhook.id} `)}
/>
))}
</div>
<NewWebhookButton />
</>
) : (
<EmptyScreen
Icon={Icon.FiLink}
headline={t("create_your_first_webhook")}
description={t("create_your_first_webhook_description")}
buttonRaw={<NewWebhookButton />}
/>
)}
</>
);
};
WebhooksView.getLayout = getLayout;
export default WebhooksView;