clean code

pr/2623
CarinaWolli 2022-04-26 10:57:00 +02:00
parent dfa635bf43
commit 99ebf8508f
5 changed files with 84 additions and 88 deletions

View File

@ -1,9 +1,9 @@
import { SubscriptionType } from "@prisma/client";
import type { NextApiRequest, NextApiResponse } from "next";
import { v4 } from "uuid";
import findValidApiKey from "@calcom/ee/lib/api/findValidApiKey";
import prisma from "@calcom/prisma";
import { SubscriptionType } from "@prisma/client";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const apiKey = req.query.apiKey as string;

View File

@ -19,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
if (req.method === "GET") {
try {
const bookings = await prisma.booking.findMany({
take:3,
take: 3,
where: {
userId: validKey.userId,
},

View File

@ -11,5 +11,5 @@ export default function Icon() {
fill="#FF4A00"
/>
</svg>
)
);
}

View File

@ -1,5 +1,3 @@
export { default as InstallAppButton } from "./InstallAppButton";
export { default as ZapierSetup } from "./zapierSetup";
export { default as Icon } from "./icon";

View File

@ -1,17 +1,17 @@
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import Loader from "../../../../apps/web/components/Loader";
import { Tooltip } from "../../../../apps/web/components/Tooltip";
import showToast from "@calcom/lib/notification";
import { ClipboardCopyIcon } from "@heroicons/react/solid";
import { ApiKeyType } from "@prisma/client";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import Icon from './icon'
import showToast from "@calcom/lib/notification";
import { Button } from "@calcom/ui";
import Loader from "../../../../apps/web/components/Loader";
import { Tooltip } from "../../../../apps/web/components/Tooltip";
import Icon from "./icon";
interface IZapierSetupProps {
trpc: any;
}
@ -23,28 +23,28 @@ export default function ZapierSetup(props: IZapierSetupProps) {
const utils = trpc.useContext();
const { data: session, status } = useSession();
const integrations = trpc.useQuery(["viewer.integrations"]);
const oldApiKey = trpc.useQuery(["viewer.apiKeys.findKeyOfType",{apiKeyType: ApiKeyType.ZAPIER}]);
const deleteApiKey = trpc.useMutation("viewer.apiKeys.delete")
const oldApiKey = trpc.useQuery(["viewer.apiKeys.findKeyOfType", { apiKeyType: ApiKeyType.ZAPIER }]);
const deleteApiKey = trpc.useMutation("viewer.apiKeys.delete");
const zapierCredentials: { credentialIds: number[] } | undefined = integrations.data?.other?.items.find(
(item: { type: string }) => item.type === "zapier_other"
);
const [credentialId] = zapierCredentials?.credentialIds || [false];
const showContent = integrations.data && integrations.isSuccess && credentialId
const showContent = integrations.data && integrations.isSuccess && credentialId;
async function createApiKey() {
const event = { note: "Zapier", expiresAt: null, apiKeyType: ApiKeyType.ZAPIER };
const apiKey = await utils.client.mutation("viewer.apiKeys.create", event);
if(oldApiKey.data) {
if (oldApiKey.data) {
deleteApiKey.mutate({
id: oldApiKey.data.id,
})
});
}
setNewApiKey(apiKey);
}
if (integrations.isLoading || status === "loading") {
return (
<div className="absolute z-50 flex items-center w-full h-screen bg-gray-200">
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
<Loader />
</div>
);
@ -56,77 +56,75 @@ export default function ZapierSetup(props: IZapierSetupProps) {
});
}
return (
status === "authenticated" ? (
<div className="flex h-screen bg-gray-200">
{showContent ? (
<div className="p-10 m-auto bg-white rounded">
<div className="flex flex-row">
<div className="mr-5">
<Icon />
</div>
<div className="ml-5">
<div className="text-gray-600">Setting up your Zapier integration </div>
{!newApiKey ? (
<>
<div className="mt-1 text-xl">Generate API key:</div>
<Button onClick={() => createApiKey()} className="mt-4 mb-4">
Generate Api Key
</Button>
</>
) : (
<>
<div className="mt-1 text-xl">Your unique API</div>
<div className="flex my-2 mt-3">
<div className="w-full p-3 pr-5 mr-1 bg-gray-100 rounded">{newApiKey}</div>
<Tooltip content="copy to clipboard">
<Button
onClick={() => {
navigator.clipboard.writeText(newApiKey);
showToast("Api key copied", "success");
}}
type="button"
className="px-4 text-base ">
<ClipboardCopyIcon className="w-5 h-5 mr-2 text-neutral-100" />
copy
</Button>
</Tooltip>
</div>
<div className="mt-2 mb-5 text-sm font-semibold text-gray-600">Copy this API key and save it somewhere safe. If you lose this key you have to generate a new one.</div>
</>
)}
<ul className="mt-5 mb-5 mr-5">
<li>1. Log into your Zapier account and create a new Zap.</li>
<li>2. Select Cal.com as your Trigger app. Also choose a Trigger event.</li>
<li>
3. Choose your account and then enter your Unique API Key.
</li>
<li>4. Test your Trigger.</li>
<li>5. You're set!</li>
</ul>
<Link href={"/apps/installed"} passHref={true}>
<Button color="secondary">Done</Button>
</Link>
</div>
return status === "authenticated" ? (
<div className="flex h-screen bg-gray-200">
{showContent ? (
<div className="m-auto rounded bg-white p-10">
<div className="flex flex-row">
<div className="mr-5">
<Icon />
</div>
</div>
) : (
<div className="mt-5 ml-5">
<div>Please first install the Zapier App in the app store.</div>
<div className="mt-3">
<Link href={"/apps/zapier"} passHref={true}>
<Button>Go to App Store</Button>
<div className="ml-5">
<div className="text-gray-600">Setting up your Zapier integration </div>
{!newApiKey ? (
<>
<div className="mt-1 text-xl">Generate API key:</div>
<Button onClick={() => createApiKey()} className="mt-4 mb-4">
Generate Api Key
</Button>
</>
) : (
<>
<div className="mt-1 text-xl">Your unique API</div>
<div className="my-2 mt-3 flex">
<div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div>
<Tooltip content="copy to clipboard">
<Button
onClick={() => {
navigator.clipboard.writeText(newApiKey);
showToast("Api key copied", "success");
}}
type="button"
className="px-4 text-base ">
<ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
copy
</Button>
</Tooltip>
</div>
<div className="mt-2 mb-5 text-sm font-semibold text-gray-600">
Copy this API key and save it somewhere safe. If you lose this key you have to generate a
new one.
</div>
</>
)}
<ul className="mt-5 mb-5 mr-5">
<li>1. Log into your Zapier account and create a new Zap.</li>
<li>2. Select Cal.com as your Trigger app. Also choose a Trigger event.</li>
<li>3. Choose your account and then enter your Unique API Key.</li>
<li>4. Test your Trigger.</li>
<li>5. You're set!</li>
</ul>
<Link href={"/apps/installed"} passHref={true}>
<Button color="secondary">Done</Button>
</Link>
</div>
</div>
)
}
</div>
) : (
<div className="absolute z-50 flex items-center w-full h-screen bg-gray-200">
<Loader />
</div>
)
</div>
) : (
<div className="mt-5 ml-5">
<div>Please first install the Zapier App in the app store.</div>
<div className="mt-3">
<Link href={"/apps/zapier"} passHref={true}>
<Button>Go to App Store</Button>
</Link>
</div>
</div>
)}
</div>
) : (
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
<Loader />
</div>
);
}