import { useState } from "react"; import { trpc } from "@calcom/trpc/react"; import Button from "@calcom/ui/Button"; import { Dialog, DialogContent } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; import { List } from "@calcom/ui/List"; import { ShellSubHeading } from "@calcom/ui/Shell"; import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader"; import { QueryCell } from "@lib/QueryCell"; import WebhookDialogForm from "@components/webhook/WebhookDialogForm"; import WebhookListItem, { TWebhook } from "@components/webhook/WebhookListItem"; export type WebhookListContainerType = { title: string; subtitle: string; eventTypeId?: number; appId?: string; }; export default function WebhookListContainer(props: WebhookListContainerType) { const query = trpc.useQuery( ["viewer.webhook.list", { eventTypeId: props.eventTypeId, appId: props.appId }], { suspense: true, } ); const [newWebhookModal, setNewWebhookModal] = useState(false); const [editModalOpen, setEditModalOpen] = useState(false); const [editing, setEditing] = useState(null); return ( } success={({ data }) => (
setNewWebhookModal(true)} data-testid="new_webhook" /> } /> {data.length ? ( {data.map((item) => ( { setEditing(item); setEditModalOpen(true); }} /> ))} ) : null} {/* New webhook dialog */} !isOpen && setNewWebhookModal(false)}> setNewWebhookModal(false)} /> {/* Edit webhook dialog */} !isOpen && setEditModalOpen(false)}> {editing && ( setEditModalOpen(false)} defaultValues={editing} /> )}
)} /> ); }