import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; 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 LicenseRequired from "../../common/components/LicenseRequired"; import ApiKeyDialogForm from "./ApiKeyDialogForm"; import ApiKeyListItem, { TApiKeys } from "./ApiKeyListItem"; function ApiKeyListContainer() { const { t } = useLocale(); const query = trpc.useQuery(["viewer.apiKeys.list"]); const data = query.data; const [newApiKeyModal, setNewApiKeyModal] = useState(false); const [editModalOpen, setEditModalOpen] = useState(false); const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | null>(null); return (
setNewApiKeyModal(true)} /> } /> {(() => { if (query.isLoading) return ; if (!data) return null; return ( <> {data.length > 0 && ( {data.map((item) => ( { setApiKeyToEdit(item); setEditModalOpen(true); }} /> ))} )} {/* New api key dialog */} !isOpen && setNewApiKeyModal(false)}> setNewApiKeyModal(false)} /> {/* Edit api key dialog */} !isOpen && setEditModalOpen(false)}> {apiKeyToEdit && ( setEditModalOpen(false)} defaultValues={apiKeyToEdit} /> )} ); })()}
); } export default ApiKeyListContainer;