plane/web/components/integration/slack/select-channel.tsx
sriram veeraghanta 1e152c666c
New Directory Setup (#2065)
* chore: moved app & space from apps to root

* chore: modified workspace configuration

* chore: modified dockerfiles for space and web

* chore: modified icons for space

* feat: updated files for new svg icons supported by next-images

* chore: added /spaces base path for next

* chore: added compose config for space

* chore: updated husky configuration

* chore: updated workflows for new configuration

* chore: changed app name to web

* fix: resolved build errors with web

* chore: reset file tracing root for both projects

* chore: added nginx config for deploy

* fix: eslint and tsconfig settings for space app

* husky setup fixes based on new dir

* eslint fixes

* prettier formatting

---------

Co-authored-by: Henit Chobisa <chobisa.henit@gmail.com>
2023-09-03 18:50:30 +05:30

110 lines
3.4 KiB
TypeScript

import React, { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// services
import appinstallationsService from "services/app-installations.service";
// ui
import { Loader } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
import useIntegrationPopup from "hooks/use-integration-popup";
// types
import { IWorkspaceIntegration, ISlackIntegration } from "types";
// fetch-keys
import { SLACK_CHANNEL_INFO } from "constants/fetch-keys";
type Props = {
integration: IWorkspaceIntegration;
};
export const SelectChannel: React.FC<Props> = ({ integration }) => {
const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] =
useState<boolean>(false);
const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { startAuth } = useIntegrationPopup("slackChannel", integration.id);
const { data: projectIntegration } = useSWR(
workspaceSlug && projectId && integration.id
? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
: null,
() =>
workspaceSlug && projectId && integration.id
? appinstallationsService.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);
});
appinstallationsService
.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-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
slackChannelAvailabilityToggle ? "bg-green-500" : "bg-gray-200"
}`}
role="switch"
aria-checked
onClick={() => {
slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
}}
>
<span
aria-hidden="true"
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
slackChannelAvailabilityToggle ? "translate-x-5" : "translate-x-0"
}`}
/>
</button>
) : (
<Loader>
<Loader.Item height="35px" width="150px" />
</Loader>
)}
</>
);
};