cal.pub0.org/apps/web/pages/v2/settings/my-account/conferencing.tsx

103 lines
3.3 KiB
TypeScript

import { GetServerSidePropsContext } from "next";
import getApps from "@calcom/app-store/utils";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma from "@calcom/prisma";
import { Icon } from "@calcom/ui";
import Dropdown, {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/v2/core/Dropdown";
import Meta from "@calcom/ui/v2/core/Meta";
import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout";
import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
import { getSession } from "@lib/auth";
import { inferSSRProps } from "@lib/types/inferSSRProps";
const ConferencingLayout = (props: inferSSRProps<typeof getServerSideProps>) => {
const { t } = useLocale();
const { apps } = props;
// Error reason: getaddrinfo EAI_AGAIN http
// const query = trpc.useQuery(["viewer.integrations", { variant: "conferencing", onlyInstalled: true }], {
// suspense: true,
// });
return (
<div className="w-40 rounded-md border border-neutral-200 bg-white sm:mx-0 md:w-96 xl:mt-0">
<Meta title="conferencing" description="conferencing_description" />
{apps.map((app) => (
<div
key={app.title}
className="flex flex-1 items-center space-x-3 border-b py-5 px-4 rtl:space-x-reverse">
<img className="h-10 w-10" src={app.logo} alt={app.title} />
<div className="truncate pl-2">
<h3 className="truncate text-sm font-medium text-neutral-900">{app.title}</h3>
<p className="truncate text-sm text-gray-500">{app.description}</p>
</div>
<Dropdown>
<DropdownMenuTrigger className="focus:ring-brand-900 block h-[36px] w-auto justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 focus:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1">
<Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<DisconnectIntegration
credentialId={app.credentialId}
label={t("remove_app")}
trashIcon
isGlobal={app.isGlobal}
/>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
</div>
))}
</div>
);
};
ConferencingLayout.getLayout = getLayout;
export default ConferencingLayout;
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
const session = await getSession(context);
if (!session?.user?.id) {
return { redirect: { permanent: false, destination: "/auth/login" } };
}
const videoCredentials = await prisma.credential.findMany({
where: {
userId: session.user.id,
app: {
categories: {
has: "video",
},
},
},
});
const apps = getApps(videoCredentials)
.filter((app) => {
return app.variant === "conferencing" && app.credentials.length;
})
.map((app) => {
return {
slug: app.slug,
title: app.title,
logo: app.logo,
description: app.description,
credentialId: app.credentials[0].id,
isGlobal: app.isGlobal,
};
});
return { props: { apps } };
};