vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.3k Packages Projects Releases Wiki Activity

perf: Fetch data server-side for Api Keys page (#20677)

Browse Source 
* server-side fetching for api keys page

* refactor billing page

* fix
This commit is contained in:
Benny Joo
2025-04-22 18:20:41 +00:00
committed by GitHub
parent e82cc328d3
commit c00e8cfa54
8 changed files with 67 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/settings/developer/api-keys-skeleton.tsx
+24
View File
@@ -0,0 +1,24 @@
"use client";
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
export const SkeletonLoader = () => {
const { t } = useLocale();
return (
<SettingsHeader
title={t("api_keys")}
description={t("create_first_api_key_description", { appName: APP_NAME })}
borderInShellHeader={true}>
<SkeletonContainer>
<div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
<SkeletonText className="h-8 w-full" />
<SkeletonText className="h-8 w-full" />
</div>
</SkeletonContainer>
</SettingsHeader>
);
};
apps/web/modules/settings/developer/api-keys-view.tsx
+13 -22
View File
@@ -7,24 +7,13 @@ import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
import { Dialog } from "@calcom/features/components/controlled-dialog";
import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
import { APP_NAME } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import type { RouterOutputs } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import { DialogContent } from "@calcom/ui/components/dialog";
import { EmptyScreen } from "@calcom/ui/components/empty-screen";
import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
const SkeletonLoader = () => {
return (
<SkeletonContainer>
<div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
<SkeletonText className="h-8 w-full" />
<SkeletonText className="h-8 w-full" />
</div>
</SkeletonContainer>
);
};
export const apiKeyModalRef = {
current: null as null | ((show: boolean) => void),
@@ -48,10 +37,12 @@ export const NewApiKeyButton = () => {
);
};
const ApiKeysView = () => {
const { t } = useLocale();
type Props = {
apiKeys: RouterOutputs["viewer"]["apiKeys"]["list"];
};
const { data, isPending } = trpc.viewer.apiKeys.list.useQuery();
const ApiKeysView = ({ apiKeys: data }: Props) => {
const { t } = useLocale();
const [apiKeyModal, setApiKeyModal] = useState(false);
const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | undefined>(
@@ -67,12 +58,12 @@ const ApiKeysView = () => {
};
}, []);
if (isPending || !data) {
return <SkeletonLoader />;
}
return (
<>
<SettingsHeader
title={t("api_keys")}
description={t("create_first_api_key_description", { appName: APP_NAME })}
CTA={<NewApiKeyButton />}
borderInShellHeader={true}>
<LicenseRequired>
<div>
{data?.length ? (
@@ -108,7 +99,7 @@ const ApiKeysView = () => {
<ApiKeyDialogForm handleClose={() => setApiKeyModal(false)} defaultValues={apiKeyToEdit} />
</DialogContent>
</Dialog>
</>
</SettingsHeader>
);
};