plane/apps/app/components/integration/slack/select-channel.tsx
2023-04-21 13:36:35 +05:30

91 lines
2.5 KiB
TypeScript

import React,{useState} from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// services
import projectService from "services/project.service";
import IntegrationService from "services/integration";
// ui
import { DangerButton, Loader, SecondaryButton } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
import useIntegrationPopup from "hooks/use-integration-popup";
// types
import { IAppIntegration, IWorkspaceIntegration } from "types";
// fetch-keys
import { WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
type Props = {
integration: IWorkspaceIntegration;
};
export const SelectChannel: React.FC<Props> = ({
integration,
}) => {
const [deletingIntegration, setDeletingIntegration] = useState(false);
const router = useRouter();
const { workspaceSlug } = router.query;
const { setToastAlert } = useToast();
const { startAuth, isConnecting: isInstalling } = useIntegrationPopup("slackChannel");
const { data: workspaceIntegrations } = useSWR(
workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
() =>
workspaceSlug
? IntegrationService.getWorkspaceIntegrationsList(workspaceSlug as string)
: null
);
const isInstalled = workspaceIntegrations?.find(
(i: any) => i.integration_detail.id === integration.id
);
const handleRemoveIntegration = async () => {
if (!workspaceSlug || !integration || !workspaceIntegrations) return;
const workspaceIntegrationId = workspaceIntegrations?.find(
(i) => i.integration === integration.id
)?.id;
setDeletingIntegration(true);
await IntegrationService.deleteWorkspaceIntegration(
workspaceSlug as string,
workspaceIntegrationId ?? ""
)
.then(() => {
setDeletingIntegration(false);
})
.catch(() => {
setDeletingIntegration(false);
});
};
return (
<>
{workspaceIntegrations ? (
isInstalled ? (
<DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration}>
{deletingIntegration ? "Removing..." : "Remove channel"}
</DangerButton>
) : (
<SecondaryButton onClick={startAuth} loading={isInstalling}>
{isInstalling ? "Adding..." : "Add channel"}
</SecondaryButton>
)
) : (
<Loader>
<Loader.Item height="35px" width="150px" />
</Loader>
)}
</>
);
};