plane/web/components/integration/slack/select-channel.tsx
sriram veeraghanta 8d15b9e7de
chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:48:10 +05:30

114 lines
3.7 KiB
TypeScript

import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
import { observer } from "mobx-react-lite";
// services
import { AppInstallationService } from "services/app_installation.service";
// ui
import { Loader } from "@plane/ui";
// hooks
import useIntegrationPopup from "hooks/use-integration-popup";
// types
import { IWorkspaceIntegration, ISlackIntegration } from "types";
// fetch-keys
import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
// lib
import { useMobxStore } from "lib/mobx/store-provider";
type Props = {
integration: IWorkspaceIntegration;
};
const appInstallationService = new AppInstallationService();
export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
// store
const {
appConfig: { envConfig },
} = useMobxStore();
// states
const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { startAuth } = useIntegrationPopup({
provider: "slackChannel",
stateParams: integration.id,
github_app_name: envConfig?.github_client_id || "",
slack_client_id: envConfig?.slack_client_id || "",
});
const { data: projectIntegration } = useSWR(
workspaceSlug && projectId && integration.id
? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
: null,
() =>
workspaceSlug && projectId && integration.id
? appInstallationService.getSlackChannelDetail(
workspaceSlug as string,
projectId as string,
integration.id as string
)
: null
);
useEffect(() => {
if (projectId && projectIntegration && projectIntegration.length > 0) {
const projectSlackIntegrationCheck: ISlackIntegration | undefined = projectIntegration.find(
(_slack: ISlackIntegration) => _slack.project === projectId
);
if (projectSlackIntegrationCheck) {
setSlackChannel(() => projectSlackIntegrationCheck);
setSlackChannelAvailabilityToggle(true);
}
}
}, [projectIntegration, projectId]);
const handleDelete = async () => {
if (projectIntegration.length === 0) return;
mutate(SLACK_CHANNEL_INFO, (prevData: any) => {
if (!prevData) return;
return prevData.id !== integration.id;
}).then(() => {
setSlackChannelAvailabilityToggle(false);
setSlackChannel(null);
});
appInstallationService
.removeSlackChannel(workspaceSlug as string, projectId as string, integration.id as string, slackChannel?.id)
.catch((err) => console.log(err));
};
const handleAuth = async () => {
await startAuth();
};
return (
<>
{projectIntegration ? (
<button
type="button"
className={`relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-700 transition-colors duration-200 ease-in-out focus:outline-none`}
role="switch"
aria-checked
onClick={() => {
slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
}}
>
<span
aria-hidden="true"
className={`inline-block h-2 w-2 transform self-center rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
}`}
/>
</button>
) : (
<Loader>
<Loader.Item height="35px" width="150px" />
</Loader>
)}
</>
);
});